diff --git a/with-sqlite/App.js b/with-sqlite/App.js index d8ecb06..88c2a8a 100644 --- a/with-sqlite/App.js +++ b/with-sqlite/App.js @@ -1,7 +1,7 @@ +import React, { useState } from 'react'; +import { ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'; import Constants from 'expo-constants'; import * as SQLite from 'expo-sqlite'; -import React from 'react'; -import { ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'; const db = SQLite.openDatabase("db.db"); @@ -47,9 +47,7 @@ function Items({ done: doneHeading, onPressItem }) { export default function App() { const [text, setText] = React.useState(null) - - let _todo; - let _done; + const [forceUpdate, forceUpdateId] = useForceUpdate() React.useEffect(() => { db.transaction(tx => { @@ -57,8 +55,7 @@ export default function App() { "create table if not exists items (id integer primary key not null, done int, value text);" ); }); - }, []) - + }, []); const add = (text) => { // is text empty? @@ -74,15 +71,10 @@ export default function App() { ); }, null, - update + forceUpdate ); } - const update = () => { - _todo && _todo.update(); - _done && _done.update(); - }; - return ( SQLite Example @@ -100,8 +92,8 @@ export default function App() { (_todo = todo)} onPressItem={id => db.transaction( tx => { @@ -110,20 +102,20 @@ export default function App() { ]); }, null, - update + forceUpdate ) } /> (_done = done)} + key={`forceupdate-done-${forceUpdateId}`} onPressItem={id => db.transaction( tx => { tx.executeSql(`delete from items where id = ?;`, [id]); }, null, - update + forceUpdate ) } /> @@ -133,6 +125,11 @@ export default function App() { } +function useForceUpdate() { + const [value, setValue] = useState(0); + return [() => setValue(value + 1), value]; +} + const styles = StyleSheet.create({ container: { backgroundColor: "#fff", diff --git a/with-sqlite/README.md b/with-sqlite/README.md index 4091ffe..6b4043b 100644 --- a/with-sqlite/README.md +++ b/with-sqlite/README.md @@ -1,23 +1,25 @@ # SQLite Example +

+ + Supports Expo iOS + + Supports Expo Android +

+ Example demonstrating use of the `SQLite` API in Expo. The app allows adding todo items, marking them as done, and deleting done items. `SQLite` features used include creating and opening databases, creating tables, inserting items, querying and displaying results, using prepared statements. -You can also see this code in action **right in your browser** via [this snack](https://snack.expo.io/@charliecruzan/sqlite-example)! +![Simulator Example](.gh-assets/1.png) -#### Install & Build +## 🚀 How to use -- Clone this repository +- Run `yarn` or `npm install` +- Run [`expo start`](https://docs.expo.io/versions/latest/workflow/expo-cli/), try it out. -- Install dependencies by running `yarn install` +## 📝 Notes -- Install [Expo CLI](https://docs.expo.io/versions/latest/workflow/expo-cli/) by running `npm install -g expo-cli` (if not already installed globally on your machine) - -- Run the project locally by running `expo start` - -#### Screenshot - - +- [Expo SQLite docs](https://docs.expo.io/versions/latest/sdk/sqlite/) diff --git a/with-sqlite/package.json b/with-sqlite/package.json index 747ce7c..830f864 100644 --- a/with-sqlite/package.json +++ b/with-sqlite/package.json @@ -1,14 +1,14 @@ { "dependencies": { - "expo": "36.0.0", - "expo-sqlite": "~8.0.0", + "expo": "37.0.7", + "expo-sqlite": "8.1.0", "react": "16.9.0", "react-dom": "16.9.0", - "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz", + "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz", "react-native-web": "0.11.7" }, "devDependencies": { - "@babel/core": "7.0.0", - "babel-preset-expo": "8.0.0" + "@babel/core": "7.9.0", + "babel-preset-expo": "8.1.0" } }