Merge pull request #145 from byCedric/refactor/upgrade-sqlite

refactor(with-sqlite): upgrade to sdk 37

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 (
     <View style={styles.container}>
       <Text style={styles.heading}>SQLite Example</Text>
@@ -100,8 +92,8 @@ export default function App() {
       </View>
       <ScrollView style={styles.listArea}>
         <Items
+          key={`forceupdate-todo-${forceUpdateId}`}
           done={false}
-          ref={todo => (_todo = todo)}
           onPressItem={id =>
             db.transaction(
               tx => {
@@ -110,20 +102,20 @@ export default function App() {
                 ]);
               },
               null,
-              update
+              forceUpdate
             )
           }
         />
         <Items
           done
-          ref={done => (_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",

with-sqlite/README.md

@@ -1,23 +1,25 @@
 # SQLite Example
 
+<p>
+  <!-- iOS -->
+  <img alt="Supports Expo iOS" longdesc="Supports Expo iOS" src="https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square&logo=APPLE&labelColor=999999&logoColor=fff" />
+  <!-- Android -->
+  <img alt="Supports Expo Android" longdesc="Supports Expo Android" src="https://img.shields.io/badge/Android-4630EB.svg?style=flat-square&logo=ANDROID&labelColor=A4C639&logoColor=fff" />
+</p>
+
 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
-
-<img src="./.gh-assets/1.png?raw=true" width="440" />
+- [Expo SQLite docs](https://docs.expo.io/versions/latest/sdk/sqlite/)

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"
   }
 }