React Native
A complete guide to using Invokix with a React Native or Expo project. Get mobile-optimised hooks, shared types, and Zod schemas — all from the same contract your web team uses.
What Invokix generates for this stack
- TypeScript types shared with your web team — same contract, same types
- React Native optimised hooks —
refetchOnWindowFocus: false,networkMode: "always",retry: 2 - Zod validation schemas for request body validation
Setup
1
Install dependencies
Terminal
pnpm add @tanstack/react-query zod2
Set up QueryClientProvider
App.tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
const queryClient = new QueryClient()
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<RootNavigator />
</QueryClientProvider>
)
}3
Pull your contract outputs
Terminal
npx invokix pullGenerated files
src/types/orders.ts — TypeScript types
src/hooks/native/useOrders.ts — React Native optimised hooks
src/schemas/orders.ts — Zod validation schemas4
Use the generated hooks in your screens
screens/OrdersScreen.tsx
import { View, Text, FlatList, ActivityIndicator } from "react-native"
import { useGetOrders } from "@/hooks/native/useOrders"
export function OrdersScreen() {
const { data: orders, isLoading, error } = useGetOrders()
if (isLoading) return <ActivityIndicator />
if (error) return <Text>Something went wrong</Text>
return (
<FlatList
data={orders}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<View>
<Text>{item.status}</Text>
<Text>{item.price}</Text>
</View>
)}
/>
)
}Sharing types with your web team
If you have a monorepo with both a Next.js app and a React Native app, both can pull from the same Invokix contract. The TypeScript types are identical — only the hooks differ between web and mobile.
Monorepo structure
apps/
web/ — Next.js app
src/types/orders.ts — pulled from Invokix
src/hooks/useOrders.ts — web hooks
mobile/ — React Native app
src/types/orders.ts — same types, pulled from Invokix
src/hooks/useOrders.ts — mobile hooks