From 8b37ba2ce650e1e37ac51039d1aef07760030172 Mon Sep 17 00:00:00 2001 From: Abdallah Shaban Date: Fri, 7 Oct 2022 18:11:41 -0700 Subject: [PATCH 01/11] small updates to getting started guide --- src/fragments/start/getting-started/reactnative/prereq.mdx | 4 ++-- src/fragments/start/getting-started/reactnative/setup.mdx | 6 ++++-- 2 files changed, 6 insertions(+), 4 deletions(-) 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 b2ba213eaeb..d6a8f1bf3ee 100644 --- a/src/fragments/start/getting-started/reactnative/setup.mdx +++ b/src/fragments/start/getting-started/reactnative/setup.mdx @@ -9,9 +9,10 @@ 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 ``` @@ -38,6 +39,7 @@ Finally, open __App.js__(Expo) or __index.js__(React Native CLI) and add the fol ```javascript import { Amplify } from 'aws-amplify' import awsconfig from './src/aws-exports' + Amplify.configure(awsconfig) ``` From 73224a881a82a6228e902ee425bdb23823fed73a Mon Sep 17 00:00:00 2001 From: Abdallah Shaban Date: Fri, 7 Oct 2022 18:24:06 -0700 Subject: [PATCH 02/11] clarified the inspector panel location --- .../start/getting-started/android/generate-model.mdx | 2 +- .../start/getting-started/flutter/generate-model.mdx | 2 +- .../start/getting-started/reactnative/generate-model.mdx | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/fragments/start/getting-started/android/generate-model.mdx b/src/fragments/start/getting-started/android/generate-model.mdx index 06b82df4c52..ff2a55dc4af 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** 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 ![Add isComplete field](/images/lib/getting-started/flutter/generate-model-admin-ui-isComplete-field.png) diff --git a/src/fragments/start/getting-started/reactnative/generate-model.mdx b/src/fragments/start/getting-started/reactnative/generate-model.mdx index 3a357644296..3f615f9f25f 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**. ![Create new schema](/images/lib/getting-started/reactnative/generate-model-admin-ui-create.png) @@ -19,7 +19,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/reactnative/generate-model-admin-ui-isComplete-field.png) From 88fa4c150d995d59ca7c57aa16d9b2370f1bd454 Mon Sep 17 00:00:00 2001 From: Abdallah Shaban Date: Mon, 10 Oct 2022 08:51:12 -0700 Subject: [PATCH 03/11] Expo CLI wording update --- .../js/getting-started-steps-basic-auth.mdx | 2 +- .../lib/auth/js/react-native-withoauth.mdx | 2 +- src/fragments/lib/auth/js/social.mdx | 2 +- .../30_platformIntegration.mdx | 2 +- .../lib/in-app-messaging/js/prerequisites.mdx | 2 +- .../android/generate-model.mdx | 13 ++------ .../reactnative/generate-model.mdx | 19 ++++------- .../reactnative/getting-started-steps-ui.mdx | 2 +- .../getting-started/reactnative/integrate.mdx | 33 ++++++++++++++----- .../getting-started/reactnative/setup.mdx | 2 +- 10 files changed, 41 insertions(+), 38 deletions(-) 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..3c8d00d2309 100644 --- a/src/fragments/lib/auth/js/react-native-withoauth.mdx +++ b/src/fragments/lib/auth/js/react-native-withoauth.mdx @@ -21,7 +21,7 @@ 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 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 63da6f7cd88..42d55b39e5c 100644 --- a/src/fragments/lib/datastore/js/getting-started/30_platformIntegration.mdx +++ b/src/fragments/lib/datastore/js/getting-started/30_platformIntegration.mdx @@ -58,7 +58,7 @@ DataStore.configure({ ``` - + Start with the [Expo](https://docs.expo.dev/): diff --git a/src/fragments/lib/in-app-messaging/js/prerequisites.mdx b/src/fragments/lib/in-app-messaging/js/prerequisites.mdx index 564e3024671..da9771ea0c9 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 ff2a55dc4af..0f0a71357f9 100644 --- a/src/fragments/start/getting-started/android/generate-model.mdx +++ b/src/fragments/start/getting-started/android/generate-model.mdx @@ -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/reactnative/generate-model.mdx b/src/fragments/start/getting-started/reactnative/generate-model.mdx index 3f615f9f25f..1570d4113db 100644 --- a/src/fragments/start/getting-started/reactnative/generate-model.mdx +++ b/src/fragments/start/getting-started/reactnative/generate-model.mdx @@ -26,23 +26,16 @@ 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: **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..9a48f116d52 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,5 +1,5 @@ - + Install the necessary dependencies by running the following command: 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/setup.mdx b/src/fragments/start/getting-started/reactnative/setup.mdx index d6a8f1bf3ee..c20413cf65b 100644 --- a/src/fragments/start/getting-started/reactnative/setup.mdx +++ b/src/fragments/start/getting-started/reactnative/setup.mdx @@ -5,7 +5,7 @@ To start off, you'll need a React Native project. If you have an existing projec To get started, initialize a new React Native project. - + ```bash npm install -g expo-cli From a9fa30234d07bafaca4ade51933f79fa3744cbe6 Mon Sep 17 00:00:00 2001 From: Abdallah Shaban Date: Mon, 10 Oct 2022 21:49:11 -0700 Subject: [PATCH 04/11] remove react-native-picker and react-native package --- src/fragments/lib/auth/js/react-native-withoauth.mdx | 4 ++-- src/fragments/lib/in-app-messaging/js/getting-started.mdx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/fragments/lib/auth/js/react-native-withoauth.mdx b/src/fragments/lib/auth/js/react-native-withoauth.mdx index 3c8d00d2309..6e8fc496491 100644 --- a/src/fragments/lib/auth/js/react-native-withoauth.mdx +++ b/src/fragments/lib/auth/js/react-native-withoauth.mdx @@ -24,14 +24,14 @@ To use `withOAuth` in your React Native application first install the appropriat ```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/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. From c8e9c75bef46b99cebc3d4ced7c1a7fb32dda894 Mon Sep 17 00:00:00 2001 From: Abdallah Shaban Date: Mon, 10 Oct 2022 21:49:24 -0700 Subject: [PATCH 05/11] update to RN getting started guide --- .../getting-started/reactnative/getting-started-steps-ui.mdx | 4 ++-- src/fragments/ui-legacy/auth/react/tutorial.mdx | 2 +- src/fragments/ui-legacy/react-native/overview.mdx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) 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 9a48f116d52..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 @@ -4,7 +4,7 @@ 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/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 +``` From 1c38c43dd7bc21bed2e0df7e492fc8cc4e481a5d Mon Sep 17 00:00:00 2001 From: Abdallah Shaban Date: Fri, 14 Oct 2022 10:09:48 -0700 Subject: [PATCH 06/11] updated installation of React Native CLI --- src/fragments/start/getting-started/reactnative/setup.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/fragments/start/getting-started/reactnative/setup.mdx b/src/fragments/start/getting-started/reactnative/setup.mdx index c20413cf65b..6530509b488 100644 --- a/src/fragments/start/getting-started/reactnative/setup.mdx +++ b/src/fragments/start/getting-started/reactnative/setup.mdx @@ -19,7 +19,7 @@ cd my-app ```bash -npx react-native@0.68.2 init amplified_todo --version 0.68.2 +npx react-native@latest init amplified_to_do ``` From b31a8e1cacb93b8c14e6fc2b6b4d4c0c89683127 Mon Sep 17 00:00:00 2001 From: Abdallah Shaban Date: Fri, 14 Oct 2022 13:04:44 -0700 Subject: [PATCH 07/11] update setup steps --- .../getting-started/reactnative/setup.mdx | 28 ++++++++++++------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/src/fragments/start/getting-started/reactnative/setup.mdx b/src/fragments/start/getting-started/reactnative/setup.mdx index 6530509b488..7bfad3b024b 100644 --- a/src/fragments/start/getting-started/reactnative/setup.mdx +++ b/src/fragments/start/getting-started/reactnative/setup.mdx @@ -15,6 +15,15 @@ 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) +``` + @@ -22,6 +31,15 @@ cd my-app 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); +``` + @@ -33,14 +51,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. From 0c2b5ac9fcd82d83bffb463a330bfc74b3dffc21 Mon Sep 17 00:00:00 2001 From: Abdallah Shaban Date: Thu, 20 Oct 2022 14:44:33 -0700 Subject: [PATCH 08/11] removed broken closing tags --- .../datastore/js/getting-started/30_platformIntegration.mdx | 1 - .../lib/datastore/js/getting-started/30_platformIntegration.mdx | 1 - 2 files changed, 2 deletions(-) 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..9b52d65f904 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 @@ -14,7 +14,6 @@ cd amplify-datastore npx amplify-app@latest ``` - Start with the [React Native CLI](https://reactnative.dev/docs/getting-started): 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 bdff08d7ca8..b5e46eb6acf 100644 --- a/src/fragments/lib/datastore/js/getting-started/30_platformIntegration.mdx +++ b/src/fragments/lib/datastore/js/getting-started/30_platformIntegration.mdx @@ -16,7 +16,6 @@ cd amplify-datastore npx amplify-app@latest ``` - Start with the [React Native CLI](https://reactnative.dev/docs/getting-started): From afffd11b337de33a8c33d889fe9f1d391aae983f Mon Sep 17 00:00:00 2001 From: Abdallah Shaban Date: Thu, 20 Oct 2022 14:45:33 -0700 Subject: [PATCH 09/11] fixed tag --- .../datastore/js/getting-started/30_platformIntegration.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 9b52d65f904..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,7 @@ 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): From 969cfb739c00fcd6a96564f43be3c20d16b2903d Mon Sep 17 00:00:00 2001 From: Abdallah Shaban Date: Thu, 20 Oct 2022 14:46:58 -0700 Subject: [PATCH 10/11] removed open tag without closing tag --- .../lib/datastore/js/getting-started/30_platformIntegration.mdx | 2 -- 1 file changed, 2 deletions(-) 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 b5e46eb6acf..0b978231bd0 100644 --- a/src/fragments/lib/datastore/js/getting-started/30_platformIntegration.mdx +++ b/src/fragments/lib/datastore/js/getting-started/30_platformIntegration.mdx @@ -16,8 +16,6 @@ cd amplify-datastore npx amplify-app@latest ``` - - Start with the [React Native CLI](https://reactnative.dev/docs/getting-started): ```bash From 2774a9a25fef17ffbb6157704d090a67edc0d354 Mon Sep 17 00:00:00 2001 From: Abdallah Shaban Date: Thu, 20 Oct 2022 14:59:14 -0700 Subject: [PATCH 11/11] added closing tag --- .../js/getting-started/30_platformIntegration.mdx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) 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 0b978231bd0..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): @@ -14,7 +13,7 @@ Start with [Create React app](https://create-react-app.dev): 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): @@ -41,7 +40,7 @@ To enable SQLite with DataStore for enhanced local database performance, follow 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 +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 ``` @@ -56,7 +55,6 @@ DataStore.configure({ }); ``` - Start with the [Expo](https://docs.expo.dev/): @@ -78,5 +76,6 @@ To enable SQLite with DataStore for enhanced local database performance, follow 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 +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