prepare examples

Author: krizzu

eslint.config.js

@@ -0,0 +1 @@
+module.exports = require("@rnx-kit/eslint-plugin/recommended");

example/.eslintrc.js

@@ -1,9 +1,5 @@
-/**
- * @format
- */
-
 import {AppRegistry} from 'react-native';
-import App from './App';
+import App from './src/App';
 import {name as appName} from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);

example/App.tsx

@@ -7,9 +7,7 @@ const path = require('path');
  * @type {import('metro-config').MetroConfig}
  */
 const config = {
-  watchFolders: [
-    path.resolve(__dirname, "..")
-  ],
+  watchFolders: [path.resolve(__dirname, '..')],
   resolver: {
     nodeModulesPaths: [path.resolve(__dirname, 'node_modules')],
     unstable_enableSymlinks: true,

example/index.js

@@ -5,7 +5,6 @@
   "scripts": {
     "android": "react-native run-android",
     "ios": "react-native run-ios",
-    "lint": "eslint .",
     "start": "react-native start",
     "test": "jest"
   },
@@ -17,14 +16,12 @@
     "@babel/core": "^7.20.0",
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
-    "@react-native/eslint-config": "^0.72.2",
     "@react-native/metro-config": "^0.72.11",
     "@tsconfig/react-native": "^3.0.0",
     "@types/react": "^18.0.24",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.2.1",
     "babel-plugin-module-resolver": "^5.0.0",
-    "eslint": "^8.19.0",
     "jest": "^29.2.1",
     "metro-react-native-babel-preset": "0.76.8",
     "prettier": "^2.4.1",

example/metro.config.js

@@ -0,0 +1,26 @@
+import React, {useState} from 'react';
+import {SafeAreaView, ScrollView, StatusBar, View} from 'react-native';
+import useDatabase from './hooks/useDatabase';
+import DatabaseSelector from './components/DatabaseSelector';
+import BasicCrud from './components/BasicCrud';
+
+function App(): JSX.Element {
+  const [dbName, setDbName] = useState('example_db.db');
+  const database = useDatabase(dbName);
+  return (
+    <SafeAreaView>
+      <StatusBar barStyle={'dark-content'} />
+      <ScrollView contentContainerStyle={{width: '100%', height: '100%'}}>
+        <View style={{flex: 1}}>
+          <DatabaseSelector
+            initialName={dbName}
+            onCreateDatabase={newName => setDbName(newName)}
+          />
+          <BasicCrud key={dbName} db={database} />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+export default App;

example/package.json

@@ -0,0 +1,55 @@
+import type {AsyncStorageSqlite} from '@react-native-async-storage/sqlite-storage';
+import React, {useState} from 'react';
+import {Button, StyleSheet, Text, View} from 'react-native';
+
+type Props = {db: AsyncStorageSqlite};
+
+const BasicCrud: React.FC<Props> = ({db}) => {
+  const [value, setValue] = useState<null | string>(null);
+
+  async function readValue() {
+    const stored = await db.read('random');
+    setValue(JSON.stringify(stored, null, 2));
+  }
+
+  async function createAndSaveRandomValue() {
+    const randomValue = (Math.random() % 100) * 100;
+    await db.save('random', String(randomValue));
+    await readValue();
+  }
+
+  async function deleteValue() {
+    await db.delete('random');
+    await readValue();
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.header}>Basic crud example</Text>
+      <View style={styles.row}>
+        <Button title="read random" onPress={readValue} />
+        <Button title="Save random" onPress={createAndSaveRandomValue} />
+        <Button title="delete random" onPress={deleteValue} />
+      </View>
+
+      <Text>{value ?? 'null'}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 8,
+  },
+  header: {
+    fontSize: 18,
+  },
+  row: {
+    paddingVertical: 18,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+});
+
+export default BasicCrud;

example/src/App.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import {useState} from 'react';
+import {Button, StyleSheet, TextInput, View} from 'react-native';
+
+type Props = {
+  initialName: string;
+  children?: React.ReactElement;
+  onCreateDatabase: (dbName: string) => void;
+};
+
+const DatabaseSelector: React.FC<Props> = ({
+  children,
+  initialName,
+  onCreateDatabase,
+}) => {
+  const [input, setInput] = useState<string>(initialName);
+
+  function createDatabase() {
+    if (!input) {
+      return;
+    }
+    onCreateDatabase(input);
+  }
+
+  return (
+    <View>
+      <View style={styles.row}>
+        <TextInput style={styles.input} onChangeText={setInput} value={input} />
+        <View style={styles.buttons}>
+          <Button title="Select database" onPress={createDatabase} />
+        </View>
+      </View>
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  row: {
+    padding: 8,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  },
+  input: {
+    paddingHorizontal: 8,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    flex: 1,
+    borderColor: 'gray',
+  },
+  buttons: {alignItems: 'center', justifyContent: 'center', padding: 8},
+});
+
+export default DatabaseSelector;

example/src/components/BasicCrud.tsx

@@ -0,0 +1,18 @@
+import React, {useEffect} from 'react';
+import {AsyncStorageSqlite} from '@react-native-async-storage/sqlite-storage';
+
+function useDatabase(dbName: string) {
+  const [database, setDatabase] = React.useState<AsyncStorageSqlite>(() => {
+    return new AsyncStorageSqlite(dbName);
+  });
+
+  useEffect(() => {
+    if (dbName && database?.name !== dbName) {
+      setDatabase(new AsyncStorageSqlite(dbName));
+    }
+  }, [dbName]);
+
+  return database;
+}
+
+export default useDatabase;