React Native Roadmap 2026-W26

Implement the following React Native chunk for your mobile app:

Goal: Add CSS pseudo-selector animation states (:hover, :active, :focus) to interactive UI components using Reanimated 4.5.

Files to create or modify:

• package.json — bump react-native-reanimated to ^4.5.0
• components/ui/Button.tsx — rewrite interaction states using Reanimated CSS pseudo-selectors
• components/ui/Card.tsx — add :hover and :active states
• app/(tabs)/index.tsx (or equivalent) — add a demo screen showcasing both components

Step-by-step instructions:

1. Run npx expo install react-native-reanimated@^4.5.0
2. In Button.tsx, import Animated from react-native-reanimated and replace the Pressable manual state tracking with a single AnimatedPressable component using the new CSS-style style prop supporting :active and :hover pseudo-selectors.
3. Define styles using StyleSheet.create where :active reduces scale to 0.97 and changes backgroundColor opacity.
4. In Card.tsx, apply :hover to elevate the shadow and scale to 1.02.
5. Create a simple demo screen to showcase both components.
6. Run npx expo start and test on iOS Simulator, Android Emulator, and Web.

Acceptance criteria checklist:

• Tapping the button triggers a smooth :active scale/opacity transition
• Hovering over a card on Web/iPad shows the elevated shadow state
• No onPressIn/onPressOut manual state management remains
• Animations run at 60 fps (no JS thread drops)
• Existing Reanimated animations pass a smoke test

Implement the following React Native chunk for your mobile app:

Goal: Create a real-time camera frame processor using VisionCamera v5 that reads per-frame pixel data and displays a computed value in the UI.

Files to create or modify:

• package.json — ensure react-native-vision-camera@^5.0.11 and react-native-worklets-core are installed
• screens/CameraScreen.tsx — main camera screen with live overlay
• hooks/useFrameBrightnessProcessor.ts — frame processor worklet logic
• app.json / Info.plist / AndroidManifest.xml — camera permission configuration

Step-by-step instructions:

1. Install: npx expo install react-native-vision-camera react-native-worklets-core
2. Add camera permissions in app.json (iOS NSCameraUsageDescription, Android CAMERA).
3. In useFrameBrightnessProcessor.ts, create a useFrameProcessor worklet:
   • Check frame.hasPixelBuffer (iOS) or frame.hasNativeBuffer (Android) before processing
   • Compute an average luma value by sampling pixel bytes
   • Write the result to a useSharedValue<number> via runOnJS
4. In CameraScreen.tsx, render <Camera> with frameProcessor prop, and display the shared value using an Animated.Text connected via useAnimatedProps.
5. Test on a physical device for real-time performance.

Acceptance criteria checklist:

• Camera preview renders without lag
• Brightness value updates at ≥30 fps
• hasPixelBuffer / hasNativeBuffer guard prevents crashes on unsupported frames
• Worklet runs off the JS thread (verified with Flipper / Xcode Instruments)
• App does not crash on permission denial

Implement the following React Native chunk for your mobile app:

Goal: Create a small iOS Home Screen widget using the stable expo-widget API from Expo SDK 56 that displays dynamic app data.

Files to create or modify:

• package.json — ensure expo@^56.0.0 and expo-widget are installed
• widget/SmallWidget.tsx — widget UI component (SwiftUI-like declarative syntax via Expo Widget API)
• widget/index.ts — widget entry point registering the widget family
• app/(tabs)/index.tsx — trigger widget data refresh on app foreground
• eas.json — ensure iOS build profile targets iOS 17+

Step-by-step instructions:

1. Run npx expo install expo-widget and ensure SDK is ^56.0.0.
2. Create widget/SmallWidget.tsx using WidgetView, Text, and Link from expo-widget.
3. Define a TimelineEntry interface with the data shape your widget will display.
4. Implement a getTimeline function that fetches data from shared UserDefaults/App Group and returns an array of entries.
5. Register the widget in widget/index.ts with registerWidget({ families: ['small'], component: SmallWidget }).
6. In the main app, call Widget.reloadAll() when relevant data changes.
7. Build with eas build --platform ios --profile preview and install on device/simulator.

Acceptance criteria checklist:

• Widget appears in the iOS widget picker
• Small widget renders the correct data shape
• Tapping the widget opens the correct in-app screen
• Widget.reloadAll() triggers a visible data refresh within 60 seconds
• No crash on cold widget load (no app running in background)

Implement the following React Native chunk for your mobile app:

Goal: Add Maestro E2E test flows integrated with EAS Workflows and activate the EAS Maestro Insights dashboard for test monitoring.

Files to create or modify:

• .maestro/onboarding.yaml — Maestro flow for the onboarding screen
• .maestro/login.yaml — Maestro flow for the login flow
• .eas/workflows/pr-checks.yml — EAS Workflow definition that runs Maestro on PRs
• eas.json — ensure a preview build profile exists for simulator builds

Step-by-step instructions:

1. Install Maestro: curl -Ls "https://get.maestro.mobile.dev" | bash
2. Create .maestro/onboarding.yaml: use launchApp, assertVisible, tapOn, and assertVisible to test the onboarding screens.
3. Create .maestro/login.yaml: input credentials, tap login, assert the home screen is visible.
4. In .eas/workflows/pr-checks.yml, add a maestro job step pointing to your .maestro/ folder, targeting the preview build artifact.
5. Set retries: 2 in the EAS Workflow maestro step to leverage the faster-retry feature.
6. Push a PR and verify the Workflow runs in the EAS dashboard.
7. Navigate to EAS → your project → Testing → Insights to verify the dashboard is populated.

Acceptance criteria checklist:

• Both .yaml flows pass locally with maestro test .maestro/onboarding.yaml
• EAS Workflow triggers automatically on PR creation
• Test results appear in the EAS Insights tab after the first run
• Failed/flaky tests are highlighted with a distinct status
• Total CI time for both flows is under 5 minutes

Implement the following React Native chunk for your mobile app:

Goal: Refactor a composite component to use the upcoming <Fragment ref> API (React 19.3 canary) and document the pattern for the team.

Files to create or modify:

• package.json — add react@canary override in a feature branch only
• components/ui/AnimatedList.tsx — refactor to remove wrapper <View> using Fragment ref
• components/ui/__tests__/AnimatedList.test.tsx — unit test verifying ref access
• docs/fragment-ref.md — documentation of the pattern

Step-by-step instructions:

1. Create a new git branch: git checkout -b explore/fragment-ref
2. Install React canary: npm install react@canary react-dom@canary --save-exact
3. Identify a component that wraps children in a <View ref={ref}> solely to expose a measurement or layout ref.
4. Refactor: replace <View ref={ref}> with <Fragment ref={ref}>. TypeScript: type the ref as React.RefObject<React.FragmentInstance>.
5. Access the first child via ref.current.children[0] for measurements.
6. Write a test using renderHook + useRef<React.FragmentInstance>() to assert ref.current is not null after mount.
7. Create docs/fragment-ref.md with a before/after code example and a note that this targets React 19.3.
8. Open a PR titled [RFC] Explore Fragment ref API for component composition.

Acceptance criteria checklist:

• Component renders without the extra wrapper <View> node
• ref.current is a FragmentInstance after mount
• ref.current.children[0] resolves to the first child native node
• Unit test passes with jest --testPathPattern=AnimatedList
• docs/fragment-ref.md is committed and explains the pattern clearly
• Branch is mergeable with no TypeScript errors