aws-amplify · nearestnabors · Oct 21, 2022 · Oct 8, 2022 · Oct 8, 2022 · Oct 10, 2022
@@ -13,7 +13,6 @@ npx create-react-app amplify-datastore --use-npm
 cd amplify-datastore
 npx amplify-app@latest
 ```  
-
 </Block>
 <Block name="React Native">
 

@@ -22,7 +22,7 @@ You will also need to install the pod dependencies for iOS:
 npx pod-install
 ```
 </Block>
-<Block name="Expo">
+<Block name="Expo CLI">
 
 Install the necessary dependencies by running the following command:
 

@@ -21,17 +21,17 @@ The following `props` are used for building a custom UI with buttons if you do n
 To use `withOAuth` in your React Native application first install the appropriate dependencies:
 
 <BlockSwitcher>
-<Block name="Expo">
+<Block name="Expo CLI">
 
 ```sh
-yarn add aws-amplify-react-native aws-amplify @react-native-picker/picker
+yarn add aws-amplify
 ```
 
 </Block>
 <Block name="React Native CLI">
 
 ```sh
-yarn add aws-amplify-react-native aws-amplify @react-native-picker/picker
+yarn add aws-amplify
 ```
 
 You will also need to install the pod dependencies for iOS:

@@ -360,7 +360,7 @@ import all2 from "/src/fragments/lib/auth/js/react-native-withoauth.mdx";
 
 </Block>
 
-<Block name="Expo">
+<Block name="Expo CLI">
 
 **In-App Browser Setup (optional, but recommended)**
 

