diff --git a/docs/en/Getting-Started-React-Native.md b/docs/en/Getting-Started-React-Native.md index df8fb355a5..bc3c7ef419 100644 --- a/docs/en/Getting-Started-React-Native.md +++ b/docs/en/Getting-Started-React-Native.md @@ -1,11 +1,11 @@ # Getting Started with the React Native -````json +```json //[doc-params] { - "Tiered": ["No", "Yes"] + "Tiered": ["No", "Yes"] } -```` +``` ABP platform provide basic [React Native](https://reactnative.dev/) startup template to develop mobile applications **integrated to your ABP based backends**. @@ -20,7 +20,6 @@ Please follow the steps below to prepare your development environment for React 3. **[Optional] Install VS Code:** [VS Code](https://code.visualstudio.com/) is a free, open-source IDE which works seamlessly with TypeScript. Although you can use any IDE including Visual Studio or Rider, VS Code will most likely deliver the best developer experience when it comes to React Native projects. 4. **Install an Emulator:** React Native applications need an Android emulator or an iOS simulator to run on your OS. See the [Android Studio Emulator](https://docs.expo.io/workflow/android-simulator/) or [iOS Simulator](https://docs.expo.io/workflow/ios-simulator/) on expo.io documentation to learn how to set up an emulator. - ## How to Start a New React Native Project You have multiple options to initiate a new React Native project that works with ABP: @@ -56,6 +55,7 @@ Please do the following: > When you are using OpenIddict, You should remove 'clientSecret' on Environment.js (if exists) and disable "HTTPS-only" settings. (Openiddict has default since Version 6.0) ### How to disable Https-only in Openiddict. + You should add this code on {{ if Tiered == "No" }}`MyProjectNameHttpApiHostModule`{{ else if Tiered == "Yes" }}`MyProjectNameAuthServerModule`{{ end }}. ```csharp @@ -79,26 +79,27 @@ A React Native application running on an Android emulator or a physical phone ** {{ if Tiered == "No"}} ![React Native host project local IP entry](images/rn-host-local-ip.png) -* Open the `appsettings.json` in the `.HttpApi.Host` folder. Replace the `localhost` address on the `SelfUrl` and `Authority` properties with your local IP address. -* Open the `launchSettings.json` in the `.HttpApi.Host/Properties` folder. Replace the `localhost` address on the `applicationUrl` properties with your local IP address. +- Open the `appsettings.json` file in the `.HttpApi.Host` folder. Replace the `localhost` address on the `SelfUrl` and `Authority` properties with your local IP address. +- Open the `launchSettings.json` file in the `.HttpApi.Host/Properties` folder. Replace the `localhost` address on the `applicationUrl` properties with your local IP address. {{ else if Tiered == "Yes" }} ![React Native tiered project local IP entry](images/rn-tiered-local-ip.png) -* Open the `appsettings.json` in the `.AuthServer` folder. Replace the `localhost` address on the `SelfUrl` property with your local IP address. -* Open the `launchSettings.json` in the `.AuthServer/Properties` folder. Replace the `localhost` address on the `applicationUrl` properties with your local IP address. -* Open the `appsettings.json` in the `.HttpApi.Host` folder. Replace the `localhost` address on the `Authority` property with your local IP address. -* Open the `launchSettings.json` in the `.HttpApi.Host/Properties` folder. Replace the `localhost` address on the `applicationUrl` properties with your local IP address. +- Open the `appsettings.json` file in the `.AuthServer` folder. Replace the `localhost` address on the `SelfUrl` property with your local IP address. +- Open the `launchSettings.json` file in the `.AuthServer/Properties` folder. Replace the `localhost` address on the `applicationUrl` properties with your local IP address. +- Open the `appsettings.json` file in the `.HttpApi.Host` folder. Replace the `localhost` address on the `Authority` property with your local IP address. +- Open the `launchSettings.json` file in the `.HttpApi.Host/Properties` folder. Replace the `localhost` address on the `applicationUrl` properties with your local IP address. {{ end }} Run the backend application as described in the [getting started document](Getting-Started.md). > You should turn off the "Https Restriction" if you're using OpenIddict as a central identity management solution. Because the IOS Simulator doesn't support self-signed certificates and OpenIddict is set to only work with HTTPS by default. + ## How to disable the Https-only settings of OpenIddict - Go to MyProjectNameHttpApiHostModule.cs under the host project. Add put these codes under the `PreConfigureServices` function. +Go to MyProjectNameHttpApiHostModule.cs under the host project. And put these codes under the `PreConfigureServices` function. ```csharp #if DEBUG @@ -109,7 +110,6 @@ Run the backend application as described in the [getting started document](Getti #endif ``` - ## How to Configure & Run the React Native Application 1. Make sure the [database migration is complete](./Getting-Started?UI=NG&DB=EF&Tiered=No#create-the-database) and the [API is up and running](./Getting-Started?UI=NG&DB=EF&Tiered=No#run-the-application). @@ -128,21 +128,20 @@ Run the backend application as described in the [getting started document](Getti {{ end }} -4. Run `yarn start` or `npm start`. Wait Expo CLI to start. Expo CLI opens the management interface on the `http://localhost:19002/` address. +4. Run `yarn start` or `npm start`. Wait for the Expo CLI to print the opitons. > The React Native application was generated with [Expo](https://expo.io/). Expo is a set of tools built around React Native to help you quickly start an app and, while it has many features. -![expo-interface](images/rn-expo-interface.png) +![expo-cli-options](images/rn-options.png) -In the above management interface, you can start the application with an Android emulator, an iOS simulator or a physical phone by the scan the QR code with the [Expo Client](https://expo.io/tools#client). +In the above image, you can start the application with an Android emulator, an iOS simulator or a physical phone by scanning the QR code with the [Expo Client](https://expo.io/tools#client) or choosing the option. ![React Native login screen on iPhone 11](images/rn-login-iphone.png) -Enter **admin** as the username and **1q2w3E*** as the password to login to the application. +Enter **admin** as the username and **1q2w3E\*** as the password to login to the application. The application is up and running. You can continue to develop your application based on this startup template. - ## See Also -* [React Native project structure](./Startup-Templates/Application#react-native) +- [React Native project structure](./Startup-Templates/Application#react-native) diff --git a/docs/en/images/rn-options.png b/docs/en/images/rn-options.png new file mode 100644 index 0000000000..810dda8183 Binary files /dev/null and b/docs/en/images/rn-options.png differ