diff --git a/Directory.Packages.props b/Directory.Packages.props
index 8f818a02ce..0c674bf741 100644
--- a/Directory.Packages.props
+++ b/Directory.Packages.props
@@ -88,6 +88,11 @@
+
+
+
+
+
diff --git a/docs/en/framework/infrastructure/artificial-intelligence.md b/docs/en/framework/infrastructure/artificial-intelligence.md
new file mode 100644
index 0000000000..652c7c8233
--- /dev/null
+++ b/docs/en/framework/infrastructure/artificial-intelligence.md
@@ -0,0 +1,307 @@
+# Artificial Intelligence
+
+ABP provides a simple way to integrate AI capabilities into your applications by unifying two popular .NET AI stacks under a common concept called a "workspace":
+
+- Microsoft.Extensions.AI `IChatClient`
+- Microsoft.SemanticKernel `Kernel`
+
+A workspace is just a named scope. You configure providers per workspace and then resolve either default services (for the "Default" workspace) or workspace-scoped services.
+
+## Installation
+
+> This package is not included by default. Install it to enable AI features.
+
+It is suggested to use the ABP CLI to install the package. Open a command line window in the folder of the project (.csproj file) and type the following command:
+
+```bash
+abp add-package Volo.Abp.AI
+```
+
+### Manual Installation
+
+Add nuget package to your project:
+
+```bash
+dotnet add package Volo.Abp.AI
+```
+
+Then add the module dependency to your module class:
+
+```csharp
+using Volo.Abp.AI;
+using Volo.Abp.Modularity;
+
+[DependsOn(typeof(AbpAIModule))]
+public class MyProjectModule : AbpModule
+{
+}
+```
+
+## Usage
+
+### Chat Client
+
+#### Default configuration (quick start)
+
+Configure the default workspace to inject `IChatClient` directly.
+
+```csharp
+using Microsoft.Extensions.AI;
+using Microsoft.SemanticKernel;
+using Volo.Abp.AI;
+using Volo.Abp.Modularity;
+
+public class MyProjectModule : AbpModule
+{
+ public override void ConfigureServices(ServiceConfigurationContext context)
+ {
+ context.Services.PreConfigure(options =>
+ {
+ options.Workspaces.ConfigureDefault(configuration =>
+ {
+ configuration.ConfigureChatClient(chatClientConfiguration =>
+ {
+ chatClientConfiguration.Builder = new ChatClientBuilder(
+ sp => new OllamaApiClient("http://localhost:11434", "mistral")
+ );
+ });
+
+ // Chat client only in this quick start
+ });
+ });
+ }
+}
+```
+
+Once configured, inject the default chat client:
+
+```csharp
+using Microsoft.Extensions.AI;
+
+public class MyService
+{
+ private readonly IChatClient _chatClient; // default chat client
+
+ public MyService(IChatClient chatClient)
+ {
+ _chatClient = chatClient;
+ }
+}
+```
+
+#### Workspace configuration
+
+Workspaces allow multiple, isolated AI configurations. Define workspace types (optionally decorated with `WorkspaceNameAttribute`). If omitted, the type’s full name is used.
+
+```csharp
+using Volo.Abp.AI;
+
+[WorkspaceName("GreetingAssistant")]
+public class GreetingAssistant // ChatClient-only workspace
+{
+}
+```
+
+Configure a ChatClient workspace:
+
+```csharp
+public class MyProjectModule : AbpModule
+{
+ public override void ConfigureServices(ServiceConfigurationContext context)
+ {
+ context.Services.PreConfigure(options =>
+ {
+ options.Workspaces.Configure(configuration =>
+ {
+ configuration.ConfigureChatClient(chatClientConfiguration =>
+ {
+ chatClientConfiguration.Builder = new ChatClientBuilder(
+ sp => new OllamaApiClient("http://localhost:11434", "mistral")
+ );
+
+ chatClientConfiguration.BuilderConfigurers.Add(builder =>
+ {
+ // Anything you want to do with the builder:
+ // builder.UseFunctionInvocation().UseLogging(); // For example
+ });
+ });
+ });
+ });
+ }
+}
+```
+
+### Semantic Kernel
+
+#### Default configuration
+
+
+```csharp
+public class MyProjectModule : AbpModule
+{
+ public override void ConfigureServices(ServiceConfigurationContext context)
+ {
+ context.Services.PreConfigure(options =>
+ {
+ options.Workspaces.ConfigureDefault(configuration =>
+ {
+ configuration.ConfigureKernel(kernelConfiguration =>
+ {
+ kernelConfiguration.Builder = Kernel.CreateBuilder()
+ .AddAzureOpenAIChatClient("...", "...");
+ });
+ // Note: Chat client is not configured here
+ });
+ });
+ }
+}
+```
+
+Once configured, inject the default kernel:
+
+```csharp
+using System.Threading.Tasks;
+using Volo.Abp.AI;
+
+public class MyService
+{
+ private readonly IKernelAccessor _kernelAccessor;
+ public MyService(IKernelAccessor kernelAccessor)
+ {
+ _kernelAccessor = kernelAccessor;
+ }
+
+ public async Task DoSomethingAsync()
+ {
+ var kernel = _kernelAccessor.Kernel; // Kernel might be null if no workspace is configured.
+
+ var result = await kernel.InvokeAsync(/*... */);
+ }
+}
+```
+
+#### Workspace configuration
+
+```csharp
+public class MyProjectModule : AbpModule
+{
+ public override void ConfigureServices(ServiceConfigurationContext context)
+ {
+ context.Services.PreConfigure(options =>
+ {
+ options.Workspaces.Configure(configuration =>
+ {
+ configuration.ConfigureKernel(kernelConfiguration =>
+ {
+ kernelConfiguration.Builder = Kernel.CreateBuilder()
+ .AddOpenAIChatCompletion("...", "...");
+ });
+ });
+ });
+ }
+}
+```
+
+#### Workspace usage
+
+```csharp
+using Microsoft.Extensions.AI;
+using Volo.Abp.AI;
+using Microsoft.SemanticKernel;
+
+public class PlanningService
+{
+ private readonly IKernelAccessor _kernelAccessor;
+ private readonly IChatClient _chatClient; // available even if only Kernel is configured
+
+ public PlanningService(
+ IKernelAccessor kernelAccessor,
+ IChatClient chatClient)
+ {
+ _kernelAccessor = kernelAccessor;
+ _chatClient = chatClient;
+ }
+
+ public async Task PlanAsync(string topic)
+ {
+ var kernel = _kernelAccessor.Kernel; // Microsoft.SemanticKernel.Kernel
+ // Use Semantic Kernel APIs if needed...
+
+ var response = await _chatClient.GetResponseAsync(
+ [new ChatMessage(ChatRole.User, $"Create a content plan for: {topic}")]
+ );
+ return response?.Message?.Text ?? string.Empty;
+ }
+}
+```
+
+## Options
+
+`AbpAIOptions` configuration pattern offers `ConfigureChatClient(...)` and `ConfigureKernel(...)` methods for configuration. These methods are defined in the `WorkspaceConfiguration` class. They are used to configure the `ChatClient` and `Kernel` respectively.
+
+`Builder` is set once and is used to build the `ChatClient` or `Kernel` instance. `BuilderConfigurers` is a list of actions that are applied to the `Builder` instance for incremental changes. These actions are executed in the order they are added.
+
+If a workspace configures only the Kernel, a chat client may still be exposed for that workspace through the Kernel’s service provider (when available).
+
+
+## Advanced Usage and Customizations
+
+### Addding Your Own DelegatingChatClient
+
+If you want to build your own decorator, implement a `DelegatingChatClient` derivative and provide an extension method that adds it to the `ChatClientBuilder` using `builder.Use(...)`.
+
+Example sketch:
+
+```csharp
+using Microsoft.Extensions.AI;
+
+public class SystemMessageChatClient : DelegatingChatClient
+{
+ public SystemMessageChatClient(IChatClient inner, string systemMessage) : base(inner)
+ {
+ SystemMessage = systemMessage;
+ }
+
+ public string SystemMessage { get; set; }
+
+ public override Task GetResponseAsync(IEnumerable messages, ChatOptions? options = null, CancellationToken cancellationToken = default)
+ {
+ // Mutate messages/options as needed, then call base
+ return base.GetResponseAsync(messages, options, cancellationToken);
+ }
+}
+
+public static class SystemMessageChatClientExtensions
+{
+ public static ChatClientBuilder UseSystemMessage(this ChatClientBuilder builder, string systemMessage)
+ {
+ return builder.Use(client => new SystemMessageChatClient(client, systemMessage));
+ }
+}
+```
+
+
+```cs
+chatClientConfiguration.BuilderConfigurers.Add(builder =>
+{
+ builder.UseSystemMessage("You are a helpful assistant that greets users in a friendly manner with their names.");
+});
+```
+
+## Technical Anatomy
+
+- `AbpAIModule`: Wires up configured workspaces, registers keyed services and default services for the `"Default"` workspace.
+- `AbpAIOptions`: Holds `Workspaces` and provides helper methods for internal keyed service naming.
+- `WorkspaceConfigurationDictionary` and `WorkspaceConfiguration`: Configure per-workspace Chat Client and Kernel.
+- `ChatClientConfiguration` and `KernelConfiguration`: Hold builders and a list of ordered builder configurers.
+- `WorkspaceNameAttribute`: Names a workspace; falls back to the type’s full name if not specified.
+- `IChatClient`: Typed chat client for a workspace.
+- `IKernelAccessor`: Provides access to the workspace’s `Kernel` instance if configured.
+- `AbpAIWorkspaceOptions`: Exposes `ConfiguredWorkspaceNames` for diagnostics.
+
+There are no database tables for this feature; it is a pure configuration and DI integration layer.
+
+## See Also
+
+- Microsoft.Extensions.AI (Chat Client)
+- Microsoft Semantic Kernel
\ No newline at end of file
diff --git a/docs/en/framework/infrastructure/index.md b/docs/en/framework/infrastructure/index.md
index 681e593aba..e5691612dc 100644
--- a/docs/en/framework/infrastructure/index.md
+++ b/docs/en/framework/infrastructure/index.md
@@ -3,6 +3,7 @@
ABP provides a complete infrastructure for creating real world software solutions with modern architectures based on the .NET platform. Each of the following documents explains an infrastructure feature:
* [Audit Logging](./audit-logging.md)
+* [Artificial Intelligence](./artificial-intelligence.md)
* [Background Jobs](./background-jobs/index.md)
* [Background Workers](./background-workers/index.md)
* [BLOB Storing](./blob-storing/index.md)
diff --git a/docs/en/framework/ui/react-native/index.md b/docs/en/framework/ui/react-native/index.md
index 4b6a0b5ec7..0f39752a82 100644
--- a/docs/en/framework/ui/react-native/index.md
+++ b/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:
+
+
+
+### 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 -m react-native
@@ -38,33 +46,209 @@ abp new MyCompanyName.MyProjectName -csf -u -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"}}
-
-
-- 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" }}
-
-
-
-- 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" }}
+
+
+
+- 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" }}
+
+
+
+- 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" }}
+
+
+
+- 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" }}
-
+
-{{ if Tiered == "Yes" }}
+{{ else if Architecture == "Tiered" }}
+
+
> 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 }}
+
+
-> 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
-
+
### 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.
-
+
Enter **admin** as the username and **1q2w3E\*** as the password to login to the application.
diff --git a/docs/en/framework/ui/react-native/setting-up-android-emulator.md b/docs/en/framework/ui/react-native/setting-up-android-emulator.md
new file mode 100644
index 0000000000..8ead542a76
--- /dev/null
+++ b/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.
diff --git a/docs/en/get-started/images/abp-studio-mobile-sample.gif b/docs/en/get-started/images/abp-studio-mobile-sample.gif
index 654a92eef9..4301c451b6 100644
Binary files a/docs/en/get-started/images/abp-studio-mobile-sample.gif and b/docs/en/get-started/images/abp-studio-mobile-sample.gif differ
diff --git a/docs/en/get-started/layered-web-application.md b/docs/en/get-started/layered-web-application.md
index 3dcbb90f75..c1e08fdb93 100644
--- a/docs/en/get-started/layered-web-application.md
+++ b/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`
diff --git a/docs/en/images/author-input-in-book-form.png b/docs/en/images/author-input-in-book-form.png
index f20254cce7..5204a234e6 100644
Binary files a/docs/en/images/author-input-in-book-form.png and b/docs/en/images/author-input-in-book-form.png differ
diff --git a/docs/en/images/author-list-with-options.png b/docs/en/images/author-list-with-options.png
index 4066938914..c6c98e8f5e 100644
Binary files a/docs/en/images/author-list-with-options.png and b/docs/en/images/author-list-with-options.png differ
diff --git a/docs/en/images/author-list.png b/docs/en/images/author-list.png
index b6a73d8f8d..59d5ad689e 100644
Binary files a/docs/en/images/author-list.png and b/docs/en/images/author-list.png differ
diff --git a/docs/en/images/authors-in-book-form.png b/docs/en/images/authors-in-book-form.png
index 2e0a13a22c..260abddefa 100644
Binary files a/docs/en/images/authors-in-book-form.png and b/docs/en/images/authors-in-book-form.png differ
diff --git a/docs/en/images/book-list-with-author.png b/docs/en/images/book-list-with-author.png
index c5ab6541e8..6cf46aa2e9 100644
Binary files a/docs/en/images/book-list-with-author.png and b/docs/en/images/book-list-with-author.png differ
diff --git a/docs/en/images/book-list-with-options.png b/docs/en/images/book-list-with-options.png
index a6bf87e71f..e327ae3bf5 100644
Binary files a/docs/en/images/book-list-with-options.png and b/docs/en/images/book-list-with-options.png differ
diff --git a/docs/en/images/book-list.png b/docs/en/images/book-list.png
index f14ac93a64..0cd0b74686 100644
Binary files a/docs/en/images/book-list.png and b/docs/en/images/book-list.png differ
diff --git a/docs/en/images/book-store-menu-item.png b/docs/en/images/book-store-menu-item.png
index f190f176ce..cc7b438d74 100644
Binary files a/docs/en/images/book-store-menu-item.png and b/docs/en/images/book-store-menu-item.png differ
diff --git a/docs/en/images/books-menu-item.png b/docs/en/images/books-menu-item.png
index eb9c1042fd..bc80353bc0 100644
Binary files a/docs/en/images/books-menu-item.png and b/docs/en/images/books-menu-item.png differ
diff --git a/docs/en/images/create-author.png b/docs/en/images/create-author.png
index 69e36bc50d..746c916473 100644
Binary files a/docs/en/images/create-author.png and b/docs/en/images/create-author.png differ
diff --git a/docs/en/images/create-book-button-visibility.png b/docs/en/images/create-book-button-visibility.png
index 1b153f9f65..e7f6021175 100644
Binary files a/docs/en/images/create-book-button-visibility.png and b/docs/en/images/create-book-button-visibility.png differ
diff --git a/docs/en/images/create-book-icon.png b/docs/en/images/create-book-icon.png
index 4d4be5ef30..e24f2f53cf 100644
Binary files a/docs/en/images/create-book-icon.png and b/docs/en/images/create-book-icon.png differ
diff --git a/docs/en/images/create-book.png b/docs/en/images/create-book.png
index d7a9675c72..c931c60a0d 100644
Binary files a/docs/en/images/create-book.png and b/docs/en/images/create-book.png differ
diff --git a/docs/en/images/delete-author-alert.png b/docs/en/images/delete-author-alert.png
index 41537d1756..ce1992478d 100644
Binary files a/docs/en/images/delete-author-alert.png and b/docs/en/images/delete-author-alert.png differ
diff --git a/docs/en/images/delete-book-alert.png b/docs/en/images/delete-book-alert.png
index 1676c37ce8..4ef12f3896 100644
Binary files a/docs/en/images/delete-book-alert.png and b/docs/en/images/delete-book-alert.png differ
diff --git a/docs/en/images/delete-book.png b/docs/en/images/delete-book.png
index f6f554d6af..cdfddce673 100644
Binary files a/docs/en/images/delete-book.png and b/docs/en/images/delete-book.png differ
diff --git a/docs/en/images/react-native-environment-local-ip.png b/docs/en/images/react-native-environment-local-ip.png
new file mode 100644
index 0000000000..9887fbcd16
Binary files /dev/null and b/docs/en/images/react-native-environment-local-ip.png differ
diff --git a/docs/en/images/react-native-introduction.gif b/docs/en/images/react-native-introduction.gif
index 15963556aa..4c89b56354 100644
Binary files a/docs/en/images/react-native-introduction.gif and b/docs/en/images/react-native-introduction.gif differ
diff --git a/docs/en/images/react-native-microservice-be-config.png b/docs/en/images/react-native-microservice-be-config.png
new file mode 100644
index 0000000000..2be862d04b
Binary files /dev/null and b/docs/en/images/react-native-microservice-be-config.png differ
diff --git a/docs/en/images/react-native-monolith-be-config.png b/docs/en/images/react-native-monolith-be-config.png
new file mode 100644
index 0000000000..08166473d3
Binary files /dev/null and b/docs/en/images/react-native-monolith-be-config.png differ
diff --git a/docs/en/images/react-native-monolith-environment-local-ip.png b/docs/en/images/react-native-monolith-environment-local-ip.png
new file mode 100644
index 0000000000..09e79419d6
Binary files /dev/null and b/docs/en/images/react-native-monolith-environment-local-ip.png differ
diff --git a/docs/en/images/react-native-option.png b/docs/en/images/react-native-option.png
new file mode 100644
index 0000000000..0121daa39f
Binary files /dev/null and b/docs/en/images/react-native-option.png differ
diff --git a/docs/en/images/react-native-store-folder.png b/docs/en/images/react-native-store-folder.png
index 2567d41477..0bc3fb8134 100644
Binary files a/docs/en/images/react-native-store-folder.png and b/docs/en/images/react-native-store-folder.png differ
diff --git a/docs/en/images/react-native-tiered-be-config.png b/docs/en/images/react-native-tiered-be-config.png
new file mode 100644
index 0000000000..f59fac5164
Binary files /dev/null and b/docs/en/images/react-native-tiered-be-config.png differ
diff --git a/docs/en/images/react-native-tiered-environment-local-ip.png b/docs/en/images/react-native-tiered-environment-local-ip.png
new file mode 100644
index 0000000000..604cb26115
Binary files /dev/null and b/docs/en/images/react-native-tiered-environment-local-ip.png differ
diff --git a/docs/en/images/rn-login-android-studio.png b/docs/en/images/rn-login-android-studio.png
index 4386e95268..e99b835ce0 100644
Binary files a/docs/en/images/rn-login-android-studio.png and b/docs/en/images/rn-login-android-studio.png differ
diff --git a/docs/en/images/rn-login-iphone.png b/docs/en/images/rn-login-iphone.png
index 69df4d9d55..576c260f5e 100644
Binary files a/docs/en/images/rn-login-iphone.png and b/docs/en/images/rn-login-iphone.png differ
diff --git a/docs/en/images/update-author.png b/docs/en/images/update-author.png
index c332994811..b3f7c92074 100644
Binary files a/docs/en/images/update-author.png and b/docs/en/images/update-author.png differ
diff --git a/docs/en/images/update-book.png b/docs/en/images/update-book.png
index c746550939..6b0dd851c9 100644
Binary files a/docs/en/images/update-book.png and b/docs/en/images/update-book.png differ
diff --git a/docs/en/images/update-delete-book-button-visibility.png b/docs/en/images/update-delete-book-button-visibility.png
index fc9f69e870..70e6506894 100644
Binary files a/docs/en/images/update-delete-book-button-visibility.png and b/docs/en/images/update-delete-book-button-visibility.png differ
diff --git a/docs/en/solution-templates/layered-web-application/mobile-applications.md b/docs/en/solution-templates/layered-web-application/mobile-applications.md
index 09da244f27..4a6b6d057a 100644
--- a/docs/en/solution-templates/layered-web-application/mobile-applications.md
+++ b/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
diff --git a/docs/en/solution-templates/microservice/mobile-applications.md b/docs/en/solution-templates/microservice/mobile-applications.md
index e28afbc3c8..d3e8fe19d0 100644
--- a/docs/en/solution-templates/microservice/mobile-applications.md
+++ b/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).
\ No newline at end of file
diff --git a/docs/en/suite/solution-structure.md b/docs/en/suite/solution-structure.md
index 5abd50d751..ad6a2d69e6 100644
--- a/docs/en/suite/solution-structure.md
+++ b/docs/en/suite/solution-structure.md
@@ -318,8 +318,8 @@ React Native application folder structure is like below:
-* `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.
diff --git a/docs/en/tutorials/mobile/react-native/index.md b/docs/en/tutorials/mobile/react-native/index.md
index 2dfa3df957..76b4e59983 100644
--- a/docs/en/tutorials/mobile/react-native/index.md
+++ b/docs/en/tutorials/mobile/react-native/index.md
@@ -6,7 +6,7 @@ React Native mobile option is *available for* ***Team*** *or higher licenses*. T
> You must have an ABP Team or a higher license to be able to create a mobile application.
-- This tutorial assumes that you have completed the [Web Application Development tutorial](../../book-store/part-01.md) and built an ABP based application named `Acme.BookStore` with [React Native](../../../framework/ui/react-native) as the mobile option.. Therefore, if you haven't completed the [Web Application Development tutorial](../../book-store/part-01.md), you either need to complete it or download the source code from down below and follow this tutorial.
+- This tutorial assumes that you have completed the [Web Application Development tutorial](../../book-store/part-01.md) and built an ABP based application named `Acme.BookStore` with [React Native](../../../framework/ui/react-native) as the mobile option. Therefore, if you haven't completed the [Web Application Development tutorial](../../book-store/part-01.md), you either need to complete it or download the source code from down below and follow this tutorial.
- In this tutorial, we will only focus on the UI side of the `Acme.BookStore` application and will implement the CRUD operations.
- Before starting, please make sure that the [React Native Development Environment](../../../framework/ui/react-native/index.md) is ready on your machine.
@@ -20,33 +20,31 @@ You can use the following link to download the source code of the application de
## The Book List Page
-In react native there is no dynamic proxy generation, that's why we need to create the BookAPI proxy manually under the `./src/api` folder.
+There is no dynamic proxy generation for the react native application, that is why we need to create the BookAPI proxy manually under the `./src/api` folder.
-```js
-import api from "./API";
+```ts
+//./src/api/BookAPI.ts
+import api from './API';
-export const getList = () => api.get("/api/app/book").then(({ data }) => data);
+export const getList = () => api.get('/api/app/book').then(({ data }) => data);
-export const get = (id) =>
- api.get(`/api/app/book/${id}`).then(({ data }) => data);
+export const get = id => api.get(`/api/app/book/${id}`).then(({ data }) => data);
-export const create = (input) =>
- api.post("/api/app/book", input).then(({ data }) => data);
+export const create = input => api.post('/api/app/book', input).then(({ data }) => data);
-export const update = (input, id) =>
- api.put(`/api/app/book/${id}`, input).then(({ data }) => data);
+export const update = (input, id) => api.put(`/api/app/book/${id}`, input).then(({ data }) => data);
+
+export const remove = id => api.delete(`/api/app/book/${id}`).then(({ data }) => data);
-export const remove = (id) =>
- api.delete(`/api/app/book/${id}`).then(({ data }) => data);
```
### Add the `Book Store` menu item to the navigation
-For the create menu item, navigate to `./src/navigators/DrawerNavigator.js` file and add `BookStoreStack` to `Drawer.Navigator` component.
+For createing a menu item, navigate to `./src/navigators/DrawerNavigator.tsx` file and add `BookStoreStack` to `Drawer.Navigator` component.
-```js
+```tsx
//Other imports..
-import BookStoreStackNavigator from "./BookStoreNavigator";
+import BookStoreStackNavigator from './BookStoreNavigator';
const Drawer = createDrawerNavigator();
@@ -69,41 +67,61 @@ export default function DrawerNavigator() {
}
```
-Create the `BookStoreStackNavigator` in `./src/navigators/BookStoreNavigator.js`, this navigator will be used for the BookStore menu item.
+Create the `BookStoreStackNavigator` inside `./src/navigators/BookStoreNavigator.tsx`, this navigator will be used for the BookStore menu item.
-```js
-import React from "react";
-import { SafeAreaView } from "react-native-safe-area-context";
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import i18n from "i18n-js";
-import HamburgerIcon from "../components/HamburgerIcon/HamburgerIcon";
-import BookStoreScreen from "../screens/Books/BookStoreScreen";
+```tsx
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from 'react-native-paper';
+import i18n from 'i18n-js';
+
+import { BookStoreScreen, CreateUpdateAuthorScreen, CreateUpdateBookScreen } from '../screens';
+
+import { HamburgerIcon } from '../components';
+import { useThemeColors } from '../hooks';
const Stack = createNativeStackNavigator();
export default function BookStoreStackNavigator() {
+ const { background, onBackground } = useThemeColors();
+
return (
-
-
- ({
- title: i18n.t("BookStore::Menu:BookStore"),
- headerLeft: () => ,
- })}
- />
-
-
+
+ ({
+ title: i18n.t('BookStore::Menu:BookStore'),
+ headerLeft: () => ,
+ headerStyle: { backgroundColor: background },
+ headerTintColor: onBackground,
+ headerShadowVisible: false,
+ })}
+ />
+ ({
+ title: i18n.t(route.params?.bookId ? 'BookStore::Edit' : 'BookStore::NewBook'),
+ headerRight: () => (
+
+ ),
+ headerStyle: { backgroundColor: background },
+ headerTintColor: onBackground,
+ headerShadowVisible: false,
+ })}
+ />
+
);
}
```
- BookStoreScreen will be used to store the `books` and `authors` page
-Add the `BookStoreStack` to the screens object in the `./src/components/DrawerContent/DrawerContent.js` file. The DrawerContent component will be used to render the menu items.
+Add the `BookStoreStack` to the screens object in the `./src/components/DrawerContent/DrawerContent.tsx` file. The DrawerContent component will be used to render the menu items.
-```js
+```tsx
// Imports..
const screens = {
HomeStack: { label: "::Menu:Home", iconName: "home" },
@@ -141,15 +159,18 @@ const screens = {
### Create Book List page
-Before creating the book list page, we need to create the `BookStoreScreen.js` file under the `./src/screens/BookStore` folder. This file will be used to store the `books` and `authors` page.
+Before creating the book list page, we need to create the `BookStoreScreen.tsx` file under the `./src/screens/BookStore` folder. This file will be used to store the `books` and `authors` page.
-```js
-import React from "react";
-import i18n from "i18n-js";
-import { BottomNavigation } from "react-native-paper";
-import BooksScreen from "./Books/BooksScreen";
+```tsx
+import { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import i18n from 'i18n-js';
+import { BottomNavigation } from 'react-native-paper';
+
+import { BooksScreen } from '../../screens';
+import { useThemeColors } from '../../hooks';
-const BooksRoute = () => ;
+const BooksRoute = nav => ;
function BookStoreScreen({ navigation }) {
const [index, setIndex] = React.useState(0);
@@ -177,24 +198,24 @@ function BookStoreScreen({ navigation }) {
export default BookStoreScreen;
```
-Create the `BooksScreen.js` file under the `./src/screens/BookStore/Books` folder.
+Create the `BooksScreen.tsx` file under the `./src/screens/BookStore/Books` folder.
-```js
-import React from "react";
+```tsx
import { useSelector } from "react-redux";
import { View } from "react-native";
-import { useTheme, List } from "react-native-paper";
+import { List } from "react-native-paper";
import { getBooks } from "../../api/BookAPI";
import i18n from "i18n-js";
import DataList from "../../components/DataList/DataList";
import { createAppConfigSelector } from "../../store/selectors/AppSelectors";
+import { useThemeColors } from '../../../hooks';
function BooksScreen({ navigation }) {
- const theme = useTheme();
+ const { background, primary } = useThemeColors();
const currentUser = useSelector(createAppConfigSelector())?.currentUser;
return (
-
+
{currentUser?.isAuthenticated && (