Browse Source

Merge pull request #23757 from abpframework/issue/updateReactNativeDocs

React Native - Update documentation with the latest implementations
before-net10
oykuermann 5 months ago
committed by GitHub
parent
commit
25c8a4ee5f
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
  1. 262
      docs/en/framework/ui/react-native/index.md
  2. 127
      docs/en/framework/ui/react-native/setting-up-android-emulator.md
  3. BIN
      docs/en/get-started/images/abp-studio-mobile-sample.gif
  4. 5
      docs/en/get-started/layered-web-application.md
  5. BIN
      docs/en/images/author-input-in-book-form.png
  6. BIN
      docs/en/images/author-list-with-options.png
  7. BIN
      docs/en/images/author-list.png
  8. BIN
      docs/en/images/authors-in-book-form.png
  9. BIN
      docs/en/images/book-list-with-author.png
  10. BIN
      docs/en/images/book-list-with-options.png
  11. BIN
      docs/en/images/book-list.png
  12. BIN
      docs/en/images/book-store-menu-item.png
  13. BIN
      docs/en/images/books-menu-item.png
  14. BIN
      docs/en/images/create-author.png
  15. BIN
      docs/en/images/create-book-button-visibility.png
  16. BIN
      docs/en/images/create-book-icon.png
  17. BIN
      docs/en/images/create-book.png
  18. BIN
      docs/en/images/delete-author-alert.png
  19. BIN
      docs/en/images/delete-book-alert.png
  20. BIN
      docs/en/images/delete-book.png
  21. BIN
      docs/en/images/react-native-environment-local-ip.png
  22. BIN
      docs/en/images/react-native-introduction.gif
  23. BIN
      docs/en/images/react-native-microservice-be-config.png
  24. BIN
      docs/en/images/react-native-monolith-be-config.png
  25. BIN
      docs/en/images/react-native-monolith-environment-local-ip.png
  26. BIN
      docs/en/images/react-native-option.png
  27. BIN
      docs/en/images/react-native-store-folder.png
  28. BIN
      docs/en/images/react-native-tiered-be-config.png
  29. BIN
      docs/en/images/react-native-tiered-environment-local-ip.png
  30. BIN
      docs/en/images/rn-login-android-studio.png
  31. BIN
      docs/en/images/rn-login-iphone.png
  32. BIN
      docs/en/images/update-author.png
  33. BIN
      docs/en/images/update-book.png
  34. BIN
      docs/en/images/update-delete-book-button-visibility.png
  35. 10
      docs/en/solution-templates/layered-web-application/mobile-applications.md
  36. 22
      docs/en/solution-templates/microservice/mobile-applications.md
  37. 8
      docs/en/suite/solution-structure.md
  38. 963
      docs/en/tutorials/mobile/react-native/index.md

262
docs/en/framework/ui/react-native/index.md

