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