Mastering JavaScript Best Practices in Expo React Native Projects

Elevate your Expo React Native apps with proven JavaScript best practices. From project setup to code quality and performance, this guide delivers actionable strategies for scalable, maintainable mobile development.

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 which powers these templates.

Here's a quick setup command:

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, which includes .eslintrc.js, prettier.config.js, and package.json scripts.

Install the tools:

npx expo install --fix
npm install --save-dev eslint-config-expo @expo/eslint-config-prettier husky lint-staged

Configure Husky:

npx husky-init && npm install
echo 'npx lint-staged' > .husky/pre-commit

Add to package.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, 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 for advanced patterns like nested layouts.

Practical example for a tab layout in app/(tabs)/_layout.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.

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.

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:

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:

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.

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.