React native getting started guide updates (aws-amplify#4714)

* small updates to getting started guide

* clarified the inspector panel location

* Expo CLI wording update

* remove react-native-picker and react-native package

* update to RN getting started guide

* updated installation of React Native CLI

* update setup steps

* removed broken closing tags

* fixed tag

* removed open tag without closing tag

* added closing tag

Author: Abdallah Shaban

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
 ```  
-
 </Block>
 <Block name="React Native">
 

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
 ```
 </Block>
-<Block name="Expo">
+<Block name="Expo CLI">
 
 Install the necessary dependencies by running the following command:
 

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:
 
 <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:

src/fragments/lib/auth/js/social.mdx

@@ -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)**
 

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
-></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 [email protected] 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 [email protected] 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>

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.

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.
 
 <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.
 

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 <UUID>

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
 
     ![Add isComplete field](/images/lib/getting-started/flutter/generate-model-admin-ui-isComplete-field.png)
 

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**.
 
     ![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.