🚀 React Native Paisen Template

> A modern, production-ready React Native template with TypeScript, Redux Toolkit, React Navigation, and many pre-configured features to kickstart your mobile app development.


✨ Features

$3

- 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

$3

- 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

$3

- i18next - Multi-language support
- HTTP Client - Axios-based API service layer
- Async Storage - Persistent local data storage

$3

- ESLint - Code linting and formatting
- Jest - Unit testing framework
- React Native DevSettings - Development utilities
- Metro Config - Optimized bundler configuration

🚀 Quick Start

$3

``bash
npx @react-native-community/cli init MyApp --template react-native-template-paisen
`

Alternative methods:

`bash


Using GitHub URL

npx @react-native-community/cli init MyApp --template https://github.com/thangpaisen/react-native-paisen.git

Using local template

npx @react-native-community/cli init MyApp --template file:///path/to/react-native-template-paisen
`

$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 ios

Clean iOS build

npm run ios:clean
`

$3

`bash


Run on Android emulator/device

npm run android

Build release APK

npm run android:release

Build release AAB

npm run android:aab

Clean Android build

npm run android:clean
`

$3

`bash


Start Metro bundler

npm start

Run tests

npm test

Lint 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`)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Thang Paisen

- GitHub: @thangpaisen
- NPM: react-native-template-paisen

🙏 Acknowledgments

- 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! ⭐