React Native Roadmap 2026-W28

Implement the following React Native chunk for your mobile app: Integrate a gesture-driven calendar using super-calendar.

Goal: Add a pinch-to-zoom, gesture-driven month/week/day calendar backed by Reanimated shared values. Zero re-renders during zoom animations.

Files to create/modify:

• src/components/Calendar/AppCalendar.tsx — new wrapper component
• src/screens/CalendarScreen.tsx — consume <AppCalendar />
• package.json — add super-calendar, ensure react-native-reanimated and react-native-gesture-handler are present

Step-by-step:

1. npm install super-calendar (check peer deps and install any missing ones).
2. Wrap your app entry with <GestureHandlerRootView> if not already done.
3. Create AppCalendar.tsx that renders <Calendar mode="week" /> from super-calendar.
4. Pass an events array of { id, title, start, end, color } objects.
5. Implement onDragEvent={(event) => { if (event.id === 'locked') return false; updateEvent(event); }}.
6. Implement onResizeEvent and onCreateEvent callbacks.
7. Enable the pinch gesture: it is on by default — verify it works on a physical device.
8. Confirm with React DevTools Profiler that no React re-renders fire during a pinch gesture.

Acceptance criteria checklist:

• Pinch gesture zooms week grid at 60 fps on a mid-range device
• Dragging an event updates state correctly
• Dragging a locked event returns it to its original position
• Navigating 12 months via swipe stays under 16 ms frame time in Profiler
• No Metro bundler errors on both iOS and Android

Implement the following React Native chunk for your mobile app: Nested drawer + bottom tabs navigation with Expo Router file-system conventions.

Goal: Create a (drawer)/(tabs) layout where a swipeable drawer wraps themed bottom tabs, following Expo Router's file-system routing pattern.

Files to create/modify:

• app/(drawer)/_layout.tsx — Drawer layout
• app/(drawer)/(tabs)/_layout.tsx — Tabs layout nested inside drawer
• app/(drawer)/(tabs)/index.tsx — Home tab screen
• app/(drawer)/(tabs)/explore.tsx — Second tab screen
• app/(drawer)/settings.tsx — Drawer-only screen (not a tab)
• package.json — ensure @react-navigation/drawer, react-native-gesture-handler, react-native-reanimated are installed

Step-by-step:

1. Install dependencies: npx expo install @react-navigation/drawer react-native-gesture-handler react-native-reanimated.
2. Create app/(drawer)/_layout.tsx:

   import { Drawer } from 'expo-router/drawer';
   export default function DrawerLayout() {
     return <Drawer screenOptions={{ headerShown: false }} />;
   }
   

3. Create app/(drawer)/(tabs)/_layout.tsx:

   import { Tabs } from 'expo-router';
   export default function TabsLayout() {
     return (
       <Tabs screenOptions={{ tabBarActiveTintColor: '#6200ee' }}>
         <Tabs.Screen name="index" options={{ title: 'Home' }} />
         <Tabs.Screen name="explore" options={{ title: 'Explore' }} />
       </Tabs>
     );
   }
   

4. Add app/(drawer)/settings.tsx as a drawer-only route.
5. Verify gesture handler root view is at the app root (app/_layout.tsx).
6. Test on a physical iOS and Android device: swipe from left to open drawer, swipe horizontally on tabs.
7. Enable dark mode on the device and confirm both navigators update their theme.

Acceptance criteria checklist:

• Left swipe opens drawer; tab swipe only activates when not near the left edge
• Tabs render correctly with icons and active color
• Settings screen reachable from drawer but absent from tab bar
• Dark mode applied consistently across drawer header and tab bar
• No TypeScript route type errors (expo-router typed routes enabled)

Implement the following React Native chunk for your mobile app: Configure Maestro MCP so a Claude Code agent can drive and test your app on a live device.

Goal: Give your AI coding agent eyes and hands on the running app — letting it tap, verify screens, and save repeatable E2E tests — using Maestro MCP.

Files to create/modify:

• .maestro/login.yaml — first E2E test flow
• package.json (optionally) — add a "test:e2e" script

Step-by-step:

1. Install Maestro: curl -Ls "https://get.maestro.mobile.dev" | bash and verify with maestro --version.
2. Start your app on an iOS Simulator or Android Emulator.
3. Run maestro studio to inspect the view hierarchy and find element IDs/text for your login screen.
4. Create .maestro/login.yaml:

   appId: com.yourapp.bundle
   ---
   - launchApp
   - tapOn: 'Email'
   - inputText: 'test@example.com'
   - tapOn: 'Password'
   - inputText: 'password123'
   - tapOn: 'Sign In'
   - assertVisible: 'Welcome'
   - takeScreenshot: login-success
   

