React Native Template Base
npm install react-native-template-paisen> A modern, production-ready React Native template with TypeScript, Redux Toolkit, React Navigation, and many pre-configured features to kickstart your mobile app development.



- TypeScript - Type safety and better development experience
- Redux Toolkit - Modern Redux with simplified store management
- React Navigation v7 - Stack and Bottom Tab navigation
- Custom Hooks - Reusable logic with hooks pattern
- Custom Components - Pre-built reusable UI components
- Typography System - Consistent text styling
- Color Palette - Organized color constants
- Icon System - SVG icon components
- Fast Image - Optimized image loading
- i18next - Multi-language support
- HTTP Client - Axios-based API service layer
- Async Storage - Persistent local data storage
- ESLint - Code linting and formatting
- Jest - Unit testing framework
- React Native DevSettings - Development utilities
- Metro Config - Optimized bundler configuration
``bash`
npx @react-native-community/cli init MyApp --template react-native-template-paisen
Alternative methods:
`bashUsing GitHub URL
npx @react-native-community/cli init MyApp --template https://github.com/thangpaisen/react-native-paisen.git
$3
`bash
cd MyApp
`๐ฑ Running the Application
$3
Make sure you have completed the React Native - Environment Setup instructions.
$3
`bash
Install iOS dependencies
cd ios && pod install && cd ..Run on iOS simulator
npm run iosClean iOS build
npm run ios:clean
`$3
`bash
Run on Android emulator/device
npm run androidBuild release APK
npm run android:releaseBuild release AAB
npm run android:aabClean Android build
npm run android:clean
`$3
`bash
Start Metro bundler
npm startRun tests
npm testLint code
npm run lint
`๐ Project Structure
`
src/
โโโ Assets/ # Static assets (fonts, icons, images)
โโโ Components/ # Reusable UI components
โโโ Constants/ # App constants (colors, fonts, texts)
โโโ Hooks/ # Custom React hooks
โโโ I18n/ # Internationalization setup
โโโ Models/ # TypeScript type definitions
โโโ Navigators/ # Navigation configuration
โโโ Redux/ # State management (store, slices, thunks)
โโโ Screens/ # Screen components
โโโ Services/ # API services and HTTP client
โโโ Utils/ # Utility functions
`$3
- Button - Customizable button component
- CheckBox - Checkbox input component
- Header - Navigation header component
- IconSvg - SVG icon wrapper
- Input - Advanced TextInput component with animated label
- InputField - React Hook Form integration wrapper
- Loading - Loading indicator component
- Popup - Modal popup component
- Text - Typography component with theme support
- Toast - Notification toast with Redux state management and gesture support
$3
- Store - Centralized state management
- Slices - Feature-based state slices
- Thunks - Async action creators
$3
- BaseServices - Common API functionality
- httpClient - Axios configuration and interceptors
- MovieServices - Example movie API service
- UserServices - Example user API service
๐ ๏ธ Configuration
$3
Create a
.env file in the root directory:`env
API_BASE_URL=https://your-api-url.com
API_KEY=your-api-key
`$3
1. App Name & Bundle ID: Update in
app.json
2. Colors: Modify src/Constants/Colors.ts
3. Fonts: Update src/Constants/Fonts.ts
4. Languages: Add translations in src/I18n/Languages/๐ฆ Key Dependencies
$3
- React Native 0.75.5
- TypeScript
- React 18.3.1
$3
- @react-navigation/native
- @react-navigation/stack
- @react-navigation/bottom-tabs
$3
- @reduxjs/toolkit
- react-redux
$3
- react-native-animatable
- react-native-fast-image
- react-native-gesture-handler
- react-native-safe-area-context
- react-native-screens
$3
- axios
- i18next
- react-i18next
- @react-native-async-storage/async-storage
- lodash
๐ค Contributing
1. Fork the repository
2. Create your feature branch (
git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)This project is licensed under the MIT License - see the LICENSE file for details.
Thang Paisen
- GitHub: @thangpaisen
- NPM: react-native-template-paisen
- React Native team for the amazing framework
- React Navigation team for the navigation solution
- Redux Toolkit team for simplified state management
---
โญ If this template helped you, please give it a star! โญ