@@ -5,8 +5,7 @@ The fastest way to get started is using the `amplify-app` npx script.
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen
-></iframe>
-<br />
+></iframe> <br />
 
 Start with [Create React app](https://create-react-app.dev):
 
@@ -15,3 +14,68 @@ npx create-react-app amplify-datastore --use-npm
 cd amplify-datastore
 npx amplify-app@latest
 ```
+
+Start with the [React Native CLI](https://reactnative.dev/docs/getting-started):
+
+```bash
+npx react-native@0.68.2 init AmplifyDataStoreRN --version 0.68.2
+cd AmplifyDataStoreRN
+npx amplify-app@latest
+npm install aws-amplify @react-native-community/netinfo @react-native-async-storage/async-storage
+```
+
+You will also need to install the pod dependencies for iOS:
+
+```sh
+npx pod-install
+```
+
+**Use SQLite for enhanced performance (optional)**
+
+React Native CLI apps can now use SQLite with DataStore. SQLite offers considerable performance advantages over the default "AsyncStorage" database.
+
+To enable SQLite with DataStore for enhanced local database performance, follow the steps below:
+
+```sh
+npx react-native@0.68.2 init AmplifyDataStoreRN --version 0.68.2
+cd AmplifyDataStoreRN
+npx amplify-app@latest
+npm install aws-amplify @aws-amplify/datastore-storage-adapter react-native-sqlite-storage @react-native-community/netinfo @react-native-async-storage/async-storage
+npx pod-install
+```
+
+Then configure the SQLite storage adapter with DataStore in your app:
+
+```js
+import { DataStore } from 'aws-amplify';
+import { SQLiteAdapter } from '@aws-amplify/datastore-storage-adapter/SQLiteAdapter';
+
+DataStore.configure({
+  storageAdapter: SQLiteAdapter
+});
+```
+
+<Block name="Expo CLI">
+
+Start with the [Expo](https://docs.expo.dev/):
+
+```bash
+expo init AmplifyDataStoreExpo
+cd AmplifyDataStoreExpo
+npx amplify-app@latest
+expo install aws-amplify @react-native-community/netinfo @react-native-async-storage/async-storage
+```
+
+**Use SQLite for enhanced performance (optional)**
+
+Expo built apps can now use SQLite with DataStore. SQLite offers considerable performance advantages over the default "AsyncStorage" database.
+
+To enable SQLite with DataStore for enhanced local database performance, follow the steps below:
+
+```sh
+expo init AmplifyDataStoreExpo
+cd AmplifyDataStoreExpo
+npx amplify-app@latest
+expo install aws-amplify @aws-amplify/datastore-storage-adapter expo-sqlite expo-file-system @react-native-community/netinfo @react-native-async-storage/async-storage
+```
+</Block>
@@ -8,7 +8,7 @@ Make sure you have completed the below steps:
 In your application directory, you should first install the necessary dependencies. Although Amplify In-App Messaging can be used as a standalone JavaScript library, the UI integration is currently available only for _React Native_. The integrations steps here assume a React Native application as the implementation target.
 
 ```bash
-npm install -E aws-amplify@in-app-messaging aws-amplify-react-native@in-app-messaging amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage @react-native-picker/picker react-native-get-random-values react-native-url-polyfill
+npm install -E aws-amplify@in-app-messaging aws-amplify-react-native@in-app-messaging amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill
 ```
 
 You will also need to install pod dependencies for `iOS`. Navigate to the `iOS` directory in your project and run the install command.

@@ -3,7 +3,7 @@
 The first step is to initialize a new React Native project. This can be done using Expo or the React Native CLI.
 
 <BlockSwitcher>
-<Block name="Expo">
+<Block name="Expo CLI">
 
 > If this is your first time using Expo, complete the [Expo Getting Started guide](https://docs.expo.dev/) before running the below command.
 

@@ -19,7 +19,7 @@ With the basic setup complete, you can now model the data your application will
 ### Add the Priority and completedAt fields
 
 1. Start by changing **description** to **priority**
-2. In the inspector panel, select **Is required** to make this field required
+2. In the inspector panel to the right, select **Is required** to make this field required
 3. For the **Type** of this field, select **Enums** > **Create New**
 4. Set the name of the Enum to **Priority**
 5. Set the value of the Enum to **LOW**, click **Add a value**, and add **NORMAL** and **HIGH**
@@ -32,16 +32,9 @@ With the basic setup complete, you can now model the data your application will
 ## Generate the models locally
 
 1. If you haven’t already done so, click **Next: Test locally in your app** on the Data modeling screen to proceed
-2. On the Test locally in your app screen, you will be prompted with on-screen instructions
-    1. **What type of app are you building?**
-        1. Platform: **Android**
-        2. Framework / Language: **Java** or **Kotlin**
-        3. Click **Next**
-    2. **(Optional) Create a new app**
-        1. You should have already created a new Android app in a previous step, so go ahead and click **Next**
-    3. **Install Amplify CLI to pull the data model**
-        1. You should have already installed the Amplify CLI in a previous step
-        2. Copy and run the command shown in your project root. This command will initialize your current project with Amplify as well as generate the data models you will be using locally
+2. **Install Amplify CLI to pull the data model**
+    1. You should have already installed the Amplify CLI in a previous step
+    2. Copy and run the command shown in your project root. This command will initialize your current project with Amplify as well as generate the data models you will be using locally
 
             ```bash
             amplify pull --sandboxId <UUID>

@@ -21,7 +21,7 @@ With the basic setup complete, you can now model the data your application will
 1. Start by clicking **Add a field** under the **Todo** model.
 2. Set the **Field name** of this field to **isComplete**
 3. For the **Type** of this field, select **Boolean**
-4. In the inspector panel, select **Is required** to make this field required
+4. In the inspector panel to the right, select **Is required** to make this field required
 
     ![Add isComplete field](/images/lib/getting-started/flutter/generate-model-admin-ui-isComplete-field.png)
 

@@ -8,7 +8,7 @@ With the basic setup complete, you can now model the data your application will
 
 ## Create data model
 
-1. Navigate to the [Data feature in AWS Amplify Studio](https://sandbox.amplifyapp.com/getting-started) , select **Build a Todo** with **React Native** and then click on **Get started**.
+1. Navigate to the [AWS Amplify Studio](https://sandbox.amplifyapp.com/getting-started) , select **To-do list** option in the quickstart section with **React Native** then click on **Get started**.
 
     ![Create new schema](/images/lib/getting-started/reactnative/generate-model-admin-ui-create.png)
 
@@ -19,30 +19,23 @@ With the basic setup complete, you can now model the data your application will
 1. Start by clicking **Add a field** under the **Todo** model.
 2. Set the **Field name** of this field to **isComplete**
 3. For the **Type** of this field, select **Boolean**
-4. In the inspector panel, select **Is required** to make this field required
+4. In the inspector panel to the right, select **Is required** to make this field required
 
     ![Add isComplete field](/images/lib/getting-started/reactnative/generate-model-admin-ui-isComplete-field.png)
 
 ## Generate the models locally
 
 1. If you haven’t already done so, click **Next: Test locally in your app** on the Data modeling screen to proceed
-2. On the Test locally in your app screen, you will be prompted with on-screen instructions
-    1. **What type of app are you building?**
-        1. Platform: **Cross-platform**
-        2. Framework / Language: **React Native**
-        3. Click **Next**
-    2. **(Optional) Create a new app**
-        1. You should have already created a new React Native app in a previous step, so go ahead and click **Next**
-    3. **Install Amplify CLI to pull the data model**
-        1. You should have already installed the Amplify CLI in a previous step
-        2. Copy and run the command shown in your project root. This command will initialize your current project with Amplify as well as generate the data models you will be using locally
-
+2. **Install Amplify CLI to pull the data model**
+    1. You should have already installed the Amplify CLI in a previous step
+    2. Copy and run the command shown in your project root. This command will initialize your current project with Amplify as well as generate the data models you will be using locally
+
             ```bash
             amplify pull --sandboxId <UUID>
             ```
-
+            
     4. Make a note of the sandbox id, just in case!
-    5. Skip the remaining steps as they will be covered by the tutorial and click **Deploy** on the top right
+    5. As the rest of the steps will be covered by the tutorial, you can skip the remaining steps in Amplify Studio and click **Deploy** on the top right
 3. In order to deploy a backend, you will need an AWS account. We will go over this in a later step when we’re ready to sync our app to the cloud. For now, keep the link to this page handy!
 
 At this point, Amplify should have generated several directories and configuration files in your project for you. Let’s take a look at the generated GraphQL schema.

@@ -1,10 +1,10 @@
 <BlockSwitcher>
-<Block name="Expo">
+<Block name="Expo CLI">
 
 Install the necessary dependencies by running the following command:
 
 ```sh
-npm install aws-amplify aws-amplify-react-native amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage @react-native-picker/picker
+npm install aws-amplify amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage
 ```
 
 </Block>
@@ -13,7 +13,7 @@ npm install aws-amplify aws-amplify-react-native amazon-cognito-identity-js @rea
 Install the necessary dependencies by running the following command:
 
 ```sh
-npm install aws-amplify aws-amplify-react-native amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage @react-native-picker/picker
+npm install aws-amplify amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage 
 ```
 
 You will also need to install the pod dependencies for iOS:

@@ -4,10 +4,16 @@ In this section you’ll integrate Amplify DataStore with your app, and learn to
 First, we will create some files and place the boilerplate UI code in it. 
 
 #### App.js
-First, replace the contents of your **App.js** file with the following UI boilerplate code. Here, we are importing our Home component. You have already configured Amplify using `Amplify.configure` in __App.js__ (Expo) or __index.js__ (React Native CLI). So, we don't need to configure Amplify in **App.js** for React Native CLI. 
+First, replace the contents of your **App.js** file with the following UI boilerplate code. Here, we are importing our Home component. 
+
+<Callout>
+
+NOTE: You have already configured Amplify using `Amplify.configure` in __index.js__ for React Native CLI. So, we don't need to configure Amplify in **App.js**.
+
+</Callout>
 
 <BlockSwitcher>
-<Block name="Expo">
+<Block name="Expo CLI">
 
 ```jsx
 import React from 'react';
@@ -71,7 +77,7 @@ Next, we will create a Home component for our app which will implement most of t
 3. **TodoList**: Used for displaying the list of Todos.
 4. **Home**: Default component that wraps all the above component and a Button for adding a new Todo item.
 
-Copy the below boilerplate UI code into the newly create file.
+Copy the below boilerplate UI code into the **Home.js** file.
 
 ```jsx
 import React, { useState, useEffect } from 'react';
@@ -305,10 +311,15 @@ export default Home;
 Go ahead and run your code now and you should see an app with empty todolist and a floating action button but not much else.
 
 <BlockSwitcher>
-<Block name="Expo">
+<Block name="Expo CLI">
 
 ```bash
-expo start
+npx expo start
+
+› Press a │ open Android
+› Press i │ open iOS simulator
+› Press w │ open web
+
 ```
 
 </Block>
@@ -332,9 +343,9 @@ Let’s next manipulate the data and add more functionality to our app.
 ## Manipulating data
 
 ### Creating a Todo
-The *Add Todo* button opens up a Modal to add todos. But, right now, the form does nothing when the *Save* button is pressed. Let’s fix that by having it save a **Todo** to DataStore.
+The *Add Todo* floating action button opens up a Modal to add todos. But, right now, the form does nothing when the *Save* button is pressed. Let’s fix that by having it save a **Todo** to DataStore.
 
-Update the `addTodo()` function in the **AddTodoModal** component.
+Open the **Home.js** file and update the `addTodo()` function in the **AddTodoModal** component.
 
 ```jsx
   async function addTodo() {
@@ -347,13 +358,19 @@ Update the `addTodo()` function in the **AddTodoModal** component.
 
 If you try to add todos using the form now, it should successfully close the form when pressing the *Save* button. But our Todo list is still empty even if you restart the app! After initializing our todos as an empty list, we aren't currently updating it again. We will remedy that in the next step.
 
+<Callout>
+
+You will see a console error when you run your app "Datastore - Data won't synchronize", this is expected and will be fixed in a future step once you connect your app to the cloud.
+
+</Callout>
+
 ### Querying for Todos and Observing Updates in Real-Time
 
 Now that we have a way to add Todo items, we need a way to list them out. We also want to observe updates to those items as they are added, updated, or removed.
 
 This can be achieved with `DataStore.observeQuery()`. `observeQuery()` will return a Stream of query snapshots. Each snapshot will contain the current list of items, as well as boolean value to indicate if DataStore's sync process has completed. You can find more info about `observeQuery()` [here](/lib/datastore/real-time/#observe-query-results-in-real-time).
 
-We will use the `useEffect()` hook of **TodoList** component to list the todo items. `useEffect()` can be used to perform side effects in function components. Add the below `useEffect()` in the **TodoList** component right after state initialization. You can find more about useEffect hook [here](https://reactjs.org/docs/hooks-effect.html).
+We will use the `useEffect()` hook of **TodoList** component to list the todo items. `useEffect()` can be used to perform side effects in function components. Add the below `useEffect()` in the **TodoList** component right after state initialization. You can find more about the useEffect hook [here](https://reactjs.org/docs/hooks-effect.html).
 
 ```jsx
   useEffect(() => {

@@ -1,6 +1,6 @@
-- Initialize a new <a href="https://facebook.github.io/react-native/docs/getting-started" target="_blank">React Native application</a>. There are two ways to do this:
+- Initialize a new React Native application. There are two ways to do this:
 
   1. Expo CLI - Easier for new React Native developers
   2. React Native CLI - If you are already familiar with mobile development, enables you to build native code into your project.
 
-This tutorial will cover both, so use what's best for you.
+This tutorial will cover both, so use what's best for you.
@@ -1,20 +1,39 @@
 To get started, initialize a new React Native project.
 
 <BlockSwitcher>
-<Block name="Expo">
+<Block name="Expo CLI">
 
 ```bash
 npm install -g expo-cli  
-expo init amplified_todo
 
-? Choose a template: blank
+npx create-expo-app amplified_todo
+
+cd my-app
+```
+
+Finally, open __App.js__ and add the following lines of code at the top of the file below the last import:
+
+```javascript
+import { Amplify } from 'aws-amplify'
+import awsconfig from './src/aws-exports'
+
+Amplify.configure(awsconfig)
 ```
 
 </Block>
 <Block name="React Native CLI">
 
 ```bash
-npx react-native init amplified_todo
+npx react-native@latest init amplified_to_do
+```
+
+Finally, open __index.js__ and add the following lines of code at the top of the file below the last import:
+
+```javascript
+import { Amplify } from 'aws-amplify';
+import awsconfig from './src/aws-exports';
+
+Amplify.configure(awsconfig);
 ```
 
 </Block>
@@ -28,13 +47,4 @@ import all0 from "/src/fragments/start/getting-started/reactnative/getting-start
 
 <Fragments fragments={{all: all0}} />
 
-
-Finally, open __App.js__(Expo) or __index.js__(React Native CLI) and add the following lines of code at the top of the file below the last import:
-
-```javascript
-import { Amplify } from 'aws-amplify'
-import awsconfig from './src/aws-exports'
-Amplify.configure(awsconfig)
-```
-
 Now your project is set up and you can begin adding new features.