Obytes React Native Template Setup Guide

obytes-template-setup.md

Obytes React Native Template Setup Guide

This guide covers the essential commands needed to set up and fix common issues when starting a new React Native Expo app using the Obytes template.

Getting Started

Download the Template

Get the Obytes React Native starter template from: https://starter.obytes.com/getting-started/create-new-app/

Required Tools

Before starting, ensure you have these tools installed:

Essential:

• Node.js (v18 or later)
• pnpm - Package manager
• Expo CLI - npm install -g @expo/cli

For Development:

• Expo Go app - For testing on physical devices
• Android Studio - For Android emulator
• Xcode - For iOS simulator (macOS only)

Recommended:

• Yarn or npm as fallback
• VS Code with React Native extensions
• Flipper - For debugging

Android Studio Setup

After installing Android Studio:

1. During installation, make sure to install:

   • Android SDK
   • Android SDK Platform-Tools
   • Android Emulator

2. Set environment variables by adding these to your shell profile (~/.zshrc or ~/.bash_profile):

   export ANDROID_HOME=$HOME/Library/Android/sdk
   export PATH=$PATH:$ANDROID_HOME/emulator
   export PATH=$PATH:$ANDROID_HOME/platform-tools

3. Restart your terminal or run:

   source ~/.zshrc  # or source ~/.bash_profile

4. Verify installation:

   adb version

Initial Setup Commands

1. Install Dependencies

pnpm install

2. Fix Expo Dependencies

npx expo install --fix

3. iOS Setup (macOS only)

cd ios && pod install && cd ..

Common Fixes

Code Quality

# Fix linting issues automatically
pnpm lint --fix

# Check TypeScript types
pnpm type-check

# Run Expo doctor to check for common issues
npx expo doctor

Environment Configuration

Ensure your environment files are properly set up:

• .env.development
• .env.staging
• .env.production

Check that APP_ENV variable is correctly configured in your environment.

Verification Commands

Run All Checks

# Run comprehensive checks (lint + type-check + translations + tests)
pnpm check-all

Start Development

# Start Expo development server
pnpm start

# Or for specific platforms
pnpm ios
pnpm android
pnpm web

Troubleshooting

If you encounter issues:

1. Clear caches:

   npx expo start --clear

2. Reset Metro bundler:

   npx react-native start --reset-cache

3. Reinstall dependencies:

   rm -rf node_modules
   pnpm install

4. iOS specific issues:

   cd ios
   pod deintegrate
   pod install
   cd ..

5. Android specific issues:

   # Check if Android SDK is properly configured
   adb version
   
   # If ANDROID_HOME error persists:
   export ANDROID_HOME=$HOME/Library/Android/sdk
   export PATH=$PATH:$ANDROID_HOME/platform-tools
   
   # Alternative: Use Expo Go instead of building natively
   pnpm start  # Then scan QR with Expo Go app

Notes

• This template uses pnpm as the package manager
• Expo Router is configured for file-based routing
• NativeWind (Tailwind CSS) is set up for styling
• React Query Kit is used for API state management
• i18next is configured for internationalization

Tech Stack Reference

• React Native: 0.76.6
• Expo: ~52.0.26
• TypeScript: Strict typing enabled
• Styling: NativeWind (Tailwind CSS)
• State Management: Zustand + React Query
• Navigation: Expo Router
• Internationalization: i18next