@ -151,7 +151,7 @@ The startup template ships with **two navigation styles**, switchable when the p
<imgwidth="600"src="../../../images/rn-nav-comparison.png"alt="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.
@ -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.
@ -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.