imhven
/
abp
mirror of https://github.com/abpframework/abp
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '60a54bc9f1'
${ noResults }
abp/docs/en/Getting-Started-React-Nativ...

3.7 KiB
Raw Blame History

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, you have to add -m react-native option to include react-native project in your solution.

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"}} React Native host project local IP entry

  • 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" }}

React Native tiered project local IP entry

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

react native environment local IP

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

expo-interface

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.

React Native login screen on iPhone 11

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.