📱 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.

💎 Features

• ✅ React Native version 0.73.8
• 🔭 TypeScript
• ☂️ React Navigation
• 🏞️ React Native Bootsplash
• 🚀 Fastlane for automated deployment

🕹 How to use it

Start your project using this template by running:

npx @react-native-community/cli init SomeApp --template @codebox-team/react-native-template

Then, follow these steps:

1. Add the .npmrc file to your project.

2. Rename the .env.example file to .env and add the environment variables.

3. Install dependencies:

   yarn install

4. Start the Metro bundler:

   yarn start

5. Run on iOS or Android:

   iOS:

   cd ios && pod install && cd ..
   yarn ios

   Android:

   yarn android

Note: For iOS, ensure you have CocoaPods installed by running: sudo gem install cocoapods

🚀 Splash screen configuration

This template includes React Native BootSplash for a better launch experience. Follow these steps to configure it properly:

1. Generate a splash screen image (at least 2000x2000 px).

2. Add the image to your project under src/presentation/assets folder.

3. Run the following command to generate platform-specific assets:

   yarn react-native-bootsplash generate {{filePath}} --background=FFFFFF --logo-width=200

Now, your app will display the splash screen on launch before transitioning smoothly to the main interface. 🚀

🎨 App Icon configuration

To update the app icon for both iOS and Android, follow these steps:

1. Open the website https://www.appicon.co

2. Generate the icons using a file

3. Manually verify the icons:

   • iOS: Open Xcode, navigate to Images.xcassets > AppIcon, and ensure the icons are properly set.
   • Android: Check android/app/src/main/res/mipmap-* for updated icons.

4. Rebuild the app to apply changes:

   yarn android # or yarn ios

🚀 Deployment Configuration

📱 iOS - Add Certificates and Provisioning Profiles

We use Fastlane Match to securely manage iOS certificates and provisioning profiles.

1. Generate a new provisioning profile sync certificates and provisioning profiles:

   fastlane match appstore

Note: Ensure you have access to the private repository where the certificates are stored. iOS Certificates Repository

🤖 Android - Keystore and App Signing

For Android app signing, we use a keystore file stored securely.

1. Keystore File Location: The .jks file is stored in the internal team repository. Check internal documentation for access.

2. Configure Keystore in the Project:

   In android/app/build.gradle, add the configuration:

   signingConfigs {
       release {
           storeFile file("path/to/keystore.jks")
           storePassword System.getenv("KEYSTORE_PASSWORD")
           keyAlias System.getenv("KEY_ALIAS")
           keyPassword System.getenv("KEY_PASSWORD")
       }
   }

   Ensure the KEYSTORE_PASSWORD, KEY_ALIAS, and KEY_PASSWORD environment variables are correctly set.

3. Generate a new Keystore:

   keytool -genkeypair -v -keystore my_keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my_alias

4. Replace {app}.release.keystore with the application keystore:

   mv {app}.release.keystore my_app_release.keystore

🛠️ Azure Pipeline Setup

If you're using the Azure pipeline provided in this template, make sure to update the project name in the pipeline configuration file:

✅ Rename Standard to your project name in production.azure-pipelines.yml

Open the file production.azure-pipelines.yml and replace all instances of:

name: Standard

🎨 Custom Fonts configuration

To add custom fonts to your React Native project, follow these steps:

1. Place the font files (.ttf or .otf) inside the assets/fonts/ directory.

2. Run the following command to link the fonts:

   yarn react-native-asset

3. Use the fonts in your styles:

   import { StyleSheet, Text } from "react-native";
   
   const styles = StyleSheet.create({
     customText: {
       fontFamily: "YourFontName",
       fontSize: 18,
     },
   });
   
   const MyComponent = () => (
     <Text style={styles.customText}>Hello, Custom Font!</Text>
   );

4. Rebuild the app to apply the font changes:

   yarn android # or yarn ios

ℹ️ Additional Information

📱 iOS

•   → Adds a space between the app name.

🔖 License

This project is MIT licensed.