React Native Starter Kit
A comprehensive React Native starter template that accelerates mobile app development with modern tools and best practices.
📱 Features
- TypeScript Support: Full TypeScript integration for better development experience
- Navigation: React Navigation v6 with stack, tab, and drawer navigators
- State Management: Redux Toolkit for predictable state management
- Offline Support: AsyncStorage integration with offline-first architecture
- API Integration: Axios setup with request/response interceptors
- Authentication: JWT-based authentication flow
- Push Notifications: Firebase Cloud Messaging integration
- Code Quality: ESLint, Prettier, and Husky for code quality
- Testing: Jest and React Native Testing Library setup
🏗️ What's Included
Core Architecture
- Clean Architecture principles
- Feature-based folder structure
- Dependency injection
- Environment configuration
- Error boundaries
UI Components
- Custom component library
- Theme system with dark mode support
- Responsive design utilities
- Icon system integration
- Form components with validation
Development Tools
- Hot reloading
- Debug menu
- Performance monitoring
- Bundle analyzer
- Development scripts
🚀 Getting Started
Prerequisites
- Node.js 16+
- npm or yarn
- React Native development environment
- iOS Simulator or Android Emulator
Installation
``bash
Clone the repository
git clone https://github.com/geniusdynamics/react-native-starter.git
cd react-native-starter
Install dependencies
npm installFor iOS
cd ios && pod install && cd ..Start Metro bundler
npm startRun on iOS
npm run iosRun on Android
npm run android `
📂 Project Structure
`
react-native-starter/
├── src/
│ ├── components/
│ │ ├── common/
│ │ ├── forms/
│ │ └── ui/
│ ├── screens/
│ │ ├── auth/
│ │ ├── home/
│ │ └── profile/
│ ├── navigation/
│ ├── store/
│ │ ├── slices/
│ │ └── index.ts
│ ├── services/
│ │ ├── api/
│ │ └── storage/
│ ├── utils/
│ ├── hooks/
│ ├── constants/
│ └── types/
├── android/
├── ios/
├── __tests__/
├── e2e/
├── .env.example
├── package.json
├── app.json
└── README.md
`
🔧 Key Configurations
Environment Setup
`javascript
// .env
API_BASE_URL=https://api.example.com
FIREBASE_API_KEY=your-firebase-key
ONESIGNAL_APP_ID=your-onesignal-id
`
Theme Configuration
`typescript
// src/constants/theme.ts
export const theme = {
colors: {
primary: '#3b82f6',
secondary: '#64748b',
success: '#10b981',
error: '#ef4444',
background: '#ffffff',
surface: '#f8fafc',
},
spacing: {
xs: 4,
sm: 8,
md: 16,
lg: 24,
xl: 32,
},
typography: {
h1: { fontSize: 32, fontWeight: 'bold' },
h2: { fontSize: 24, fontWeight: 'bold' },
body: { fontSize: 16, fontWeight: 'normal' },
},
};
`
📱 Core Features
Navigation
`typescript
// Stack Navigation
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
function AppNavigator() {
return (
);
}
`
State Management
`typescript
// Redux Toolkit Slice
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
const authSlice = createSlice({
name: 'auth',
initialState: { user: null, token: null },
reducers: {
setUser: (state, action: PayloadAction) => {
state.user = action.payload;
},
setToken: (state, action: PayloadAction) => {
state.token = action.payload;
},
},
});
export const { setUser, setToken } = authSlice.actions;
`
API Integration
`typescript
// API Service
import axios from 'axios';
const api = axios.create({
baseURL: process.env.API_BASE_URL,
timeout: 10000,
});
// Request interceptor
api.interceptors.request.use(
(config) => {
const token = store.getState().auth.token;
if (token) {
config.headers.Authorization =
Bearer ${token};
}
return config;
},
(error) => Promise.reject(error)
);
// Response interceptor
api.interceptors.response.use(
(response) => response,
(error) => {
if (error.response?.status === 401) {
// Handle token refresh or logout
}
return Promise.reject(error);
}
);
`
🎨 UI Components
Button Component
`typescript
// src/components/ui/Button.tsx
import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';
interface ButtonProps {
title: string;
onPress: () => void;
variant?: 'primary' | 'secondary' | 'outline';
disabled?: boolean;
}
export const Button: React.FC = ({
title,
onPress,
variant = 'primary',
disabled = false,
}) => {
return (
${variant}Text]]}>{title}
);
};
`
Form Components
`typescript
// src/components/forms/Input.tsx
import React from 'react';
import { TextInput, View, Text, StyleSheet } from 'react-native';
interface InputProps {
label: string;
value: string;
onChangeText: (text: string) => void;
error?: string;
placeholder?: string;
secureTextEntry?: boolean;
}
export const Input: React.FC = ({
label,
value,
onChangeText,
error,
placeholder,
secureTextEntry = false,
}) => {
return (
{label}
{error} }
);
};
`
🧪 Testing
`bash
Run unit tests
npm test
Run tests in watch mode
npm run test:watch
Run tests with coverage
npm run test:coverage
Run E2E tests
npm run e2e
`
🚀 Deployment
iOS Deployment
`bash
Build for TestFlight
npm run build:ios
Build for App Store
npm run build:ios:release
`
Android Deployment
`bash
Build APK
npm run build:android
Build AAB (for Google Play)
npm run build:android:bundle
`
📊 Performance Optimization
- Code Splitting: Automatic code splitting for better performance
- Image Optimization: Automatic image compression and optimization
- Bundle Analysis: Bundle analyzer to identify large dependencies
- Memory Management: Proper cleanup and memory management
- Caching: Intelligent caching strategies for better UX
🔒 Security Features
- Certificate Pinning: SSL certificate pinning for API calls
- Biometric Authentication: Fingerprint/Face ID support
- Secure Storage: Encrypted storage for sensitive data
- Jailbreak Detection: Basic jailbreak/root detection
- Code Obfuscation: JavaScript code obfuscation for release builds
📈 Analytics & Monitoring
- Firebase Analytics: User behavior tracking
- Crash Reporting: Automatic crash reporting and analysis
- Performance Monitoring: App performance metrics
- User Feedback: In-app feedback collection
🤝 Contributing
We welcome contributions! Please follow these steps:
Fork the repository
Create a feature branch ( git checkout -b feature/amazing-feature`)
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
🙏 Acknowledgments
- React Native team for the amazing framework
- Redux team for state management
- All contributors and the React Native community
📞 Support
- Documentation: docs.geniusdynamics.com/react-native-starter
- Issues: GitHub Issues
- Discussions: GitHub Discussions
_Built with 📱 by Genius Dynamics_