Codebox React Native Template
npm install @codebox-team/react-native-template


š± 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.
---
- ā
React Native version 0.73.8
- š TypeScript
- āļø React Navigation
- šļø React Native Bootsplash
- š Fastlane for automated deployment
---
Start your project using this template by running:
``sh`
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:
`sh`
yarn install
4. Start the Metro bundler:
`sh`
yarn start
5. Run on iOS or Android:
iOS:
`sh`
cd ios && pod install && cd ..
yarn ios
Android:
`sh`
yarn android
> Note: For iOS, ensure you have CocoaPods installed by running: sudo gem install cocoapods
---
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:
`sh`
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. š
---
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/app/src/main/res/mipmap-*
- Android: Check for updated icons.
4. Rebuild the app to apply changes:
`sh`
yarn android # or yarn ios
---
We use Fastlane Match to securely manage iOS certificates and provisioning profiles.
1. Generate a new provisioning profile sync certificates and provisioning profiles:
`sh`
fastlane match appstore
> Note: Ensure you have access to the private repository where the certificates are stored. iOS Certificates Repository
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:
`gradle`
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:
`sh`
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:
`sh`
mv {app}.release.keystore my_app_release.keystore
If you're using the Azure pipeline provided in this template, make sure to update the project name in the pipeline configuration file:
Open the file production.azure-pipelines.yml and replace all instances of:
`yaml`
name: Standard
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:
`sh`
yarn react-native-asset
3. Use the fonts in your styles:
`js
import { StyleSheet, Text } from "react-native";
const styles = StyleSheet.create({
customText: {
fontFamily: "YourFontName",
fontSize: 18,
},
});
const MyComponent = () => (
);
`
4. Rebuild the app to apply the font changes:
`sh`
yarn android # or yarn ios
---
- ` ā Adds a space between the app name.
---
This project is MIT licensed.