diff --git a/src/fragments/lib-v1/datastore/js/getting-started/30_platformIntegration.mdx b/src/fragments/lib-v1/datastore/js/getting-started/30_platformIntegration.mdx
index 0c96a187c3c..111fb727b80 100644
--- a/src/fragments/lib-v1/datastore/js/getting-started/30_platformIntegration.mdx
+++ b/src/fragments/lib-v1/datastore/js/getting-started/30_platformIntegration.mdx
@@ -13,7 +13,6 @@ npx create-react-app amplify-datastore --use-npm
cd amplify-datastore
npx amplify-app@latest
```
-
diff --git a/src/fragments/lib/auth/getting_started/js/getting-started-steps-basic-auth.mdx b/src/fragments/lib/auth/getting_started/js/getting-started-steps-basic-auth.mdx
index 7854710ed0c..1df6dbff9fb 100644
--- a/src/fragments/lib/auth/getting_started/js/getting-started-steps-basic-auth.mdx
+++ b/src/fragments/lib/auth/getting_started/js/getting-started-steps-basic-auth.mdx
@@ -22,7 +22,7 @@ You will also need to install the pod dependencies for iOS:
npx pod-install
```
-
+
Install the necessary dependencies by running the following command:
diff --git a/src/fragments/lib/auth/js/react-native-withoauth.mdx b/src/fragments/lib/auth/js/react-native-withoauth.mdx
index 6c7246f361e..6e8fc496491 100644
--- a/src/fragments/lib/auth/js/react-native-withoauth.mdx
+++ b/src/fragments/lib/auth/js/react-native-withoauth.mdx
@@ -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:
-
+
```sh
-yarn add aws-amplify-react-native aws-amplify @react-native-picker/picker
+yarn add aws-amplify
```
```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:
diff --git a/src/fragments/lib/auth/js/social.mdx b/src/fragments/lib/auth/js/social.mdx
index 700ad7a37d2..9a0ed776afb 100644
--- a/src/fragments/lib/auth/js/social.mdx
+++ b/src/fragments/lib/auth/js/social.mdx
@@ -360,7 +360,7 @@ import all2 from "/src/fragments/lib/auth/js/react-native-withoauth.mdx";
-
+
**In-App Browser Setup (optional, but recommended)**
diff --git a/src/fragments/lib/datastore/js/getting-started/30_platformIntegration.mdx b/src/fragments/lib/datastore/js/getting-started/30_platformIntegration.mdx
index 45a6c98fc73..28ffe1134fc 100644
--- a/src/fragments/lib/datastore/js/getting-started/30_platformIntegration.mdx
+++ b/src/fragments/lib/datastore/js/getting-started/30_platformIntegration.mdx
@@ -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
->
-
+>
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
+});
+```
+
+
+
+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
+```
+
\ No newline at end of file
diff --git a/src/fragments/lib/in-app-messaging/js/getting-started.mdx b/src/fragments/lib/in-app-messaging/js/getting-started.mdx
index ce427071105..879931cc565 100644
--- a/src/fragments/lib/in-app-messaging/js/getting-started.mdx
+++ b/src/fragments/lib/in-app-messaging/js/getting-started.mdx
@@ -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.
diff --git a/src/fragments/lib/in-app-messaging/js/prerequisites.mdx b/src/fragments/lib/in-app-messaging/js/prerequisites.mdx
index aac393be1db..2d91bda1d97 100644
--- a/src/fragments/lib/in-app-messaging/js/prerequisites.mdx
+++ b/src/fragments/lib/in-app-messaging/js/prerequisites.mdx
@@ -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.
-
+
> If this is your first time using Expo, complete the [Expo Getting Started guide](https://docs.expo.dev/) before running the below command.
diff --git a/src/fragments/start/getting-started/android/generate-model.mdx b/src/fragments/start/getting-started/android/generate-model.mdx
index 06b82df4c52..0f0a71357f9 100644
--- a/src/fragments/start/getting-started/android/generate-model.mdx
+++ b/src/fragments/start/getting-started/android/generate-model.mdx
@@ -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
diff --git a/src/fragments/start/getting-started/flutter/generate-model.mdx b/src/fragments/start/getting-started/flutter/generate-model.mdx
index f5d0cb0c04b..0cf6beb22a9 100644
--- a/src/fragments/start/getting-started/flutter/generate-model.mdx
+++ b/src/fragments/start/getting-started/flutter/generate-model.mdx
@@ -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
diff --git a/src/fragments/start/getting-started/reactnative/generate-model.mdx b/src/fragments/start/getting-started/reactnative/generate-model.mdx
index 3a357644296..1570d4113db 100644
--- a/src/fragments/start/getting-started/reactnative/generate-model.mdx
+++ b/src/fragments/start/getting-started/reactnative/generate-model.mdx
@@ -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**.
@@ -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
## 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
```
-
+
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.
diff --git a/src/fragments/start/getting-started/reactnative/getting-started-steps-ui.mdx b/src/fragments/start/getting-started/reactnative/getting-started-steps-ui.mdx
index e17ea146984..4ae147c0900 100644
--- a/src/fragments/start/getting-started/reactnative/getting-started-steps-ui.mdx
+++ b/src/fragments/start/getting-started/reactnative/getting-started-steps-ui.mdx
@@ -1,10 +1,10 @@
-
+
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
```
@@ -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:
diff --git a/src/fragments/start/getting-started/reactnative/integrate.mdx b/src/fragments/start/getting-started/reactnative/integrate.mdx
index 71d7b84638c..e1075631609 100644
--- a/src/fragments/start/getting-started/reactnative/integrate.mdx
+++ b/src/fragments/start/getting-started/reactnative/integrate.mdx
@@ -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.
+
+
+
+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**.
+
+
-
+
```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.
-
+
```bash
-expo start
+npx expo start
+
+› Press a │ open Android
+› Press i │ open iOS simulator
+› Press w │ open web
+
```
@@ -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.
+
+
+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.
+
+
+
### 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(() => {
diff --git a/src/fragments/start/getting-started/reactnative/prereq.mdx b/src/fragments/start/getting-started/reactnative/prereq.mdx
index e65bbf61fdf..796196715fa 100644
--- a/src/fragments/start/getting-started/reactnative/prereq.mdx
+++ b/src/fragments/start/getting-started/reactnative/prereq.mdx
@@ -1,6 +1,6 @@
-- Initialize a new React Native application. 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.
\ No newline at end of file
+This tutorial will cover both, so use what's best for you.
diff --git a/src/fragments/start/getting-started/reactnative/setup.mdx b/src/fragments/start/getting-started/reactnative/setup.mdx
index 335b49cadad..7ceaee6a43c 100644
--- a/src/fragments/start/getting-started/reactnative/setup.mdx
+++ b/src/fragments/start/getting-started/reactnative/setup.mdx
@@ -1,20 +1,39 @@
To get started, initialize a new React Native project.
-
+
```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)
```
```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);
```
@@ -28,13 +47,4 @@ import all0 from "/src/fragments/start/getting-started/reactnative/getting-start
-
-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.
diff --git a/src/fragments/ui-legacy/auth/react/tutorial.mdx b/src/fragments/ui-legacy/auth/react/tutorial.mdx
index 5da9ce52104..2c335aa6413 100644
--- a/src/fragments/ui-legacy/auth/react/tutorial.mdx
+++ b/src/fragments/ui-legacy/auth/react/tutorial.mdx
@@ -60,7 +60,7 @@ yarn add aws-amplify aws-amplify-react
If integrating with a React Native app, use:
```
-yarn add aws-amplify aws-amplify-react-native @react-native-picker/picker
+yarn add aws-amplify aws-amplify-react-native
react-native link amazon-cognito-identity-js # DO NOT run this when using Expo or ExpoKit
```
diff --git a/src/fragments/ui-legacy/react-native/overview.mdx b/src/fragments/ui-legacy/react-native/overview.mdx
index e9a6e24cd35..35d5659084a 100644
--- a/src/fragments/ui-legacy/react-native/overview.mdx
+++ b/src/fragments/ui-legacy/react-native/overview.mdx
@@ -1,5 +1,5 @@
## Installation
```
-yarn add aws-amplify aws-amplify-react-native @react-native-picker/picker
-```
\ No newline at end of file
+yarn add aws-amplify
+```