diff --git a/docs/en/framework/ui/react-native/index.md b/docs/en/framework/ui/react-native/index.md index 9b2792ae55..c0957d5426 100644 --- a/docs/en/framework/ui/react-native/index.md +++ b/docs/en/framework/ui/react-native/index.md @@ -151,7 +151,7 @@ The startup template ships with **two navigation styles**, switchable when the p Bottom Tab vs Drawer navigation comparison -Each top-level destination is its own native stack (`@react-navigation/native-stack`), so deeper navigation inside a tab/drawer item keeps that area's history isolated. Both modes share the same screens — only the entry surface and the auth flow placement change. +Every main tab or drawer item is wired to **its own** native stack (`@react-navigation/native-stack`). Pushing more screens stays on that branch: the Back stack belongs to that tab or drawer route and does not mix with others. Bottom Tab and Drawer use the **same screen components**; they differ in how those screens are grouped and opened from the outer shell (and where the sign‑in/sign‑up flow lives in Bottom Tab versus Drawer). > **How to choose:** The mode is selected in **ABP Studio** during the *Mobile Framework* step. Switching modes after the project is generated is not a one-line change — you would need to add the missing navigator (and its `@react-navigation/drawer` or `@react-navigation/bottom-tabs` dependency) manually, then update `src/AppContainer.tsx` and `src/navigators/types.ts` to match. Pick the mode upfront when possible. 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 4301c451b6..2a165b9900 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/solution-templates/layered-web-application/mobile-applications.md b/docs/en/solution-templates/layered-web-application/mobile-applications.md index a461da6e90..bf2e6375ae 100644 --- a/docs/en/solution-templates/layered-web-application/mobile-applications.md +++ b/docs/en/solution-templates/layered-web-application/mobile-applications.md @@ -112,7 +112,7 @@ The UI is built with **[NativeWind v4](https://www.nativewind.dev/)** (Tailwind - **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` -- **hooks**: folder contains custom [React hooks](https://react.dev/reference/react/hooks) used across the app. The template ships with `useThemeColors` (theme-aware color values for components that can't use `className`) and `useLogout`, among others. +- **hooks**: custom [React hooks](https://react.dev/reference/react/hooks) for shared UI and app logic. For example, `useThemeColors` returns light/dark palette values when a component needs explicit colors instead of NativeWind `className`, and `useLogout` handles signing out—plus other hooks bundled with the template. - **navigators**: folder contains [React Navigation](https://reactnavigation.org/) stacks. The template includes `BottomTabNavigator`, `DrawerNavigator`, `HomeNavigator`, `SettingsNavigator` and `AccountNavigator`. After creating a new *FeatureName*Navigator, register it in the appropriate parent navigator (e.g. `DrawerNavigator.tsx` or `BottomTabNavigator.tsx`). @@ -124,7 +124,7 @@ The UI is built with **[NativeWind v4](https://www.nativewind.dev/)** (Tailwind - **utils**: folder contains helper functions that we can use in application -In addition to `src/`, the project root contains the NativeWind configuration: `tailwind.config.js` (design tokens, dark mode, color palette), `global.css` (Tailwind directives), `metro.config.js` and `babel.config.js` (NativeWind wiring), and `nativewind-env.d.ts` (TypeScript types for the `className` prop). +In addition to `src/`, the project root hosts the NativeWind setup. `tailwind.config.js` defines design tokens, the color palette, and dark mode. `global.css` contains Tailwind's layer directives. `metro.config.js` and `babel.config.js` configure Metro and Babel so NativeWind can transform your styles. `nativewind-env.d.ts` adds TypeScript typings for the `className` prop on components. #### Running the Application diff --git a/docs/en/solution-templates/microservice/mobile-applications.md b/docs/en/solution-templates/microservice/mobile-applications.md index 62a46fb0ca..aab9b9a5f9 100644 --- a/docs/en/solution-templates/microservice/mobile-applications.md +++ b/docs/en/solution-templates/microservice/mobile-applications.md @@ -159,7 +159,7 @@ The UI is built with **[NativeWind v4](https://www.nativewind.dev/)** (Tailwind - **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. -- **hooks**: covers the React Native hooks used across the app (see [the official documentation](https://react.dev/reference/react/hooks) for a reference). The template ships with `useThemeColors` (theme-aware color values for components that can't use `className`) and `useLogout`, among others. +- **hooks**: Custom [React hooks](https://react.dev/reference/react/hooks) for shared UI and app logic. For example, `useThemeColors` returns light/dark palette values when a component needs explicit colors instead of NativeWind `className`, and `useLogout` handles signing out—plus other hooks bundled with the template. - **interceptors**: initializes a file called `APIInterceptor.ts` that has a function to manage the http operations in a better way. @@ -173,7 +173,7 @@ The UI is built with **[NativeWind v4](https://www.nativewind.dev/)** (Tailwind - **utils**: folder contains helper functions that we can use in application -In addition to `src/`, the project root contains the NativeWind configuration: `tailwind.config.js` (design tokens, dark mode, color palette), `global.css` (Tailwind directives), `metro.config.js` and `babel.config.js` (NativeWind wiring), and `nativewind-env.d.ts` (TypeScript types for the `className` prop). +In addition to `src/`, the project root hosts the NativeWind setup. `tailwind.config.js` defines design tokens, the color palette, and dark mode. `global.css` contains Tailwind's layer directives. `metro.config.js` and `babel.config.js` configure Metro and Babel so NativeWind can transform your styles. `nativewind-env.d.ts` adds TypeScript typings for the `className` prop on components. #### Running the Application