@fadyshawky/react-native-magic 2.0.9 → 2.1.1

package/template/App.tsx

@@ -1,20 +1,20 @@
 /**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
  * @format
  */
 import React from 'react';
-import {LogBox, SafeAreaView, StatusBar} from 'react-native';
+import {LogBox, View} from 'react-native';
 import {SheetProvider} from 'react-native-actions-sheet';
-import {SafeAreaProvider} from 'react-native-safe-area-context';
+import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';
 import {Provider} from 'react-redux';
 import {PersistGate} from 'redux-persist/integration/react';
+import {AppStatusBar} from './src/common/components/AppStatusBar';
+import {SnackbarProvider} from './src/common/components/SnackbarProvider';
 import {LocalizationProvider} from './src/common/localization/LocalizationProvider';
 import {RTLInitializer} from './src/common/localization/RTLInitializer';
 import {useAppSelector} from './src/core/store/reduxHelpers';
 import {persistor, store} from './src/core/store/store';
 import {ThemeProvider, useTheme} from './src/core/theme/ThemeProvider';
+import {NaturalColors} from './src/core/theme/colors';
 import AppNavigator from './src/navigation/MainNavigation';
 
 LogBox.ignoreAllLogs();
@@ -27,14 +27,16 @@ const ThemedApp = () => {
     <RTLInitializer>
       <LocalizationProvider initialLanguage={language}>
         <SafeAreaProvider>
-          <SafeAreaView style={{position: 'absolute'}} />
-          <StatusBar
-            barStyle={theme.mode === 'dark' ? 'light-content' : 'dark-content'}
-            backgroundColor={theme.colors.background_2}
-          />
-          <SheetProvider>
-            <AppNavigator />
-          </SheetProvider>
+          <View style={{flex: 1, backgroundColor: theme?.colors?.background_2 ?? NaturalColors.background_2}}>
+            <SafeAreaView style={{position: 'absolute'}} />
+            <AppStatusBar
+              barStyle={theme?.mode === 'dark' ? 'light-content' : 'dark-content'}
+              backgroundColor={theme?.colors?.background_2 ?? NaturalColors.background_2}
+            />
+            <SheetProvider>
+              <AppNavigator />
+            </SheetProvider>
+          </View>
         </SafeAreaProvider>
       </LocalizationProvider>
     </RTLInitializer>
@@ -45,9 +47,11 @@ function App(): React.JSX.Element {
   return (
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
-        <ThemeProvider initialTheme="dark">
-          <ThemedApp />
-        </ThemeProvider>
+        <SnackbarProvider>
+          <ThemeProvider initialTheme="dark">
+            <ThemedApp />
+          </ThemeProvider>
+        </SnackbarProvider>
       </PersistGate>
     </Provider>
   );

package/template/CHANGELOG.md

@@ -0,0 +1,25 @@
+# Changelog
+
+## [Unreleased]
+
+### Added
+
+- Architecture aligned with Uprise-style layout: `common/`, `core/`, `navigation/`, `screens/`, `sheetManager/`.
+- Single app config module (`src/core/config`) for API base URL and feature toggles; base URL from `.env` via react-native-config.
+- `AppStatusBar` component to avoid deprecated Android status bar APIs.
+- `.env.example` for API_BASE_URL and ENV; `.env` in `.gitignore`.
+- Documentation: `docs/ARCHITECTURE.md`, `docs/CUSTOMIZATION.md`, `docs/BEST_PRACTICES.md`.
+
+### Changed
+
+- Dependencies updated to caret (^) versions; React Native ^0.84, React ^19.2; Node >= 20.
+- Store persist simplified: whitelist only `user` (accessToken, user) and `app` (language, isRTL); removed CryptoJS/deviceId encryption.
+- API layer uses `src/core/config` for base URL; request interceptor adds Bearer token and locale; response interceptor handles 401 (logout).
+- Theme: added “Customize for your brand” comments in `colors.ts`, `fonts.ts`, `commonSizes.ts`.
+- Bootstrap order: Provider → PersistGate → SnackbarProvider → ThemeProvider → ThemedApp (RTLInitializer → LocalizationProvider → SafeAreaProvider → AppStatusBar → SheetProvider → AppNavigator).
+- `index.js` imports `./src/sheetManager/sheets` so sheets are registered.
+
+### Template contract
+
+- `template.config.js`: `placeholderName`, `titlePlaceholder`, `templateDir`.
+- Bundle ID set at init via `--package-name`; app name and title replaced by CLI.

package/template/android/app/build.gradle

@@ -123,8 +123,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         multiDexEnabled true
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode  project.env.get("ANDROID_VERSION_CODE").toInteger()
-        versionName  project.env.get("ANDROID_VERSION_NAME")
+        versionCode  project.env.get("ANDROID_VERSION_CODE")?.toInteger() ?: 1
+        versionName  project.env.get("ANDROID_VERSION_NAME") ?: "1.0.0"
         resValue "string", "build_config_package", project.env.get("ANDROID_APP_ID")
 
         ndk {
@@ -169,7 +169,7 @@ android {
                 def projectName = project.env.get("PROJECT_NAME")
                 def SEP = "_"
                 
-                def newApkName = projectName + SEP + project.env.get("ENV") + SEP + project.env.get("ANDROID_VERSION_NAME") + SEP + project.env.get("ANDROID_VERSION_CODE") + ".apk"
+                def newApkName = projectName + SEP + project.env.get("ENV") + SEP + (project.env.get("ANDROID_VERSION_NAME") ?: "1.0.0") + SEP + (project.env.get("ANDROID_VERSION_CODE")?.toInteger() ?: 1) + ".apk"
                 
 
                 println "Naming File ... " + newApkName                        

package/template/android/app/src/main/java/com/reactnativemagic/MainActivity.kt

@@ -5,11 +5,17 @@ import com.facebook.react.ReactActivity
 import com.facebook.react.ReactActivityDelegate
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
 import com.facebook.react.defaults.DefaultReactActivityDelegate
+import com.swmansion.rnscreens.fragment.restoration.RNScreensFragmentFactory
 
 class MainActivity : ReactActivity() {
 
+  /**
+   * Prevents crash on activity recreation: "Screen fragments should never be restored".
+   * See https://github.com/software-mansion/react-native-screens/issues/17
+   */
   override fun onCreate(savedInstanceState: Bundle?) {
-    super.onCreate(null)
+    supportFragmentManager.fragmentFactory = RNScreensFragmentFactory()
+    super.onCreate(savedInstanceState)
   }
 
   /**
@@ -24,4 +30,4 @@ class MainActivity : ReactActivity() {
    */
   override fun createReactActivityDelegate(): ReactActivityDelegate =
       DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
-}
+}

package/template/android/app/src/main/java/com/reactnativemagic/MainApplication.kt

@@ -4,41 +4,24 @@ import android.app.Application
 import com.facebook.react.PackageList
 import com.facebook.react.ReactApplication
 import com.facebook.react.ReactHost
-import com.facebook.react.ReactNativeHost
-import com.facebook.react.ReactPackage
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
+import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
 import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
-import com.facebook.react.defaults.DefaultReactNativeHost
-import com.facebook.react.soloader.OpenSourceMergedSoMapping
-import com.facebook.soloader.SoLoader
 
 class MainApplication : Application(), ReactApplication {
 
-  override val reactNativeHost: ReactNativeHost =
-      object : DefaultReactNativeHost(this) {
-        override fun getPackages(): List<ReactPackage> =
-            PackageList(this).packages.apply {
-              // Packages that cannot be autolinked yet can be added manually here, for example:
-              // add(MyReactNativePackage())
-            }
-
-        override fun getJSMainModuleName(): String = "index"
-
-        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
-
-        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
-        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
-      }
-
-  override val reactHost: ReactHost
-    get() = getDefaultReactHost(applicationContext, reactNativeHost)
+  override val reactHost: ReactHost by lazy {
+    getDefaultReactHost(
+      context = applicationContext,
+      packageList =
+        PackageList(this).packages.apply {
+          // Packages that cannot be autolinked yet can be added manually here, for example:
+          // add(MyReactNativePackage())
+        },
+    )
+  }
 
   override fun onCreate() {
     super.onCreate()
-    SoLoader.init(this, OpenSourceMergedSoMapping)
-    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-      // If you opted-in for the New Architecture, we load the native entry point for this app.
-      load()
-    }
+    loadReactNative(this)
   }
 }

package/template/android/build.gradle

@@ -1,11 +1,11 @@
 buildscript {
     ext {
-        buildToolsVersion = "35.0.0"
+        buildToolsVersion = "36.0.0"
         minSdkVersion = 24
-        compileSdkVersion = 35
-        targetSdkVersion = 34
-        ndkVersion = "26.1.10909125"
-        kotlinVersion = "1.9.24"
+        compileSdkVersion = 36
+        targetSdkVersion = 36
+        ndkVersion = "27.1.12297006"
+        kotlinVersion = "2.1.20"
     }
     repositories {
         google()

package/template/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.10.2-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-9.0.0-bin.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

package/template/docs/ARCHITECTURE.md

@@ -0,0 +1,27 @@
+# Architecture
+
+## Overview
+
+This app uses a layered structure: **UI** (screens, components) → **navigation** → **core** (store, api, theme, config) and **common** (components, localization, helpers).
+
+## Folder map
+
+| Folder | Purpose |
+|--------|--------|
+| `src/common/` | Shared UI components, localization (i18n), helpers, validations, hooks, urls, utils |
+| `src/core/` | Store (Redux + persist), API client, theme, config, services, hooks |
+| `src/navigation/` | Navigator setup, auth stack, main stack, tab bar, header components |
+| `src/screens/` | Feature screens (Login, Home, Profile, etc.); each may have local `components/` and `hooks/` |
+| `src/sheetManager/` | Action sheet registration |
+
+## Data flow
+
+- **Auth**: Token is stored in Redux (`user.accessToken`). Navigation shows Auth stack when there is no token, Main stack when there is.
+- **API**: Single axios instance in `src/core/api/serverHeaders.ts`. Base URL comes from `src/core/config` (and `.env`). Request interceptor adds `Authorization: Bearer` and `locale`; response interceptor handles 401 (e.g. logout).
+- **Redux**: Slices live under `src/core/store/<domain>/` (e.g. `app`, `user`). Persist whitelist controls what is saved to AsyncStorage.
+
+## SOLID mapping
+
+- **SRP**: One domain per store folder; one primary concern per component file; theme split into colors, fonts, sizes, consts, styles.
+- **OCP**: Extend by adding screens, slices, or routes without changing existing stack logic; extend theme by editing theme files.
+- **DIP**: Core (API, store) does not depend on UI; screens depend on core via hooks/selectors; config abstracts environment.

package/template/docs/BEST_PRACTICES.md

@@ -0,0 +1,33 @@
+# Best practices
+
+## Code style
+
+- Use **TypeScript** strictly; avoid `any` where possible.
+- Use typed Redux: `useAppSelector`, `useAppDispatch`, and `createAppAsyncThunk` with `RootState` / `AppDispatch`.
+- Run `npm run lint` and fix issues.
+
+## Structure
+
+- **Single responsibility**: One concern per module/folder; keep screens thin (logic in hooks or actions).
+- Put shared UI in `src/common/components/`.
+- Use the API helpers from `src/core/api` (get, post, put, deleteApi); do not create extra axios instances.
+
+## Testing
+
+- Use **Jest** and **React Native Testing Library** for unit and component tests.
+- Add tests for store logic and important components; run `npm test`.
+
+## Performance
+
+- Avoid creating new objects/functions in render when they are passed as props to children.
+- Use stable keys for list items.
+
+## Security
+
+- Do not commit secrets; use `.env` for API keys and base URL (and add `.env` to `.gitignore`).
+- Persist only necessary fields (use the persist whitelist in the store).
+
+## LTS / upgrades
+
+- The template targets **Node >= 20** and current stable **React Native** (e.g. 0.84.x).
+- To upgrade React Native, use [React Native Upgrade Helper](https://react-native-community.github.io/upgrade-helper/): select your current version and the target version, then apply the suggested changes to `package.json`, `android/`, `ios/`, and config files.

package/template/docs/CUSTOMIZATION.md

@@ -0,0 +1,53 @@
+# Customization
+
+## App name and bundle ID
+
+Set at project creation:
+
+```bash
+npx @react-native-community/cli init YourAppName --template @fadyshawky/react-native-magic --package-name com.yourcompany.yourapp
+```
+
+- **App name**: Replaces the template placeholder in `app.json` and file names.
+- **Bundle ID** (`--package-name`): Sets Android `applicationId` and iOS `PRODUCT_BUNDLE_IDENTIFIER` and restructures Android package folders.
+
+If you omit `--package-name`, the template will **prompt you** after init to enter a package name (e.g. `com.company.app`). You can enter it then, or press Enter to skip and set `APP_ID` / `ANDROID_APP_ID` in `.env` later and the iOS bundle ID in Xcode or via [react-native-rename](https://www.npmjs.com/package/react-native-rename).
+
+## API base URL and environment
+
+1. Copy `.env.example` to `.env`.
+2. Set `API_BASE_URL` (and any other keys) for your backend.
+3. The app reads these via `react-native-config`; `src/core/config/index.ts` re-exports them for type-safe use.
+
+Optional: use multiple env files (e.g. `.env.development`, `.env.staging`, `.env.production`) and build variants so each build uses the right URL.
+
+## Theme
+
+Edit these files for your brand (no need to touch components):
+
+- **Colors**: `src/core/theme/colors.ts`
+- **Fonts**: `src/core/theme/fonts.ts`
+- **Sizes / spacing**: `src/core/theme/commonSizes.ts`
+
+## Adding a new language
+
+1. Add a new translation file under `src/common/localization/translations/`, e.g. `frLocalization.ts`, following the same shape as `commonLocalization.ts` or `loginLocalization.ts`.
+2. In `src/common/localization/localization.ts`, import the new file and add it to the `localization` object, e.g. `fr: new LocalizedStrings(frLocalization)`.
+3. Add the language to the `Languages` enum in `localization.ts` if you use it for switching (e.g. `fr = 'fr'`).
+4. Use the new keys in your components via the existing `t(key, section)` or the relevant `localization.*` object.
+
+## Adding a screen
+
+1. Create a folder under `src/screens/<Feature>/` with `Feature.tsx` and optional `components/` and `hooks/`.
+2. Register the screen in the right stack in `src/navigation/` (e.g. `AuthStack.tsx` or `MainStack.tsx`).
+3. Add the route and component to the stack’s screen list.
+
+## Adding a Redux slice
+
+1. Create a folder under `src/core/store/<domain>/` with `*State.ts`, `*Slice.ts`, and optionally `*Actions.ts`.
+2. Add the slice to `src/core/store/rootReducer.ts`.
+3. If the slice should persist, add a `createWhitelistFilter('<domain>', ['field1', 'field2'])` entry in `src/core/store/store.tsx` persist config.
+
+## Feature flags / app config
+
+Toggle features or app-level constants in `src/core/config/index.ts` or via env vars read there (e.g. `enableRTL`).

package/template/index.js

@@ -5,5 +5,6 @@ import 'react-native-gesture-handler';
 import {AppRegistry} from 'react-native';
 import App from './App';
 import {name as appName} from './app.json';
+import './src/sheetManager/sheets';
 
 AppRegistry.registerComponent(appName, () => App);

package/template/package.json

@@ -1,116 +1,71 @@
 {
-  "name": "@fadyshawky/react-native-magic",
+  "name": "reactnativemagic",
   "version": "0.0.1",
   "private": true,
   "scripts": {
     "android": "react-native run-android",
-    "android:staging": "react-native run-android --variant=stagingDebug",
-    "android:staging-release": "react-native run-android --variant=stagingRelease",
-    "android:dev": "ENVFILE=.env.development react-native run-android --variant=developmentDebug",
-    "android:dev-release": "ENVFILE=.env.development react-native run-android --variant=developmentRelease",
-    "android:prod": "ENVFILE=.env.production react-native run-android --variant=productionDebug",
-    "android:prod-release": "ENVFILE=.env.production react-native run-android --variant=productionRelease",
     "ios": "react-native run-ios",
     "lint": "eslint .",
     "start": "react-native start",
-    "start:development": "ENVFILE=.env.development react-native start --reset-cache",
-    "start:production": "ENVFILE=.env.production react-native start --reset-cache",
-    "start:staging": "ENVFILE=.env.staging react-native start --reset-cache",
     "test": "jest"
   },
   "dependencies": {
-    "@d11/react-native-fast-image": "^8.9.2",
-    "@react-native-async-storage/async-storage": "^2.1.0",
-    "@react-native-camera-roll/camera-roll": "^7.9.0",
-    "@react-native-community/datetimepicker": "^8.2.0",
-    "@react-native-community/image-editor": "^4.2.1",
-    "@react-native-community/netinfo": "^11.4.1",
-    "@react-native-community/slider": "^4.5.5",
-    "@react-navigation/bottom-tabs": "^7.2.0",
-    "@react-navigation/drawer": "^7.1.1",
-    "@react-navigation/elements": "^2.2.5",
-    "@react-navigation/material-top-tabs": "^7.1.0",
-    "@react-navigation/native": "^7.0.14",
-    "@react-navigation/native-stack": "^7.2.0",
-    "@reduxjs/toolkit": "^2.5.0",
-    "@shopify/flash-list": "^1.7.2",
-    "@types/intl": "^1.2.2",
-    "@types/jest": "^29.5.14",
-    "@types/lodash": "^4.17.13",
-    "@types/react-native-vector-icons": "^6.4.18",
-    "@types/react-redux": "^7.1.34",
-    "axios": "^1.7.9",
+    "@good-react-native/gradient-border": "^1.0.2",
+    "@react-native-async-storage/async-storage": "^3.0.1",
+    "@react-native-masked-view/masked-view": "^0.3.2",
+    "@react-navigation/bottom-tabs": "^7.15.5",
+    "@react-navigation/native": "^7.1.33",
+    "@react-navigation/native-stack": "^7.14.4",
+    "@reduxjs/toolkit": "^2.11.2",
+    "axios": "^1.13.6",
     "babel-plugin-transform-remove-console": "^6.9.4",
-    "dayjs": "^1.11.13",
-    "detox": "^20.28.0",
+    "dayjs": "^1.11.19",
     "intl": "^1.2.5",
-    "lodash": "^4.17.21",
-    "mime": "^4.0.6",
-    "patch-package": "^8.0.0",
-    "react": "^18.3.1",
-    "react-native": "^0.76.5",
-    "react-native-actions-sheet": "^0.9.7",
-    "react-native-animated-pagination-dots": "^0.1.73",
-    "react-native-calendars": "^1.1307.0",
-    "react-native-config": "^1.5.3",
-    "react-native-device-info": "^14.0.2",
-    "react-native-dropdown-select-list": "^2.0.5",
-    "react-native-gesture-handler": "^2.21.2",
-    "react-native-image-crop-picker": "^0.41.6",
-    "react-native-image-resource-generator": "^1.0.2",
-    "react-native-in-app-review": "^4.3.3",
+    "lodash": "^4.17.23",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-native": "^0.84.1",
+    "react-native-actions-sheet": "^10.1.2",
+    "react-native-config": "^1.6.1",
+    "react-native-device-info": "^15.0.2",
+    "react-native-gesture-handler": "^2.30.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
+    "react-native-linear-gradient": "^2.8.3",
     "react-native-localization": "^2.3.2",
-    "react-native-mask-input": "^1.2.3",
-    "react-native-orientation-locker": "^1.7.0",
-    "react-native-pager-view": "^6.6.1",
-    "react-native-permissions": "^5.2.1",
-    "react-native-reanimated": "^3.16.6",
-    "react-native-reanimated-carousel": "^3.5.1",
+    "react-native-reanimated": "^4.2.2",
     "react-native-restart": "^0.0.27",
-    "react-native-safe-area-context": "^5.0.0",
-    "react-native-screens": "^4.4.0",
+    "react-native-safe-area-context": "^5.7.0",
+    "react-native-screens": "^4.24.0",
     "react-native-sfsymbols": "^1.2.2",
-    "react-native-share": "^12.0.3",
-    "react-native-snackbar": "^2.8.0",
-    "react-native-svg": "^15.10.1",
-    "react-native-tab-view": "^4.0.5",
-    "react-native-vector-icons": "^10.2.0",
-    "react-native-vision-camera": "^4.6.3",
-    "react-native-webview": "^13.12.5",
+    "react-native-snackbar": "^3.0.1",
+    "react-native-vector-icons": "^10.3.0",
+    "react-native-worklets": "^0.7.4",
     "react-redux": "^9.2.0",
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
     "redux-persist-transform-filter": "^0.0.22"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.26.0",
-    "@babel/runtime": "^7.26.0",
-    "@jest/globals": "^29.7.0",
-    "@react-native-community/cli": "15.0.1",
-    "@react-native-community/cli-platform-android": "15.0.1",
-    "@react-native-community/cli-platform-ios": "15.0.1",
-    "@react-native/babel-preset": "^0.76.5",
-    "@react-native/eslint-config": "^0.76.5",
-    "@react-native/metro-config": "^0.76.5",
-    "@react-native/typescript-config": "^0.76.5",
-    "@types/react": "^18.3.18",
-    "@types/react-test-renderer": "^18.3.1",
-    "babel-jest": "^29.7.0",
-    "eslint": "^8.57.1",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jest": "^28.10.0",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-native": "^4.1.0",
-    "eslint-plugin-unused-imports": "^4.1.4",
-    "jest": "^29.7.0",
-    "prettier": "^2.8.8",
-    "react-test-renderer": "^18.3.1",
-    "typescript": "^5.0.4"
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
+    "@babel/runtime": "^7.28.6",
+    "@react-native-community/cli": "^20.1.2",
+    "@react-native-community/cli-platform-android": "^20.1.2",
+    "@react-native-community/cli-platform-ios": "^20.1.2",
+    "@react-native/babel-preset": "^0.84.1",
+    "@react-native/eslint-config": "^0.84.1",
+    "@react-native/metro-config": "^0.84.1",
+    "@react-native/typescript-config": "^0.84.1",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.2.14",
+    "@types/react-test-renderer": "^19.1.0",
+    "eslint": "^10.0.2",
+    "jest": "^30.2.0",
+    "prettier": "^3.8.1",
+    "react-test-renderer": "^19.2.3",
+    "typescript": "^5.9.3"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   }
 }

package/template/src/common/components/AppStatusBar.tsx

@@ -0,0 +1,24 @@
+/**
+ * StatusBar wrapper that avoids deprecated Android APIs when using edge-to-edge.
+ * On Android 15+ with edge-to-edge, Window.setStatusBarColor/setNavigationBarColor
+ * are deprecated. Passing backgroundColor on Android triggers those APIs, so we
+ * only pass it on iOS.
+ */
+import React from 'react';
+import {Platform, StatusBar, StatusBarProps} from 'react-native';
+
+type AppStatusBarProps = Omit<StatusBarProps, 'backgroundColor'> & {
+  backgroundColor?: string;
+};
+
+export function AppStatusBar({
+  backgroundColor,
+  ...rest
+}: AppStatusBarProps): React.JSX.Element {
+  return (
+    <StatusBar
+      {...rest}
+      backgroundColor={Platform.OS === 'ios' ? backgroundColor : undefined}
+    />
+  );
+}

package/template/src/common/components/Cards.tsx

@@ -80,7 +80,7 @@ const styles = StyleSheet.create({
     height: scaleHeight(100),
   },
   title: {
-    fontSize: CommonSizes.fontSize.body2,
+    fontSize: CommonSizes.font.bodyMedium,
     textAlign: 'center',
     marginBottom: CommonSizes.spacing.small,
   },

package/template/src/common/components/EmptyView.tsx

@@ -22,7 +22,7 @@ const styles = StyleSheet.create({
     ...CommonStyles.normalText,
     fontWeight: '600',
     textAlign: 'center',
-    marginBottom: CommonSizes.spacing.extraSmall,
+    marginBottom: CommonSizes.spacing.xSmall,
   } as TextStyle,
   description: {
     ...CommonStyles.normalText,

package/template/src/common/components/OTPInput.tsx

@@ -100,7 +100,7 @@ const styles = StyleSheet.create({
   },
   input: {
     flex: 1,
-    height: CommonSizes.spacing.xxl,
+    height: CommonSizes.spacing.xxxLarge,
     borderWidth: 1,
     borderRadius: CommonSizes.borderRadius.medium,
     textAlign: 'center',

package/template/src/common/components/PrimaryButton.tsx

@@ -17,7 +17,7 @@ import {
   TouchablePlatformProps,
 } from '../../../types';
 import {useTheme} from '../../core/theme/ThemeProvider';
-import {BorderRadius, Spacing} from '../../core/theme/commonSizes';
+import {CommonSizes} from '../../core/theme/commonSizes';
 import {createThemedStyles} from '../../core/theme/commonStyles';
 import {Theme} from '../../core/theme/types';
 import {IconPlatform} from './IconPlatform';
@@ -271,10 +271,10 @@ function createSmallSolidStyles(theme: Theme): IStyles {
   const commonStyles = createThemedStyles(theme);
   return StyleSheet.create({
     button: {
-      padding: Spacing.medium,
+      padding: CommonSizes.spacing.medium,
       alignItems: 'center',
       justifyContent: 'center',
-      borderRadius: BorderRadius.extraLarge,
+      borderRadius: CommonSizes.borderRadius.xLarge,
       flexDirection: 'row',
       backgroundColor: theme.colors.indigoBlue,
       // width: 175,
@@ -295,10 +295,10 @@ function createSmallOutlineStyles(theme: Theme): IStyles {
   const commonStyles = createThemedStyles(theme);
   return StyleSheet.create({
     button: {
-      padding: Spacing.medium,
+      padding: CommonSizes.spacing.medium,
       alignItems: 'center',
       justifyContent: 'center',
-      borderRadius: BorderRadius.extraLarge,
+      borderRadius: CommonSizes.borderRadius.xLarge,
       flexDirection: 'row',
       backgroundColor: 'transparent',
       width: 175,

package/template/src/common/components/PrimaryTextInput.tsx

@@ -22,7 +22,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import {useTheme} from '../../core/theme/ThemeProvider';
-import {NewColors} from '../../core/theme/colors';
+import {PrimaryColors, AlertColors} from '../../core/theme/colors';
 import {isIos} from '../../core/theme/commonConsts';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
@@ -268,13 +268,13 @@ function getInputContainerStyle(
   }
 }
 
-const selectionColor = NewColors.blueNormalActive;
+const selectionColor = PrimaryColors.PlatinateBlue_400;
 
 const commonInputContainer: TextStyle = {
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'center',
-  minHeight: CommonSizes.spacing.extraLarge,
+  minHeight: CommonSizes.spacing.xxxLarge,
   textAlignVertical: 'center',
   textAlign: 'center',
   width: '100%',
@@ -307,7 +307,7 @@ const styles = StyleSheet.create({
     ...commonInputContainer,
     ...Platform.select({
       android: {
-        borderColor: NewColors.red,
+        borderColor: AlertColors.error_400,
       },
     }),
   } as TextStyle,

package/template/src/common/components/RadioButton.tsx

@@ -46,7 +46,7 @@ export const RadioButton: FC<IProps> = memo(
 const commonLabel: TextStyle = {
   ...CommonStyles.normalText,
   flex: 1,
-  paddingStart: CommonSizes.spacing.extraSmall,
+  paddingStart: CommonSizes.spacing.xSmall,
 };
 
 const styles = StyleSheet.create({