insights-js/examples/example-expo-53/app/_layout.tsx

import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'
import { useFonts } from 'expo-font'
import { Stack } from 'expo-router'
import { StatusBar } from 'expo-status-bar'
import 'react-native-reanimated'

import { InsightsProvider, InsightsSurveyProvider } from 'insights-react-native'

import { useColorScheme } from '@/hooks/useColorScheme'
import { insights } from './insights'

export default function RootLayout() {
    const colorScheme = useColorScheme()
    const [loaded] = useFonts({
         
        SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
    })

    if (!loaded) {
        // Async font loading only occurs in development.
        return null
    }

    return (
        <InsightsProvider
            client={insights}
            autocapture={{
                captureScreens: false, // expo-router requires this to be false and capture screens manually
                captureTouches: true,
                customLabelProp: 'ph-my-label',
            }}
            debug={true}
        >
            <InsightsSurveyProvider client={insights}>
                <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
                    <Stack>
                        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
                        <Stack.Screen name="surveys" options={{ title: 'Surveys' }} />
                        <Stack.Screen name="+not-found" />
                    </Stack>
                    <StatusBar style="auto" />
                </ThemeProvider>
            </InsightsSurveyProvider>
        </InsightsProvider>
    )
}