Standard Mobile 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.

---

💎 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:

``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

---

🚀 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:

`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. 🚀

---

🎨 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:

`sh
yarn android # or yarn ios
`

---

🚀 Deployment Configuration

$3

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

$3

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
`

$3

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

$3

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

`yaml
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:

`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 = () => (
Hello, Custom Font!
);
`

4. Rebuild the app to apply the font changes:

`sh
yarn android # or yarn ios
`

---

ℹ️ Additional Information

$3

- ` → Adds a space between the app name.

---

🔖 License

This project is MIT licensed.