Getting Started with the React Native

ABP Commercial platform provides a basic React Native 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 cannot connect to the backend on localhost. To fix this problem, it is necessary to run backend on your local IP address.

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.

#if DEBUG
 PreConfigure<OpenIddictServerBuilder>(options => {
 options.UseAspNetCore()
 .DisableTransportSecurityRequirement();
 });
#endif

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 the HTTP during 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 in most cases):

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

Make sure that issuer and apiUrl matches the running address of the .HttpApi.Host or .Web or .Blazor(BlazorServer UI) project.

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:

React Native dashboard screen on iPhone 11

The application is up and running. You can continue to develop your application based on this startup template.

Was this page helpful?

Please make a selection.

To help us improve, please share your reason for the negative feedback in the field below.

Please enter a note.

Thank you for your valuable feedback!

Please note that although we cannot respond to feedback, our team will use your comments to improve the experience.

In this document
Community Talks

Building Modular Monolith Applications Using .NET and ABP Framework

17 Oct, 17:00
Online
Watch the Event
Mastering ABP Framework Book
Mastering ABP Framework

This book will help you gain a complete understanding of the framework and modern web application development techniques.

Learn More