Mastering JavaScript Best Practices in Expo React Native Projects

## Kickstarting Your Expo React Native Project **Problem**: Starting a new React Native project often leads to inconsistent setups, outdated dependencies, and scalability issues right from the outset. **Solution**: Leverage Expo's CLI with a modern template that includes TypeScript, ESLint, Prettier, and Husky out of the box. Run `npx create-expo-app@latest --template` and select the TypeScript template for a solid foundation. **Outcome**: You get a production-ready boilerplate that enforces code quality and best practices from day one, saving hours of manual configuration. For reference, check the official [Expo repository](https://github.com/expo/expo) which powers these templates. Here's a quick setup command: ```bash npx create-expo-app@latest my-app --template ``` Choose the Expo TypeScript template, then `cd my-app` and `npx expo install` to sync dependencies. ## Enforcing Code Quality with Linting and Formatting **Problem**: In team environments or long-term projects, code styles diverge, leading to merge conflicts, bugs, and maintenance nightmares. **Solution**: Integrate ESLint with React Native-specific rules, Prettier for formatting, Husky for Git hooks, and lint-staged to lint only staged files. Expo's recommended config is available in their [FYI repo](https://github.com/expo/fyi), which includes `.eslintrc.js`, `prettier.config.js`, and package.json scripts. Install the tools: ```bash npx expo install --fix npm install --save-dev eslint-config-expo @expo/eslint-config-prettier husky lint-staged ``` Configure Husky: ```bash npx husky-init && npm install echo 'npx lint-staged' > .husky/pre-commit ``` Add to package.json: ```json { "lint-staged": { "*.{js,jsx,ts,tsx}": [ "eslint --fix", "prettier --write" ] }, "scripts": { "lint": "eslint .", "format": "prettier --write ." } } ``` **Outcome**: Every commit runs linting and formatting automatically, ensuring consistent, error-free code. This setup catches issues early, as seen in [Expo Router's codebase](https://github.com/expo/router), promoting cleaner collaboration. ## Organizing Your Project Structure **Problem**: Flat folder structures become chaotic as apps grow, making navigation and maintenance tedious. **Solution**: Adopt a feature-based folder structure: `(tabs)/`, `app/`, `components/`, `hooks/`, `utils/`, `constants/`. Use Expo Router's file-based routing in `app/` for screens and layouts. Example structure: ``` my-app/ ├── app/ │ ├── (tabs)/ │ │ ├── index.tsx │ │ └── profile.tsx │ ├── _layout.tsx │ └── +not-found.tsx ├── components/ │ └── ui/ ├── hooks/ ├── lib/ ├── utils/ └── constants/ ``` **Outcome**: Scalable architecture where features are self-contained. Developers can locate code intuitively, reducing onboarding time. Expo Router handles routing seamlessly—check their [GitHub repo](https://github.com/expo/router) for advanced patterns like nested layouts. Practical example for a tab layout in `app/(tabs)/_layout.tsx`: ```tsx import { Tabs } from 'expo-router'; export default function TabLayout() { return ( <Tabs> <Tabs.Screen name="index" options={{ title: 'Home' }} /> <Tabs.Screen name="profile" options={{ title: 'Profile' }} /> </Tabs> ); } ``` ## Navigation with Expo Router **Problem**: Traditional navigation libraries like React Navigation add boilerplate and complexity in Expo projects. **Solution**: Switch to Expo Router, the file-system based router integrated with Expo. It supports tabs, stacks, modals, and deep linking without extra config. Key steps: 1. Install: `npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar` 2. Update `app.json` with new scheme. 3. Create `app/_layout.tsx` as root layout. **Outcome**: URL-based navigation enables web-like routing, shareable deep links, and easier testing. Real-world apps like those in Expo's ecosystem scale effortlessly—explore examples in the [Expo Router repo](https://github.com/expo/router). ## Leveraging TypeScript for Robust Code **Problem**: JavaScript's dynamic typing leads to runtime errors that TypeScript can prevent. **Solution**: Even for JS-focused projects, enable TypeScript incrementally. Rename files to `.tsx`, add `tsconfig.json`, and use Expo's strict config. ```bash npm install --save-dev typescript @types/react @types/react-native npx tsc --init ``` Extend `tsconfig.json` with Expo presets. **Outcome**: IDE autocompletion, refactoring safety, and fewer bugs. Many Expo templates include it by default, aligning with production standards. ## Performance with React Native Reanimated **Problem**: Standard animations stutter on low-end devices due to JS thread blocking. **Solution**: Use Reanimated 3 for native-driven animations. Install `npx expo install react-native-reanimated` and add plugin to `babel.config.js`. Example gesture handler: ```tsx import { Gesture, GestureDetector } from 'react-native-gesture-handler'; import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated'; const gesture = Gesture.Pan().onUpdate((e) => { // UI thread safe }); ``` **Outcome**: 60fps buttery animations across devices. Essential for interactive UIs like drawers or lists. ## State Management Strategies **Problem**: Prop drilling and local state explode in complex apps. **Solution**: Start with React Context + useReducer for global state. For larger apps, integrate Zustand or Jotai—lightweight alternatives to Redux. Example with Zustand: ```tsx import { create } from 'zustand'; const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), })); ``` **Outcome**: Predictable state without boilerplate, keeping bundles small. ## Testing and CI/CD **Problem**: Untested code leads to regressions in mobile deploys. **Solution**: Use Jest + React Native Testing Library. Set up EAS for builds: `eas build --platform all`. **Outcome**: Reliable releases via Expo's [EAS CLI](https://github.com/expo/eas-cli). ## Additional Tips for Production - Use `expo-dev-client` for custom native code. - Optimize images with `expo-image`. - Monitor with Sentry or Expo's tools. This holistic approach, drawn from Expo's ecosystem, ensures your JS React Native apps are performant, maintainable, and team-friendly. Dive deeper via the linked repos for evolving best practices. <div style="text-align: center; margin-top: 2rem;"> <a href="https://cursor.directory/expo-react-native-javascript-best-practices" target="_blank" rel="noopener noreferrer" class="view-full-resource-btn" style="display: inline-block; background-color: #f97316; color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; transition: background-color 0.2s;">View Full Resource</a> </div>