![\"Code](\"https://codebox-shared-assets.s3.amazonaws.com/codebox-logo.svg\"){kind=logo}
\n\n \n
![\"React](\"https://img.shields.io/badge/license-MIT-blue.svg\"){kind=icon}
![\"Documentation\"](\"https://img.shields.io/badge/documentation-yes-brightgreen.svg\"){kind=icon}
[](https://badge.fury.io/js/npm)\n\nš± A template for your next React Native projects. It is prepared with some of Code Box team basics dependencies and cool features: Typescript, react-navigation, Redux persist using MMKV, and Mobile Components.\n\n---\n\n## š Features\n\n- ā
[React Native](https://reactnative.dev/) version 0.73.8\n- š [TypeScript](https://www.typescriptlang.org/)\n- āļø [React Navigation](https://reactnavigation.org/)\n- šļø [React Native Bootsplash](https://github.com/zoontek/react-native-bootsplash)\n- š [Fastlane](https://fastlane.tools/) for automated deployment\n\n---\n\n## š¹ How to use it\n\nStart your project using this template by running:\n\n```sh\nnpx @react-native-community/cli init SomeApp --template @codebox-team/react-native-template\n```\n\nThen, follow these steps:\n\n1. **Add the `.npmrc` file** to your project.\n\n2. **Rename the `.env.example` file to `.env`** and add the environment variables.\n\n3. **Install dependencies**:\n\n ```sh\n yarn install\n ```\n\n4. **Start the Metro bundler**:\n\n ```sh\n yarn start\n ```\n\n5. **Run on iOS or Android**:\n\n **iOS**:\n\n ```sh\n cd ios && pod install && cd ..\n yarn ios\n ```\n\n **Android**:\n\n ```sh\n yarn android\n ```\n\n> **Note:** For iOS, ensure you have **CocoaPods** installed by running: `sudo gem install cocoapods`\n\n---\n\n## š Splash screen configuration\n\nThis template includes **React Native BootSplash** for a better launch experience. Follow these steps to configure it properly:\n\n1. **Generate a splash screen image** (at least **2000x2000 px**).\n\n2. **Add the image to your project** under `src/presentation/assets` folder.\n\n3. **Run the following command** to generate platform-specific assets:\n\n ```sh\n yarn react-native-bootsplash generate {{filePath}} --background=FFFFFF --logo-width=200\n ```\n\nNow, your app will display the splash screen on launch before transitioning smoothly to the main interface. š\n\n---\n\n## šØ App Icon configuration\n\nTo update the app icon for both iOS and Android, follow these steps:\n\n1. **Open the website** https://www.appicon.co\n2. **Generate the icons** using a file\n3. **Manually verify the icons**:\n - iOS: Open `Xcode`, navigate to `Images.xcassets` > `AppIcon`, and ensure the icons are properly set.\n - Android: Check `android/app/src/main/res/mipmap-*` for updated icons.\n4. **Rebuild the app** to apply changes:\n\n ```sh\n yarn android # or yarn ios\n ```\n\n---\n\n## š Deployment Configuration\n\n### š± iOS - Add Certificates and Provisioning Profiles\n\nWe use [Fastlane Match](https://docs.fastlane.tools/actions/match/) to securely manage iOS certificates and provisioning profiles.\n\n1. **Generate a new provisioning profile sync certificates and provisioning profiles:**\n\n ```sh\n fastlane match appstore\n ```\n\n> **Note:** Ensure you have access to the private repository where the certificates are stored. [iOS Certificates Repository](https://CodeBoxTeam@dev.azure.com/CodeBoxTeam/Code%20Box/_git/ios-cert-mobile)\n\n### š¤ Android - Keystore and App Signing\n\nFor Android app signing, we use a **keystore file** stored securely.\n\n1. **Keystore File Location:**\n The `.jks` file is stored in the **internal team repository**. Check internal documentation for access.\n\n2. **Configure Keystore in the Project:**\n\n In `android/app/build.gradle`, add the configuration:\n\n ```gradle\n signingConfigs {\n release {\n storeFile file(\"path/to/keystore.jks\")\n storePassword System.getenv(\"KEYSTORE_PASSWORD\")\n keyAlias System.getenv(\"KEY_ALIAS\")\n keyPassword System.getenv(\"KEY_PASSWORD\")\n }\n }\n ```\n\n Ensure the `KEYSTORE_PASSWORD`, `KEY_ALIAS`, and `KEY_PASSWORD` environment variables are correctly set.\n\n3. **Generate a new Keystore:**\n\n ```sh\n keytool -genkeypair -v -keystore my_keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my_alias\n ```\n\n4. **Replace `{app}.release.keystore` with the application keystore:**\n\n ```sh\n mv {app}.release.keystore my_app_release.keystore\n ```\n\n### š ļø Azure Pipeline Setup\n\nIf you're using the Azure pipeline provided in this template, **make sure to update the project name** in the pipeline configuration file:\n\n### ā
Rename `Standard` to your project name in `production.azure-pipelines.yml`\n\nOpen the file `production.azure-pipelines.yml` and replace all instances of:\n\n```yaml\nname: Standard\n```\n\n## šØ Custom Fonts configuration\n\nTo add custom fonts to your React Native project, follow these steps:\n\n1. **Place the font files** (`.ttf` or `.otf`) inside the `assets/fonts/` directory.\n\n2. **Run the following command** to link the fonts:\n\n ```sh\n yarn react-native-asset\n ```\n\n3. **Use the fonts in your styles**:\n\n ```js\n import { StyleSheet, Text } from \"react-native\";\n\n const styles = StyleSheet.create({\n customText: {\n fontFamily: \"YourFontName\",\n fontSize: 18,\n },\n });\n\n const MyComponent = () => (\n