Create a React Native app with preconfigured setup
npm install @funtools/create-react-native-app@funtools/store for efficient state handling
bash
npx @funtools/create-react-native-app@latest
`
> Note: Using @latest ensures you always get version 2.0.0 or higher.
$3
Install the package globally for repeated use:
`bash
npm install -g @funtools/create-react-native-app@latest
`
Then run it anywhere:
`bash
create-react-native-app
`
---
π Usage
$3
Simply run the command and follow the interactive prompts:
`bash
npx @funtools/create-react-native-app@latest
`
You'll be prompted to enter your app name.
$3
Your app name must follow these rules:
- β
Start with an uppercase letter
- β
Contain only letters and numbers (no spaces, hyphens, or special characters)
- β Examples of invalid names: my-app, my_app, myApp, 123App
- β
Examples of valid names: MyApp, MyAwesomeApp, ReactApp123
$3
`bash
$ npx @funtools/create-react-native-app@latest
Welcome to @funtools
Thanks for using @funtools/create-react-native-app
? What is your app name? βΊ MyAwesomeApp
π Initializing React Native app: MyAwesomeApp
Initializing templates...
Installing dependencies...
Installing dev dependencies...
Remove @react-native/new-app-screen
β
App setup complete
`
---
π¦ What's Included
Your new React Native app comes fully configured with a modern tech stack:
$3
| Package | Version | Purpose |
| ---------------------------------- | ------- | ----------------------------- |
| React | Latest | UI library |
| React Native | Latest | Mobile framework |
| @react-navigation/native | Latest | Navigation framework |
| @react-navigation/native-stack | Latest | Stack navigator |
| NativeWind | Latest | Tailwind CSS for React Native |
| @funtools/store | Latest | State management |
| Lucide React Native | Latest | Icon library |
| React Native SVG | Latest | SVG support |
| React Native Gesture Handler | Latest | Touch gesture handling |
| React Native Safe Area Context | Latest | Safe area support |
| React Native Screens | Latest | Native navigation primitives |
$3
| Tool | Purpose |
| -------------------------------- | ------------------------------- |
| TypeScript | Type safety and better DX |
| ESLint | Code linting and quality checks |
| Prettier | Code formatting |
| Jest | Unit testing framework |
| Babel | JavaScript compiler |
| babel-plugin-module-resolver | Clean import paths |
| Tailwind CSS | Utility-first CSS framework |
---
π Getting Started with Your New App
After creating your app, navigate to the directory and start developing:
`bash
Navigate to your app directory
cd MyAwesomeApp
Install any additional dependencies (if needed)
npm install
Start the Metro bundler
npm start
`
$3
`bash
Run on Android (requires Android Studio and emulator/device)
npm run android
Run on iOS (requires Xcode and simulator/device - macOS only)
npm run ios
`
$3
`bash
Run tests
npm test
Run tests in watch mode
npm test -- --watch
Lint your code
npm run lint
Type check with TypeScript
npx tsc --noEmit
Start Metro bundler with cache reset
npm start -- --reset-cache
`
---
π Project Structure
`
MyAwesomeApp/
βββ android/ # Android native code and configuration
βββ ios/ # iOS native code and configuration
βββ src/ # Your app source code (components, screens, etc.)
βββ node_modules/ # Installed dependencies
βββ .git/ # Git repository
βββ .gitignore # Git ignore configuration
βββ App.tsx # Main app component (removed by @funtools)
βββ index.js # Entry point
βββ package.json # Project metadata and dependencies
βββ tsconfig.json # TypeScript configuration
βββ tailwind.config.js # Tailwind CSS configuration
βββ babel.config.js # Babel configuration
βββ metro.config.js # Metro bundler configuration
βββ jest.config.js # Jest testing configuration
βββ .eslintrc.js # ESLint configuration
βββ .prettierrc # Prettier configuration
βββ README.md # Project documentation
`
---
π§ Configuration
$3
TypeScript is preconfigured with React Native types and strict mode. Configuration can be found in tsconfig.json.
$3
Code quality tools are set up with React Native best practices. Run npm run lint to check your code.
$3
NativeWind is configured and ready to use. You can use Tailwind utility classes directly in your React Native components:
`jsx
Hello World
`
$3
Babel module resolver is configured for clean imports. You can customize path aliases in babel.config.js.
---
β Troubleshooting
$3
Error: App name must start with an uppercase letter and contain only letters and numbers
Solution: Ensure your app name:
- Starts with an uppercase letter (e.g., MyApp, not myApp)
- Contains only letters and numbers (no spaces, hyphens, underscores, or special characters)
$3
Error: npm install fails or packages have conflicts
Solution: Try clearing npm cache and reinstalling:
`bash
Clear npm cache
npm cache clean --force
Remove node_modules and lock file
rm -rf node_modules package-lock.json
Reinstall dependencies
npm install
`
Windows users: Use rmdir /s /q node_modules and del package-lock.json instead.
$3
Error: Metro bundler shows stale cache errors
Solution: Reset the Metro bundler cache:
`bash
Start with cache reset
npm start -- --reset-cache
Or manually clear cache
rm -rf $TMPDIR/metro-*
rm -rf $TMPDIR/haste-*
`
$3
Common issues:
- Ensure Android Studio is installed
- Set up ANDROID_HOME environment variable
- Accept all SDK licenses: sdkmanager --licenses
- Use JDK 17 (React Native 0.73+)
$3
Common issues:
- Ensure Xcode is installed and up to date
- Install CocoaPods: sudo gem install cocoapods
- Run pod install in the ios/ directory
- Clean build folder in Xcode: Product > Clean Build Folder
$3
If you're using an older version:
Ensure you're using version 2.0.0 or higher:
`bash
Check installed version
npm ls -g @funtools/create-react-native-app
Update to latest version
npm install -g @funtools/create-react-native-app@latest
Or use npx with @latest tag
npx @funtools/create-react-native-app@latest
`
---
π€ Contributing
Contributions are welcome! If you'd like to improve this project:
1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add 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.
---
π¬ Support
Having issues or questions?
- π Report bugs: Open an issue on the GitHub repository
- π‘ Feature requests: Submit an issue with the enhancement` label