@sohantalukder/react-native-boilerplate
Advanced tools
A comprehensive React Native template with modern tools and best practices including TypeScript, Navigation, State Management, and UI components
A modern, comprehensive React Native template with best practices, modern tools, and a clean architecture. This template provides everything you need to kickstart your React Native project with TypeScript, navigation, state management, and more.
🌟 Visit our comprehensive documentation website for detailed guides, examples, and best practices.
The documentation includes:
npx @react-native-community/cli@latest init MyAwesomeApp --template @sohantalukder/react-native-boilerplate
cd MyAwesomeApp
The post-init script will automatically:
# iOS
npm run ios
# or
yarn ios
# Android
npm run android
# or
yarn android
Our comprehensive component library follows atomic design principles and provides 20+ pre-built, accessible components:
src/
├── assets/ # Images, fonts, and other static assets
├── config/ # App configuration (API, storage, etc.)
├── modules/ # Feature modules
├── navigation/ # Navigation configuration
├── services/ # API services and external integrations
├── shared/ # Shared components and utilities
│ ├── components/ # Reusable UI components
│ │ ├── atoms/ # Basic components (Button, Input, etc.)
│ │ ├── molecules/# Composite components
│ │ ├── organisms/# Complex components
│ │ └── templates/# Layout components
│ ├── contexts/ # React contexts
│ ├── hooks/ # Custom hooks
│ └── utils/ # Utility functions
├── state/ # Global state management
├── theme/ # Theme configuration and styles
├── translations/ # Internationalization files
└── types/ # TypeScript type definitions
import React from 'react';
import { View } from 'react-native';
import { Button, Text, Card } from '@/shared/components/atoms';
import { Avatar } from '@/shared/components/molecules';
import { SafeScreen } from '@/shared/components/templates';
const ExampleScreen = () => {
return (
<SafeScreen>
<View style={{ flex: 1, padding: 16 }}>
<Text variant="heading1" weight="bold">
Welcome to React Native Boilerplate
</Text>
<Card variant="elevated" padding={20} margin={10}>
<Avatar imageUrl="https://example.com/avatar.jpg" width={60} height={60} />
<Text variant="body1" style={{ marginTop: 12 }}>
This is a sample card with an avatar and text.
</Text>
<Button
text="Get Started"
variant="primary"
onPress={() => console.log('Button pressed!')}
style={{ marginTop: 16 }}
/>
</Card>
</View>
</SafeScreen>
);
};
import { useTheme } from '@/theme';
const ThemedComponent = () => {
const { colors, fonts, typographies } = useTheme();
return (
<View style={{ backgroundColor: colors.background }}>
<Text style={[typographies.heading2, { color: colors.text }]}>
Theme-aware heading
</Text>
<Text style={{ color: colors.primary }}>
Primary colored text
</Text>
</View>
);
};
# Development
npm start # Start Metro bundler
npm run android # Run on Android
npm run ios # Run on iOS
# Building
npm run build:android # Build Android APK
npm run build:ios # Build iOS app
# Code Quality
npm run lint # Run ESLint + Prettier + TypeScript
npm run lint:fix # Fix linting issues
npm run test # Run tests
Development Environment: Follow the React Native environment setup guide
iOS Setup (macOS only):
# Install Ruby dependencies
bundle install
# Install CocoaPods
cd ios && bundle exec pod install
Android Setup:
ANDROID_HOME environment variableEdit src/theme/ files to customize:
Update src/config/ files for:
💡 Tip: For the most up-to-date and comprehensive documentation, visit our Documentation Website
git checkout -b feature/amazing-feature)git commit -m 'Add some amazing feature')git push origin feature/amazing-feature)This project is licensed under the MIT License - see the LICENSE file for details.
Happy coding! 🎉
FAQs
A comprehensive React Native template with modern tools and best practices including TypeScript, Navigation, State Management, and UI components
The npm package @sohantalukder/react-native-boilerplate receives a total of 2 weekly downloads. As such, @sohantalukder/react-native-boilerplate popularity was classified as not popular.
We found that @sohantalukder/react-native-boilerplate demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Docker and Socket have uncovered malicious Checkmarx KICS images and suspicious code extension releases in a broader supply chain compromise.
Product
Stay on top of alert changes with filtered subscriptions, batched summaries, and notification routing built for triage.
Research
Malicious Namastex.ai npm packages appear to replicate TeamPCP-style Canister Worm tradecraft, including exfiltration and self-propagation.