React Native Roadmap 2026-W31

Implement the following React Native chunk for your mobile app: Upgrade VisionCamera to v5.2 and expose the new zoom, exposure, and torch controls on <SkiaCamera>.

Goal: Use the new SkiaCamera control props introduced in VisionCamera 5.2 (https://github.com/mrousavy/react-native-vision-camera/releases/tag/v5.2.0) to let users adjust zoom, exposure, and torch from the React Native layer.

Files to create or modify:

• package.json — bump react-native-vision-camera to ^5.2.0
• screens/CameraScreen.tsx — add slider and toggle components wired to camera props
• components/CameraControls.tsx — new component encapsulating the three controls

Step-by-step implementation:

1. Update dependency: npm install react-native-vision-camera@^5.2.0
2. Run npx pod-install (iOS) and sync Gradle (Android).
3. In screens/CameraScreen.tsx, import zoom, exposure, and torch from state:

const [zoom, setZoom] = useState(1);
const [exposure, setExposure] = useState(0);
const [torch, setTorch] = useState<'off' | 'on'>('off');

<SkiaCamera
  device={device}
  isActive
  zoom={zoom}
  exposure={exposure}
  torch={torch}
/>

4. Create components/CameraControls.tsx with:
   • A Slider (or PanGestureHandler) for zoom (range 1–device.maxZoom)
   • A Slider for exposure (range -1 to +1)
   • A Pressable torch toggle button
5. Pass onZoomChange, onExposureChange, onTorchToggle callbacks from the screen.
6. Smoke-test on both platforms.

Acceptance criteria checklist:

• react-native-vision-camera at 5.2.x in package-lock.json
• Zoom slider updates the live preview without restarting the camera session
• Exposure slider visibly shifts preview brightness
• Torch toggle turns the LED on and off
• No regression on existing camera capture flow

Implement the following React Native chunk for your mobile app: on-device real-time face detection using VisionCamera Frame Output and Skia overlays (reference: https://blog.margelo.com/on-device-face-recognition-react-native).

Goal: Build the first stage of a face-recognition pipeline — face detection — running entirely on device, with no server calls.

Files to create or modify:

• screens/FaceDetectionScreen.tsx — main screen with camera + overlay
• hooks/useFaceDetector.ts — worklet-safe frame output hook
• components/FaceOverlay.tsx — Skia canvas drawing bounding boxes
• FACE_DETECTION.md — short explanation of the pipeline stages

Step-by-step implementation:

1. Install dependencies: npx expo install react-native-vision-camera @shopify/react-native-skia react-native-fast-tflite
2. Download the YuNet model (face_detection_yunet_2023mar.tflite) and place it in assets/models/.
3. Create hooks/useFaceDetector.ts:

import { useFrameOutput } from 'react-native-vision-camera';

export function useFaceDetector(onFaces: (boxes: Rect[]) => void) {
  return useFrameOutput({
    targetResolution: { width: 640, height: 480 },
    pixelFormat: 'yuv',
    dropFramesWhileBusy: true,
    onFrame(frame) {
      'worklet';
      try {
        // run YuNet inference here, call onFaces with bounding boxes
      } finally {
        frame.dispose(); // non-negotiable
      }
    },
  });
}

4. In screens/FaceDetectionScreen.tsx, compose <Camera> with the frame output and a Skia canvas overlay.
5. In components/FaceOverlay.tsx, use <Canvas> + <Rect> from @shopify/react-native-skia to draw bounding boxes.
6. Test on a physical device: confirm bounding boxes appear and track faces at ≥ 15 FPS.

Acceptance criteria checklist:

• Front camera renders bounding boxes around faces in real time
• FPS ≥ 15 on a Galaxy S21-class device (visible via DevTools overlay)
• frame.dispose() is called in finally — no pool exhaustion after 30 seconds
• App does not crash on rapid front/back camera switch
• FACE_DETECTION.md documents the 5 pipeline stages

Implement the following React Native chunk for your mobile app: Google Sign-In using @thoughtbot/react-native-social-auth (reference: https://thoughtbot.com/blog/sign-in-with-google-for-react-native).

Goal: Add a production-ready Google Sign-In flow to the app with minimal boilerplate, using the Expo config plugin to handle native configuration automatically.

Files to create or modify:

• app.config.ts — register the config plugin with OAuth client IDs
• screens/LoginScreen.tsx — add the "Sign in with Google" button
• hooks/useGoogleAuth.ts — encapsulate sign-in, sign-out, and token storage
• constants/auth.ts — export typed auth constants

Step-by-step implementation:

1. Install: npx expo install @thoughtbot/react-native-social-auth expo-secure-store
2. In app.config.ts:

plugins: [
  ['@thoughtbot/react-native-social-auth', {
    googleIosClientId: process.env.GOOGLE_IOS_CLIENT_ID,
    googleAndroidClientId: process.env.GOOGLE_ANDROID_CLIENT_ID,
  }]
]

3. Add the client IDs to .env.local (never commit them).
4. Create hooks/useGoogleAuth.ts:

import { signInWithGoogle } from '@thoughtbot/react-native-social-auth';
import * as SecureStore from 'expo-secure-store';

export function useGoogleAuth() {
  const signIn = async () => {
    const result = await signInWithGoogle();
    if (result.type === 'success') {
      await SecureStore.setItemAsync('accessToken', result.accessToken);
    }
    return result;
  };
  const signOut = async () => {
    await SecureStore.deleteItemAsync('accessToken');
  };
  return { signIn, signOut };
}

5. In screens/LoginScreen.tsx, add a <Pressable> that calls signIn().
6. Run npx expo prebuild then test on simulator and Android device.

Acceptance criteria checklist:

• Native Google sign-in sheet appears on iOS and Android
• Access token is stored in expo-secure-store after successful sign-in
• Sign-out removes the token and navigates back to the login screen
• No OAuth client IDs are committed to the repository
• Works on both iOS Simulator and a physical Android device

Implement the following React Native chunk for your mobile app: migrate from React Navigation 7 to React Navigation 8 + react-native-screens v5 (reference: https://thisweekinreact.com/newsletter/292).

Goal: Upgrade the navigation stack to React Navigation 8 and Screens 5, resolving all breaking changes so the app ships on the latest stable navigation infrastructure.

Files to create or modify:

• package.json — bump navigation packages
• App.tsx / app/_layout.tsx — update NavigationContainer if needed
• Any screen file using deprecated APIs (search for dangerouslyGetParent, addListener('focus', ...) patterns)
• __tests__/navigation.test.ts — update snapshots if needed

Step-by-step implementation:

1. Upgrade packages:

npm install @react-navigation/native@^8.0.0 \
  @react-navigation/native-stack@^8.0.0 \
  react-native-screens@^5.0.0 \
  react-native-safe-area-context@latest

2. Run npx pod-install and sync Gradle.
3. Check the React Navigation v8 migration guide for breaking changes.
4. Fix TypeScript errors: run npx tsc --noEmit and resolve each error.
5. Search for dangerouslyGetParent and replace with useNavigation + useRoute patterns.
6. Run npx jest — fix any failing navigation snapshot tests.
7. Test back gesture on iOS physical device and Android emulator.

Acceptance criteria checklist:

• All navigation packages at v8/v5 in package-lock.json
• Zero TypeScript errors related to navigation types
• npx jest passes with no navigation test failures
• Back swipe gesture works on iOS and Android after upgrade
• No visual regression on any existing screen transition

Implement the following React Native chunk for your mobile app: enforce memoized props using the StableRef type pattern (reference: https://www.jovidecroock.com/blog/referential-stability-types/).

Goal: Use stableref/react to tag memoized callbacks and objects with Stable<T> in the TypeScript type system, turning unmemoized prop bugs into compile-time errors.

Files to create or modify:

• package.json — add stableref dependency
• components/VirtualizedList.tsx — annotate renderItem, keyExtractor, onEndReached as Stable<T>
• contexts/AuthContext.tsx — annotate context value callbacks as Stable<T>
• components/FormField.tsx — annotate onChange, onBlur as Stable<T>
• PERFORMANCE.md — document the pattern
• .eslintrc.js — ensure react-hooks/exhaustive-deps is set to error

Step-by-step implementation:

1. Install: npm install stableref
2. In components/VirtualizedList.tsx:

import type { Stable } from 'stableref';

type Props = {
  renderItem: Stable<(item: Item) => ReactElement>;
  keyExtractor: Stable<(item: Item) => string>;
  onEndReached: Stable<() => void>;
};

3. Run npx tsc --noEmit — fix every location where an unstable value is passed by wrapping with useCallback or useMemo.
4. Repeat for AuthContext.tsx and FormField.tsx.
5. In .eslintrc.js, set 'react-hooks/exhaustive-deps': 'error'.
6. Write PERFORMANCE.md with a before/after example showing how Stable<T> catches the bug at compile time.

Acceptance criteria checklist:

• stableref installed and imported in at least 3 component files
• npx tsc --noEmit passes with zero type errors
• Passing a plain (non-memoized) function to a Stable<T> prop fails the TypeScript build
• All existing tests pass after wrapping values with useCallback/useMemo
• PERFORMANCE.md exists with a clear before/after example