5. Run maestro test .maestro/login.yaml and confirm it passes.
6. Add Maestro MCP to Claude Code: claude mcp add maestro -- maestro mcp.
7. In a Claude Code session, ask: "Run the Maestro login flow and tell me what you see on screen."
8. Confirm the agent calls the MCP tool, drives the simulator, and reports back.

Acceptance criteria checklist:

• maestro test .maestro/login.yaml passes end-to-end without manual intervention
• maestro mcp server appears in Claude Code MCP list
• Agent can read the screen hierarchy via MCP and identify UI elements
• Agent-triggered flow produces a screenshot saved to the Maestro output folder
• YAML flow is committed to version control for future CI use

Implement the following React Native chunk for your mobile app: Add on-device Android AI using @react-native-ai/adk and the Vercel AI SDK.

Goal: Build a local AI chat feature on Android that uses Gemini Nano on-device via Google's ADK, wrapped as a Vercel AI SDK provider — no internet connection required during inference.

Files to create/modify:

• src/ai/adk-provider.ts — configure the ADK provider
• src/screens/OnDeviceAIScreen.tsx — chat UI using useChat
• package.json — add @react-native-ai/adk and ai

Step-by-step:

1. Install: npm install @react-native-ai/adk ai.

2. Create src/ai/adk-provider.ts:

   import { createADK } from '@react-native-ai/adk';
   export const adk = createADK();
   export const model = adk('gemini-nano');
   

3. Create OnDeviceAIScreen.tsx using the useChat hook:

   import { useChat } from 'ai/react';
   import { model } from '../ai/adk-provider';
   
   export default function OnDeviceAIScreen() {
     const { messages, input, handleInputChange, handleSubmit } = useChat({ model });
     return (
       <View>
         <FlatList data={messages} renderItem={({ item }) => <Text>{item.content}</Text>} />
         <TextInput value={input} onChangeText={handleInputChange} />
         <Button title="Send" onPress={handleSubmit} />
       </View>
     );
   }
   

4. Enable airplane mode on the Android device.

5. Run the app, type a prompt, and verify inference completes locally.

6. Add a loading indicator while the model is generating.

7. Add an error boundary that catches ModelUnavailableError from the ADK.

Acceptance criteria checklist:

• App builds and runs on Android without native compilation errors
• Inference works with airplane mode enabled (fully offline)
• First token appears within 2 seconds on a Pixel 6+
• Text streams progressively as tokens are generated
• Error boundary shows a friendly message if model is not available on device

Implement the following React Native chunk for your mobile app: Upgrade TypeScript to version 7.0 for 10× faster type-checking.

Goal: Replace the TypeScript 6.x compiler with the new Go-powered TypeScript 7.0 to slash type-check times in local dev and CI, without breaking Expo or Metro tooling.

Files to create/modify:

• package.json — bump typescript to ^7.0
• tsconfig.json — remove any options deprecated or removed in TS 7
• .github/workflows/ci.yml (or equivalent) — update type-check step

Step-by-step:

1. Record baseline: time npx tsc --noEmit with current TypeScript version.
2. Run npm install typescript@^7.0 --save-dev.
3. Run npx tsc --noEmit and review any new errors carefully.
4. Fix strict errors: TS 7 tightens inference in some edge cases — address each error in the codebase.
5. Check tsconfig.json for any removed compiler options (e.g. importsNotUsedAsValues was removed in 5.5+).
6. Verify Metro bundler starts: npx expo start and check for TypeScript-related warnings.
7. Verify ESLint TypeScript plugin works: npx eslint . --ext .ts,.tsx.
8. Update CI workflow to run tsc --noEmit directly (not via ts-jest or ts-node, which need the programmatic API).
9. Record new time: time npx tsc --noEmit — document the speedup in a comment in tsconfig.json.

Acceptance criteria checklist:

• npm install succeeds with typescript@^7.0
• npx tsc --noEmit exits 0 with no errors
• Type-check time is reduced by ≥ 3× vs TS 6 baseline
• npx expo start launches without TypeScript-related errors
• ESLint with @typescript-eslint runs without crashing
• CI pipeline passes on the updated workflow