A fully-featured, modern React Native boilerplate with TypeScript support, navigation structure, multi-language capabilities, theme switching, and more!
- ⚡ Built with React Native 0.79.1
- 🧩 TypeScript for type safety
- 🧭 React Navigation v7 with ready-to-use navigation structure
- 🌗 Dark/Light theme support with ThemeProvider
- 🌐 Internationalization (i18n) with language switching
- 💾 MMKV storage for fast data persistence
- 🔄 State management with Zustand
- 🛡️ Safe Area handling
- 📱 Well-structured project architecture
- 🧹 ESLint and prettier configuration for code quality
- 📏 Consistent metrics system for responsive layouts
- 🎨 Vector Icons integration for beautiful UI elements
- 🧰 Pre-configured UI components ready to use
src/
├── assets/ # Fonts, images, and other static files
│ └── fonts/ # Custom fonts
├── components/ # Reusable UI components
│ ├── Button/ # Button component
│ ├── SizedBox/ # Spacing component
│ └── TextField/ # Text input component
├── i18n/ # Internationalization
│ ├── locales/ # Translation files
│ └── initI18next.ts # i18n configuration
├── navigation/ # Navigation setup
│ ├── page-navigators/ # Individual navigators
│ │ ├── HomeStackNavigator.tsx
│ │ ├── AppNavigator.tsx
│ │ └── RootNavigator.tsx
├── screens/ # App screens
│ └── home/ # Home screen
│ ├── index.tsx # Screen component
│ └── styles.ts # Screen styles
├── storage/ # Storage utilities
│ └── index.ts # MMKV setup
├── store/ # State management
│ └── useStore.ts # Zustand store
└── theme/ # Theming system
├── colors.ts # Color palette
├── metrics.ts # Consistent sizing
├── ThemeProvider.tsx # Theme context
└── typography.ts # Text styles
- Node.js >= 18
- JDK 17 or newer
- Android Studio (for Android development)
- Xcode (for iOS development)
- CocoaPods (for iOS dependencies)
- Ruby (for iOS development)
Step 1: Clone the repository
git clone https://github.com/TechCraft-By-Subrata/react-native-boilerplate.git yourproject
cd yourprojectStep 2: Setup and rename your project ⚡
yarn setup --project-name "YourAppName" --bundle-name com.yourcompany.yourappnameThat's it! 🎉 This single command will:
- ✅ Automatically detect and rename your iOS project, folders, and configs
- ✅ Update all bundle identifiers and configuration files
- ✅ Update Podfile target and all references
- ✅ Clean up Podfile.lock, Pods, and vendor/bundle for a fresh install
- ✅ Install all dependencies
- ✅ Link font assets automatically
- ✅ Configure iOS pods (no need for react-native-rename)
- ✅ Set up everything for immediate development
Step 3: Run your app
# For iOS
yarn ios
# For Android
yarn androidIf you prefer to set up manually or rename later:
Option 1: Setup without renaming first
yarn setupOption 2: Manual installation
# Install dependencies
yarn install
# Link font assets
npx react-native-asset
# Install iOS dependencies
cd ios && bundle install && bundle exec pod install && cd ..Manual renaming is no longer required!
The setup script now handles all renaming and configuration automatically. No need for react-native-rename.
Once your project is set up, you can use these commands:
# Start Metro bundler
yarn start
# Run on iOS (iPhone 16 Pro simulator by default)
yarn ios
# Run on Android
yarn android
# Install iOS dependencies (if needed later)
cd ios && bundle exec pod install && cd ..
# Link new font assets (if you add fonts later)
npx react-native-assetNote: The iOS command runs on iPhone 16 Pro simulator by default. You can customize this in
package.json.
In package.json, you can change the iOS simulator by modifying:
"ios": "react-native run-ios --simulator=\"iPhone 16 Pro\" --terminal powershell"Replace "iPhone 16 Pro" with your preferred simulator device.
Edit the theme color palette in src/theme/colors.ts to match your brand's color scheme.
The boilerplate includes a powerful metrics system in src/theme/metrics.ts that provides consistent spacing, sizing, and responsive values across your app:
// Example usage in your styles
import {metrics} from '../theme/metrics';
import typography from "./typography";
import {colors} from "./colors";
const styles = StyleSheet.create({
container: {
paddingHorizontal: metrics.scale(10),
marginBottom: metrics.verticalScale(15),
},
title: {
fontSize: metrics.moderateScale(14),
fontFamily: typography.BOLD,
color: colors.primary,
},
});This ensures your UI looks consistent across different device sizes and orientations.
This boilerplate comes with a fully configured navigation system using React Navigation v7, including:
- Stack Navigator for screen transitions
- Bottom Tab Navigator for main navigation
- Safe Area integrated navigation
- Type-safe navigation with TypeScript
Simply start using the pre-configured navigators or extend them for your specific needs.
The project includes React Native Vector Icons, giving you access to thousands of customizable icons:
import Icon from 'react-native-vector-icons/MaterialIcons';
// In your component
<Icon name="home" size={metrics.moderateScale(24)} color="#000000" />This boilerplate comes with the complete Montserrat font family pre-installed with various weights and styles:
- Manrope-Regular
- Manrope-Bold
- Manrope-ExtraLight
- Manrope-ExtraBold
- Manrope-Medium
- Manrope-Light
- Manrope-SemiBold
The setup script (mentioned in the Installation section) automatically links these fonts for both Android and iOS platforms, making them immediately ready to use.
import {typography} from '../theme/typography';
import metrics from "./metrics";
const styles = StyleSheet.create({
title: {
fontFamily: typography.BOLD,
fontSize: metrics.moderateScale(14),
},
body: {
fontFamily: typography.REGULAR,
fontSize: metrics.moderateScale(12),
}
});If you want to use different fonts:
- Add your font files to
src/assets/fonts/ - Run
npx react-native-assetto link them automatically - Update
src/theme/typography.tsto include your new fonts - Run
cd ios && pod install && cd ..for iOS
Add or edit translation keys in the locale files located in src/i18n/locales/.
The boilerplate includes a convenient setup script that automates project initialization and renaming. Add this script to your package.json:
"scripts": {
"setup": "node setup.js",
// other scripts...
}The enhanced setup.js supports command line arguments for project renaming:
# Setup with project renaming
yarn setup --project-name "YourAppName" --bundle-name com.yourcompany.yourapp
# Setup without renaming
yarn setupThe setup script now includes:
- Automatic detection and renaming of your iOS project, folders, and configs
- Podfile target and reference updates
- Cleanup of Podfile.lock, Pods, and vendor/bundle for a fresh install
- Dependency installation
- Font asset linking
- iOS pod installation
- Complete project configuration
No need for react-native-rename—everything is handled natively.
Also, create a react-native.config.js file in your project root:
// react-native.config.js
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./src/assets/fonts/'],
};This setup ensures that new users of your boilerplate can get everything running with a single command.
- react-native: 0.79.1
- react: 19.0.0
- @react-navigation/native: ^7.1.6
- @react-navigation/stack: ^7.2.10
- @react-navigation/bottom-tabs: ^7.3.10
- @react-navigation/native-stack: ^7.3.10
- react-native-screens: ^4.10.0
- react-native-safe-area-context: ^5.4.0
- zustand: ^5.0.3
- react-native-mmkv: ^3.2.0
- i18next: ^25.0.1
- react-i18next: ^15.4.1
- react-native-localize: ^3.4.1
- react-native-svg: ^15.11.2
- react-native-vector-icons: ^10.2.0
- react-native-gesture-handler: ^2.25.0
- eslint: ^8.19.0
- prettier: 2.8.8
- @react-native/eslint-config: 0.79.1
This project is licensed under the MIT License - see the LICENSE file for details.
Created by Ahmet YILDIZ - phosimurg
This boilerplate is inspired by and based on the excellent work in the original repository:
phosimurg/rn-flash-boilerplate
Feel free to contribute, open issues, or suggest improvements!