Add opSqlite and drizzle

Author: codeAbinash

bun.lockb

@@ -19,6 +19,7 @@
     "prettier:fix": "prettier --write ."
   },
   "dependencies": {
+    "@op-engineering/op-sqlite": "^11.2.13",
     "@react-native-clipboard/clipboard": "^1.15.0",
     "@react-native-community/netinfo": "^11.4.1",
     "@react-native-masked-view/masked-view": "^0.3.2",
@@ -28,6 +29,7 @@
     "@shopify/react-native-skia": "^1.5.8",
     "@tanstack/react-query": "^5.62.12",
     "clsx": "^2.1.1",
+    "drizzle-orm": "^0.38.3",
     "hono": "^4.6.11",
     "lottie-react-native": "^7.1.0",
     "nativewind": "^4.1.23",
@@ -41,14 +43,12 @@
     "react-native-reanimated": "3.16.3",
     "react-native-safe-area-context": "^5.0.0",
     "react-native-screens": "^4.4.0",
-    "react-native-sqlite-storage": "^6.0.1",
     "react-native-svg": "^15.9.0",
     "tailwind-merge": "^2.6.0",
     "zod": "^3.24.1",
     "zustand": "^5.0.2"
   },
   "devDependencies": {
-    "tailwindcss": "^3.4.16",
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
     "@babel/runtime": "^7.25.0",
@@ -63,13 +63,14 @@
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.6.3",
     "babel-plugin-module-resolver": "^5.0.2",
+    "drizzle-kit": "^0.30.1",
     "eslint": "^8.19.0",
     "jest": "^29.6.3",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.9",
     "react-native-svg-transformer": "^1.5.0",
     "react-test-renderer": "18.3.1",
-    "@types/react-native-sqlite-storage": "^6.0.5",
+    "tailwindcss": "^3.4.16",
     "typescript": "5.0.4"
   },
   "engines": {

package.json

@@ -114,7 +114,7 @@ function Shortcuts({ navigation }: { navigation: StackNav }) {
           <Medium className='text-xs text-gray-700 dark:text-gray-300'>Shortcut 1</Medium>
         </TouchableOpacity>
         <TouchableOpacity
-          onPress={() => navigation.navigate('Story')}
+          onPress={() => navigation.navigate('Test')}
           style={[hw, styles.shadow, styles.center]}
           className='w-1/2 rounded-2xl bg-white dark:bg-zinc-900'
         >

src/screens/Home/HomeScreen.tsx

@@ -6,9 +6,21 @@ import { SettOption } from '@components/Settings/SettOption'
 import SettText from '@components/Settings/SettText'
 import SettWrapper from '@components/Settings/SettWrapper'
 import type { NavProp } from '@utils/types'
-import React from 'react'
+import React, { useEffect } from 'react'
+
+import { open } from '@op-engineering/op-sqlite'
+import { drizzle } from 'drizzle-orm/op-sqlite'
+
+const opsqlite = open({
+  name: 'myDB',
+})
+const db = drizzle(opsqlite)
 
 export default function Test({ navigation }: NavProp) {
+  useEffect(() => {
+    console.log('db', db)
+  }, [db])
+
   return (
     <>
       <SettWrapper navigation={navigation} title='Test Screen'>