React Query with Expo Router

i am starting a react native project and using expo router. I'm trying to use react query and I noticed that the expo router doesn't have a root file for the QueryClientProvider to wrap. Hence I am not able to configure react query. I tried some other ways and it didn't work. I did a search and didn't see anyone writing about this topic. If anyone has done it before, please help me

1 Answer

You can use the layout files:

1. Create an Expo Router app npx create-expo-app@latest --template tabs
2. Add your {yourProject}/app/_layout.tsx here you can add your providers

import FontAwesome from '@expo/vector-icons/FontAwesome'; import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'; import { useFonts } from 'expo-font'; import { SplashScreen, Stack } from 'expo-router'; import { useEffect } from 'react'; import { useColorScheme } from 'react-native'; export { // Catch any errors thrown by the Layout component. ErrorBoundary, } from 'expo-router'; export const unstable_settings = { // Ensure that reloading on `/modal` keeps a back button present. initialRouteName: '(tabs)', }; export default function RootLayout() { const [loaded, error] = useFonts({ SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'), ...FontAwesome.font, }); // Expo Router uses Error Boundaries to catch errors in the navigation tree. useEffect(() => { if (error) throw error; }, [error]); return ( <> {/* Keep the splash screen open until the assets have loaded. In the future, we should just support async font loading with a native version of font-display. */} {!loaded && <SplashScreen />} {loaded && <RootLayoutNav />} </> ); } function RootLayoutNav() { const colorScheme = useColorScheme(); return ( <> {/* Add your react-query provider */} <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}> <Stack> <Stack.Screen name="(tabs)" options={{ headerShown: false }} /> <Stack.Screen name="modal" options={{ presentation: 'modal' }} /> </Stack> </ThemeProvider> </> ); }