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
+
+
+
+
+
+
+
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)!
+
-#### 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"
}
}