Getting-Started-React-Native.md

Getting Started with the React Native

ABP platform provide basic React Native startup template to develop mobile applications integrated to your ABP based backends.

When you create a new application as described in the getting started document, the solution includes the React Native application in the react-native folder as default.

Configure Your Local IP Address

A React Native application running on an Android emulator or a physical phone can not connect to the backend on localhost. To fix this problem, it is necessary to run the backend application on your local IP address.

{{ if Tiered == "No"}}

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

{{ else if Tiered == "Yes" }}

• Open the appsettings.json in the .IdentityServer folder. Replace the localhost address on the SelfUrl property with your local IP address.
• Open the launchSettings.json in the .IdentityServer/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.

{{ end }}

Run the Server Application

Run the backend application as described in the getting started document.

React Native application does not trust the auto-generated .NET HTTPS certificate. You should use HTTP during the development.

Go to the react-native folder, open a command line terminal, type the yarn command (we suggest to the yarn package manager while npm install will also work):

yarn

• Open the Environment.js in the react-native folder and replace the localhost address on the apiUrl and issuer properties with your local IP address as shown below:

{{ if Tiered == "Yes" }}

Make sure that issuer matches the running address of the .IdentityServer project, apiUrl matches the running address of the .HttpApi.Host or .Web project.

{{else}}

Make sure that issuer and apiUrl matches the running address of the .HttpApi.Host or .Web project.

{{ end }}

Once all node modules are loaded, execute yarn start (or npm start) command:

yarn start

Wait Expo CLI to start. Expo CLI opens the management interface on the http://localhost:19002/ address.

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.

See the Android Studio Emulator, iOS Simulator documents on expo.io.

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.