@ -1,7 +1,7 @@
````json
//[doc-params]
{
"Tiered": ["No", "Yes"]
"Architecture": ["Monolith", "Tiered", "Microservice"]
}
````
@ -20,15 +20,23 @@ Please follow the steps below to prepare your development environment for React
1. **Install Node.js:** Please visit [Node.js downloads page](https://nodejs.org/en/download/) and download proper Node.js v20.11+ installer for your OS. An alternative is to install [NVM](https://github.com/nvm-sh/nvm) and use it to have multiple versions of Node.js in your operating system.
2. **[Optional] Install Yarn:** You may install Yarn v1 (not v2) following the instructions on [the installation page](https://classic.yarnpkg.com/en/docs/install). Yarn v1 delivers an arguably better developer experience compared to npm v6 and below. You may skip this step and work with npm, which is built-in in Node.js, instead.
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.
4. **Install an Emulator/Simulator:** React Native applications need an Android emulator or an iOS simulator to run on your OS. If you do not have Android Studio installed and configured on your system, we recommend [setting up android emulator without android studio](setting-up-android-emulator.md).
If you prefer the other way, you can check the [Android Studio Emulator](https://docs.expo.dev/workflow/android-studio-emulator/) or [iOS Simulator](https://docs.expo.dev/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:
### 1. Using ABP CLI
### 1. Using ABP Studio
ABP Studio application is the most convenient and flexible way to initiate a React Native application based on ABP framework. You can follow the [tool documentation](../../../studio) and select the option below:
![React Native option](../../../images/react-native-option.png)
### 2. Using ABP CLI
ABP CLI is probably the most convenient and flexible way to initiate an ABP solution with a React Native application. Simply [install the ABP CLI](../../../cli) and run the following command in your terminal:
ABP CLI is another way of creating an ABP solution with a React Native application. Simply [install the ABP CLI](../../../cli) and run the following command in your terminal:
```shell
abp new MyCompanyName.MyProjectName -csf -u <angular or mvc> -m react-native
@ -38,33 +46,209 @@ abp new MyCompanyName.MyProjectName -csf -u <angular or mvc> -m react-native
This command will prepare a solution with an **Angular** or an **MVC** (depends on your choice), a **.NET Core**, and a **React Native** project in it.
### 2. Generating a CLI Command from Get Started Page
You can generate a CLI command on the [get started page of the abp.io website](https://abp.io/get-started). Then, use the command on your terminal to create a new [Startup Template](../../../solution-templates).
## How to Configure & Run the Backend
> React Native application does not trust the auto-generated .NET HTTPS certificate. You should use **HTTP** during the development.
> 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)
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](../../../images/rn-host-local-ip.png)
- 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` 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.
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 using the `Kestrel` configuration.
{{ if Architecture == "Monolith" }}
![React Native monolith host project configuration](../../../images/react-native-monolith-be-config.png)
- Open the `appsettings.json` file in the `.DbMigrator` folder. Replace the `localhost` address on the `RootUrl` property with your local IP address. Then, run the database migrator.
- Open the `appsettings.Development.json` file in the `.HttpApi.Host` folder. Add this configuration to accept global requests just to test the react native application on the development environment.
```json
{
"Kestrel": {
"Endpoints": {
"Http": {
"Url": "http://0.0.0.0:44323" //replace with your host port
}
}
}
}
```
{{ else if Architecture == "Tiered" }}
![React Native tiered project configuration](../../../images/react-native-tiered-be-config.png)
- Open the `appsettings.json` file in the `.DbMigrator` folder. Replace the `localhost` address on the `RootUrl` property with your local IP address. Then, run the database migrator.
- Open the `appsettings.Development.json` file in the `.AuthServer` folder. Add this configuration to accept global requests just to test the react native application on the development environment.
```json
{
"Kestrel": {
"Endpoints": {
"Http": {
"Url": "http://0.0.0.0:44337"
}
}
}
}
```
- Open the `appsettings.Development.json` file in the `.HttpApi.Host` folder. Add this configuration to accept global requests again. In addition, you will need to introduce the authentication server as mentioned above.
```json
{
"Kestrel": {
"Endpoints": {
"Http": {
"Url": "http://0.0.0.0:44389" //replace with your host port
}
}
},
"AuthServer": {
"Authority": "http://192.168.1.37:44337/", //replace with your IP and authentication port
"MetaAddress": "http://192.168.1.37:44337/",
"RequireHttpsMetadata": false,
"Audience": "MyTieredProject" //replace with your application name
}
}
```
{{ else if Architecture == "Microservice" }}
![React Native microservice project configuration](../../../images/react-native-microservice-be-config.png)
- Open the `appsettings.Development.json` file in the `.AuthServer` folder. Add this configuration to accept global requests just to test the react native application on the development environment.
```json
{
"App": {
"EnablePII": true
},
"Kestrel": {
"Endpoints": {
"Http": {
"Url": "http://0.0.0.0:44319"
}
}
}
}
```
- Open the `appsettings.Development.json` file in the `.AdministrationService` folder. Add this configuration to accept global requests just to test the react native application on the development environment. You should also provide the authentication server configuration. In addition, you need to apply the same process for all the services you would use in the react native application.
```json
{
"App": {
"EnablePII": true
},
"Kestrel": {
"Endpoints": {
"Http": {
"Url": "http://0.0.0.0:44357"
}
}
},
"AuthServer": {
"Authority": "http://192.168.1.36:44319/",
"MetaAddress": "http://192.168.1.36:44319/",
"RequireHttpsMetadata": false,
"Audience": "AdministrationService"
}
}
```
- Update the `appsettings.json` file in the `.IdentityService` folder. Replace the `localhost` configuration with your local IP address for the react native application
```json
{
//...
"OpenIddict": {
"Applications": {
//...
"ReactNative": {
"RootUrl": "exp://192.168.1.36:19000"
},
"MobileGateway": {
"RootUrl": "http://192.168.1.36:44347/"
},
//...
},
//...
}
}
```
- Lastly, update the mobile gateway configurations as following:
```json
//gateways/mobile/MyMicroserviceProject.MobileGateway/Properties/launchSettings.json
{
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://192.168.1.36:44347" //update with your IP address
}
},
"profiles": {
//...
"MyMicroserviceProject.MobileGateway": {
"commandName": "Project",
"dotnetRunMessages": "true",
"launchBrowser": true,
"applicationUrl": "http://192.168.1.36:44347",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
}
}
}
```
```json
//gateways/mobile/MyMicroserviceProject.MobileGateway/appsettings.json
{
//Update clusters with your IP address
//...
"ReverseProxy": {
//...
"Clusters": {
"AuthServer": {
"Destinations": {
"AuthServer": {
"Address": "http://192.168.1.36:44319/"
}
}
},
"Administration": {
"Destinations": {
"Administration": {
"Address": "http://192.168.1.36:44357/"
}
}
},
"Saas": {
"Destinations": {
"Saas": {
"Address": "http://192.168.1.36:44330/"
}
}
},
"Identity": {
"Destinations": {
"Identity": {
"Address": "http://192.168.1.36:44397/"
}
}
},
"Language": {
"Destinations": {
"Identity": {
"Address": "http://192.168.1.36:44310/"
}
}
}
}
}
}
```
{{ end }}
Run the backend application as described in the [getting started document](../../../get-started).
@ -73,7 +257,7 @@ Run the backend application as described in the [getting started document](../..
## How to disable the Https-only settings of OpenIddict
Open the {{ if Tiered == "No" }}`MyProjectNameHttpApiHostModule`{{ else if Tiered == "Yes" }}`MyProjectNameAuthServerModule`{{ end }} project and copy-paste the below code-block to the `PreConfigureServices` method:
Open the {{ if Architecture == "Monolith" }}`MyProjectNameHttpApiHostModule`{{ if Architecture == "Tiered" }}`MyProjectNameAuthServerModule`{{ end }} project and copy-paste the below code-block to the `PreConfigureServices` method:
```csharp
#if DEBUG
@ -89,21 +273,27 @@ Open the {{ if Tiered == "No" }}`MyProjectNameHttpApiHostModule`{{ else if Tiere
1. Make sure the [database migration is complete](../../../get-started?UI=NG&DB=EF&Tiered=No#create-the-database) and the [API is up and running](../../../get-started?UI=NG&DB=EF&Tiered=No#run-the-application).
2. Open `react-native` folder and run `yarn` or `npm install` if you have not already.
3. 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:
3. Open the `Environment.ts` 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 Architecture == "Monolith" }}
![react native environment local IP](../../../images/rn-environment-local-ip.png)
![react native monolith environment local IP](../../../images/react-native-monolith-environment-local-ip.png)
{{ if Tiered == "Yes" }}
{{ else if Architecture == "Tiered" }}
![react native tiered environment local IP](../../../images/react-native-tiered-environment-local-ip.png)
> Make sure that `issuer` matches the running address of the `.AuthServer` project, `apiUrl` matches the running address of the `.HttpApi.Host` or `.Web` project.
{{else}}
{{ else }}
![react native microservice environment local IP](../../../images/react-native-microservice-environment-local-ip.png)
> Make sure that `issuer` and `apiUrl` matches the running address of the `.HttpApi.Host` or `.Web` project.
> Make sure that `issuer` matches the running address of the `.AuthServer` project, `apiUrl` matches the running address of the `.AuthServer` project.
{{ end }}
4. Run `yarn start` or `npm start`. Wait for the Expo CLI to print the opitons.
1. 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.
@ -113,14 +303,14 @@ In the above image, you can start the application with an Android emulator, an i
### Expo
![React Native login screen on iPhone 11](../../../images/rn-login-iphone.png)
![React Native login screen on iPhone 16](../../../images/rn-login-iphone.png)
### Android Studio
1. Start the emulator in **Android Studio** before running the `yarn start` or `npm start` command.
2. Press **a** to open in Android Studio.
![React Native login screen on iPhone 11](../../../images/rn-login-android-studio.png)
![React Native login screen on Android Device](../../../images/rn-login-android-studio.png)
Enter **admin** as the username and **1q2w3E\*** as the password to login to the application.

127
docs/en/framework/ui/react-native/setting-up-android-emulator.md

@ -0,0 +1,127 @@
# Setting Up Android Emulator Without Android Studio (Windows, macOS, Linux)
This guide explains how to install and run an Android emulator **without Android Studio**, using only **Command Line Tools**.
---
## 1. Download Required Tools
Go to: [https://developer.android.com/studio#command-tools](https://developer.android.com/studio#command-tools)
Download the "Command line tools only" package for your OS:
- **Windows:** `commandlinetools-win-*.zip`
- **macOS:** `commandlinetools-mac-*.zip`
- **Linux:** `commandlinetools-linux-*.zip`
---
## 2. Create the Required Directory Structure
### Windows:
```
C:\Android\
└── cmdline-tools\
└── latest\
└── [extract all files from the zip here]
```
### macOS / Linux:
```
~/Android/
└── cmdline-tools/
└── latest/
└── [extract all files from the zip here]
```
> You need to create the `latest` folder manually.
---
## 3. Set Environment Variables
### Windows (temporary for CMD session):
```cmd
set PATH=C:\Android\cmdline-tools\latest\bin;C:\Android\platform-tools;C:\Android\emulator;%PATH%
```
### macOS / Linux:
Add the following to your `.bashrc`, `.zshrc`, or `.bash_profile` file:
```bash
export ANDROID_HOME=$HOME/Android
export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator
```
> Apply the changes:
```bash
source ~/.zshrc # or ~/.bashrc if you're using bash
```
---
## 4. Install SDK Components
Install platform tools, emulator, and a system image:
```bash
sdkmanager --sdk_root=$ANDROID_HOME "platform-tools" "platforms;android-34" "system-images;android-34;google_apis;x86_64" "emulator"
```
> On Windows, replace `$ANDROID_HOME` with `--sdk_root=C:\Android`.
---
## 5. Create an AVD (Android Virtual Device)
### List available devices:
```bash
avdmanager list devices
```
### Create your AVD:
```bash
avdmanager create avd -n myEmu -k "system-images;android-34;google_apis;x86_64" --device "pixel"
```
---
## 6. Start the Emulator
```bash
emulator -avd myEmu
```
The emulator window should open
---
## Extra Tools and Commands
### List connected devices with ADB:
```bash
adb devices
```
### Install an APK:
```bash
adb install myApp.apk
```
---
## Troubleshooting
| Problem | Explanation |
|--------|-------------|
| `sdkmanager not found` | Make sure `PATH` includes the `latest/bin` directory |
| `x86_64 system image not found` | Make sure you've downloaded it using `sdkmanager` |
| `emulator not found` | Add the `emulator` directory to `PATH` |
| `setx` truncates path (Windows) | Use GUI to update environment variables manually |
---
## Summary
You can now run an Android emulator without installing Android Studio, entirely through the command line. This emulator can be used for React Native or any mobile development framework.

BIN
docs/en/get-started/images/abp-studio-mobile-sample.gif

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 MiB

After

Width:  |  Height:  |  Size: 5.4 MiB

5
docs/en/get-started/layered-web-application.md

@ -242,6 +242,8 @@ You can use `admin` as username and `1q2w3E*` as default password to login to th
> Note: If you haven't selected a mobile framework, you can skip this step.
Before starting the mobile application, ensure that you have configured it for [react-native](../framework/ui/react-native) or [MAUI](../framework/ui/maui).
You can start the following application(s):
{{ if Tiered == "Yes" }}
@ -255,8 +257,7 @@ You can start the following application(s):
{{ else }}
- `Acme.BookStore.Web`
{{ end }}
Before starting the mobile application, ensure that you configure it for [react-native](../framework/ui/react-native) or [MAUI](../framework/ui/maui).
- `react-native` or `Acme.Bookstore.Maui`
![mobile-sample](images/abp-studio-mobile-sample.gif)

BIN
docs/en/images/author-input-in-book-form.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 68 KiB

BIN
docs/en/images/author-list-with-options.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 67 KiB

After

Width:  |  Height:  |  Size: 83 KiB

BIN
docs/en/images/author-list.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 76 KiB

BIN
docs/en/images/authors-in-book-form.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 72 KiB

BIN
docs/en/images/book-list-with-author.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 77 KiB

BIN
docs/en/images/book-list-with-options.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 79 KiB

BIN
docs/en/images/book-list.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 74 KiB

BIN
docs/en/images/book-store-menu-item.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 78 KiB

BIN
docs/en/images/books-menu-item.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
docs/en/images/create-author.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 63 KiB

BIN
docs/en/images/create-book-button-visibility.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
docs/en/images/create-book-icon.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 70 KiB

BIN
docs/en/images/create-book.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 70 KiB

BIN
docs/en/images/delete-author-alert.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 79 KiB

After

Width:  |  Height:  |  Size: 87 KiB

BIN
docs/en/images/delete-book-alert.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 67 KiB

After

Width:  |  Height:  |  Size: 76 KiB

BIN
docs/en/images/delete-book.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 84 KiB

BIN
docs/en/images/react-native-environment-local-ip.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 115 KiB

BIN
docs/en/images/react-native-introduction.gif

Binary file not shown.

Before

Width:  |  Height:  |  Size: 948 KiB

After

Width:  |  Height:  |  Size: 4.9 MiB

BIN
docs/en/images/react-native-microservice-be-config.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 177 KiB

BIN
docs/en/images/react-native-monolith-be-config.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 189 KiB

BIN
docs/en/images/react-native-monolith-environment-local-ip.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

BIN
docs/en/images/react-native-option.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

BIN
docs/en/images/react-native-store-folder.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 17 KiB

BIN
docs/en/images/react-native-tiered-be-config.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 KiB

BIN
docs/en/images/react-native-tiered-environment-local-ip.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

BIN
docs/en/images/rn-login-android-studio.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 54 KiB

BIN
docs/en/images/rn-login-iphone.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 682 KiB

BIN
docs/en/images/update-author.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 664 KiB

BIN
docs/en/images/update-book.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 669 KiB

BIN
docs/en/images/update-delete-book-button-visibility.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 98 KiB

10
docs/en/solution-templates/layered-web-application/mobile-applications.md

@ -94,22 +94,22 @@ You can follow [Mobile Application Development Tutorial - MAUI](../../tutorials/
This is the mobile application that is built based on Facebook's [React Native framework](https://reactnative.dev/) and [Expo](https://expo.dev/). It will be in the solution only if you've selected React Native as your mobile application option.
#### Project Structure
- **Environment.js**: file using for provide application level variables like `apiUrl`, `oAuthConfig` and etc.
- **Environment.ts**: file using for provide application level variables like `apiUrl`, `oAuthConfig` and etc.
- **api**: The `api` folder contains HTTP request files that simplify API management in the React Native starter template
- `API.js:` exports **axiosInstance**. It provides axios instance filled api url
- `API.ts:` exports **axiosInstance**. It provides axios instance filled api url
- **components**: In the `components` folder you can reach built in react native components that you can use in your app. These components **facilitates** your list, select and etc. operations
- **contexts**: `contexts` folder contains [react context](https://react.dev/reference/react/createContext). You can expots your contexts in this folder. `Localization context provided in here`
- **navigators**: folder contains [react-native stacks](https://reactnavigation.org/docs/stack-navigator/). After create new *FeatureName*Navigator we need to provide in `DrawerNavigator.js` file as `Drawer.Screen`
- **navigators**: folder contains [react-native stacks](https://reactnavigation.org/docs/stack-navigator/). After create new *FeatureName*Navigator we need to provide in `DrawerNavigator.tsx` file as `Drawer.Screen`
- **screens**: is the content of navigated page. We'll pass as component property to [Stack.Screen](https://reactnavigation.org/docs/native-stack-navigator/)
- **store**: folder manages state-management operations. We will define `actions`, `reducers`, `sagas` and `selectors` here.
- **store**: folder manages state-management operations. We will define `actions`, `listeners`, `reducers`, and `selectors` here.
- **styles**: folder contains app styles. `system-style.js` comes built in template we can also add new styles.
- **styles**: folder contains app styles. `system-style.ts` comes built in template we can also add new styles.
- **utils**: folder contains helper functions that we can use in application

22
docs/en/solution-templates/microservice/mobile-applications.md

@ -139,22 +139,28 @@ You can follow [Mobile Application Development Tutorial - MAUI](../../tutorials/
This is the mobile application that is built based on Facebook's [React Native framework](https://reactnative.dev/) and [Expo](https://expo.dev/). It will be in the solution only if you've selected React Native as your mobile application option.
#### Project Structure
- **Environment.js**: file using for provide application level variables like `apiUrl`, `oAuthConfig` and etc.
- **Environment.ts**: file using for providing application level variables like `apiUrl`, `oAuthConfig` and etc.
- **api**: The `api` folder contains HTTP request files that simplify API management in the React Native starter template
- `API.js:` exports **axiosInstance**. It provides axios instance filled api url
- `API.ts:` exports **axiosInstance**. It provides axios instance filled api url.
- **components**: In the `components` folder you can reach built in react native components that you can use in your app. These components **facilitates** your list, select and etc. operations
- **components**: In the `components` folder, you can reach built in react native components that you can use in your app. These components **facilitates** your list, select and etc. operations.
- **contexts**: `contexts` folder contains [react context](https://react.dev/reference/react/createContext). You can expots your contexts in this folder. `Localization context provided in here`
- **navigators**: folder contains [react-native stacks](https://reactnavigation.org/docs/stack-navigator/). After create new *FeatureName*Navigator we need to provide in `DrawerNavigator.js` file as `Drawer.Screen`
- **hocs**: this folder is added to contain higher order components. The purpose is to wrap components with additional features or properties. It initially has a `PermissionHoc.tsx` that wraps a component to check the permission grant status.
- **screens**: is the content of navigated page. We'll pass as component property to [Stack.Screen](https://reactnavigation.org/docs/native-stack-navigator/)
- **hooks**: covers the react native hooks where you can get a reference from [the official documentation](https://react.dev/reference/react/hooks).
- **store**: folder manages state-management operations. We will define `actions`, `reducers`, `sagas` and `selectors` here.
- **interceptors**: initializes a file called `APIInterceptor.ts` that has a function to manage the http operations in a better way.
- **styles**: folder contains app styles. `system-style.js` comes built in template we can also add new styles.
- **navigators**: folder contains [react-native stacks](https://reactnavigation.org/docs/stack-navigator/). After creating a new *FeatureName*Navigator we need to provide in `DrawerNavigator.ts` file as `Drawer.Screen`
- **screens**: folder has the content of navigated page. We will pass as component property to [Stack.Screen](https://reactnavigation.org/docs/native-stack-navigator/)
- **store**: folder manages state-management operations. We will define `actions`, `listeners`, `reducers`, and `selectors` here.
- **styles**: folder contains app styles. `system-style.ts` comes built in template we can also add new styles.
- **utils**: folder contains helper functions that we can use in application
@ -162,6 +168,6 @@ This is the mobile application that is built based on Facebook's [React Native f
React Native applications can't be run with the solution runner. You need to run them with the React Native CLI. You can check the [React Native documentation](https://reactnative.dev/docs/environment-setup) to learn how to setup the environment for React Native development.
Before running the React Native application, rest of the applications in the solution must be running. Such as AuthServer, MobileGateway and the microservices.
Before running the React Native application, the rest of the applications in the solution must be running. Such as AuthServer, MobileGateway and the microservices.
Then you can run the React Native application by following this documentation: [Getting Started with the React Native](../../framework/ui/react-native/index.md).

8
docs/en/suite/solution-structure.md

@ -318,8 +318,8 @@ React Native application folder structure is like below:
![react-native-folder-structure](../images/react-native-folder-structure.png)
* `App.js` is the bootstrap component of the application.
* `Environment.js` file has the essential configuration of the application. `prod` and `dev` configurations are defined in this file.
* `App.tsx` is the bootstrap component of the application.
* `Environment.ts` file has the essential configuration of the application. `prod` and `dev` configurations are defined in this file.
* [Contexts](https://reactjs.org/docs/context.html) are created in the `src/contexts` folder.
* [Higher order components](https://reactjs.org/docs/higher-order-components.html) are created in the `src/hocs` folder.
* [Custom hooks](https://reactjs.org/docs/hooks-custom.html#extracting-a-custom-hook) are created in the `src/hooks`.
@ -353,12 +353,11 @@ Actions, reducers, sagas, selectors are created in the `src/store` folder. Store
* [**Store**](https://redux.js.org/basics/store) is defined in the `src/store/index.js` file.
* [**Actions**](https://redux.js.org/basics/actions/) are payloads of information that send data from your application to your store.
* [**Reducers**](https://redux.js.org/basics/reducers) specify how the application's state changes in response to actions sent to the store.
* [**Redux-Saga**](https://redux-saga.js.org/) is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage. Sagas are created in the `src/store/sagas` folder.
* [**Reselect**](https://github.com/reduxjs/reselect) library is used to create memoized selectors. Selectors are created in the `src/store/selectors` folder.
### APIs
[Axios](https://github.com/axios/axios) is used as the HTTP client library. An Axios instance is exported from `src/api/API.js` file to make HTTP calls with the same config. `src/api` folder also has the API files that have been created for API calls.
[Axios](https://github.com/axios/axios) is used as the HTTP client library. An Axios instance is exported from `src/api/API.ts` file to make HTTP calls with the same config. `src/api` folder also has the API files that have been created for API calls.
### Theming
@ -381,7 +380,6 @@ See the [Testing Overview](https://reactjs.org/docs/testing.html) document.
* [Axios](https://github.com/axios/axios) is used as HTTP client library.
* [Redux](https://redux.js.org/) is used as state management library.
* [Redux Toolkit](https://redux-toolkit.js.org/) library is used as a toolset for efficient Redux development.
* [Redux-Saga](https://redux-saga.js.org/) is used to manage asynchronous processes.
* [Redux Persist](https://github.com/rt2zz/redux-persist) is used for state persistance.
* [Reselect](https://github.com/reduxjs/reselect) is used to create memoized selectors.
* [i18n-js](https://github.com/fnando/i18n-js) is used as i18n library.

963
docs/en/tutorials/mobile/react-native/index.md

File diff suppressed because it is too large
Loading…
Cancel
Save