React Native Mobile App Starter with NX


📦 Introduction

A comprehensive React Native mobile application starter kit built with Nx workspace. This package provides a carefully curated set of tools and libraries to streamline your mobile app development process with React Native 0.83.1 and the New Architecture.

🛠 Usage

$3

Create a new Nx workspace with React Native:

Interactive mode (omit parameters to get prompts):
``bash
npx nx-react-native-cli@latest create
`

OR

`bash
npx nx-react-native-cli@latest create [workspace_name] [bundle_id]
`

Options:
- --fresh - Create without copying template files
- --nx-version - Specify Nx version (default: 21.2.2)
- --package-manager - Package manager to use: yarn or npm (default: yarn)
- --skip-install - Skip package install
- --skip-configs - Skip prettier, eslint, and husky configs

Examples:
`bash
npx nx-react-native-cli@latest create MyApp com.company.myapp
npx nx-react-native-cli@latest create MyApp com.company.myapp --skip-configs
npx nx-react-native-cli@latest create MyApp com.company.myapp --package-manager npm
`

$3

Add React Native to an existing Nx workspace:

Interactive mode (omit parameters to get prompts):
`bash
cd my-existing-workspace
npx nx-react-native-cli@latest add
`

OR

`bash
npx nx-react-native-cli@latest add [app_name] [bundle_id]
`


Options:
- --fresh - Add without copying template files
- --package-manager - Package manager to use: yarn or npm (default: yarn)
- --skip-install - Skip package install
- --skip-configs - Skip prettier, eslint, and husky configs

Note: Automatically detects NX version from workspace package.json

Examples:
`bash
cd my-existing-workspace
npx nx-react-native-cli@latest add MyApp com.company.myapp
npx nx-react-native-cli@latest add MyApp com.company.myapp --skip-configs
npx nx-react-native-cli@latest add MyApp com.company.myapp --package-manager npm
`

🚀 Features

$3

- Yarn: Fast, reliable, and secure dependency management
- React Native 0.83.1: Latest version with New Architecture support
- TypeScript: Strongly typed JavaScript for better code quality
- Nx Workspace: Powerful monorepo tooling for scalable development
- TailwindCSS via TWRNC: Utility-first CSS framework for fast UI development

$3

- React Native Reanimated: Powerful animations for smooth user experiences
- React Native Gesture Handler: Fluid gesture-based interactions
- React Native SVG: SVG support for vector graphics
- @shopify/react-native-skia: High-performance 2D graphics
- @gorhom/bottom-sheet: Customizable bottom sheet component

$3

- React Navigation v7: Complete navigation solution with native stack, material top tabs, and stack navigators

$3

- Zustand: Simple, fast state management
- Jotai: Primitive and flexible state management
- React Query (TanStack Query): Data fetching and server state management
- React Hook Form: Performant, flexible form handling

$3

- React Native MMKV: High-performance key-value storage
- TanStack Query Persistence: Persist and rehydrate query cache

$3

- Zod: TypeScript-first schema validation
- @hookform/resolvers: Connect Zod with React Hook Form

$3

- ESLint & Prettier: Code quality and formatting
- Jest & Testing Library: Comprehensive testing setup
- Husky: Git hooks for code quality
- Fastlane: Automated deployment for iOS and Android

🚀 Getting Started

$3

To get started with development, follow these simple commands:

`bash


Start the Metro bundler

yarn serve:mobile

Build and run on Android

yarn android

Open the iOS project in Xcode for building and running

yarn xcode
`

These commands will help you:
- serve:mobile: Start the Metro bundler which compiles your JavaScript code
- android: Build and install the app on an Android device or emulator
- xcode`: Open the iOS project in Xcode where you can build and run on iOS simulators or physical devices

📄 License

MIT

🙏 Acknowledgements

This project uses various open-source libraries and tools. We're grateful to the maintainers and contributors of these projects.