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

Create Command

Create a new Nx workspace with React Native:

Interactive mode (omit parameters to get prompts):

npx nx-react-native-cli@latest create

OR

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

Options:

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

Examples:

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

Add Command

Add React Native to an existing Nx workspace:

Interactive mode (omit parameters to get prompts):

cd my-existing-workspace
npx nx-react-native-cli@latest add

OR

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

Options:

• --fresh - Add without copying template files
• --package-manager <pm> - 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:

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

Core Technologies

• 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

UI & Animation

• 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

Navigation

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

State Management

• 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

Storage & Persistence

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

Data Validation

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

Developer Experience

• 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

Running the Application

To get started with development, follow these simple commands:

# 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.