How to utilize useContext in expo router?

Question

I'm using the new Expo-Router version that uses a file based navigation I used React's context API + useReducer hook to create a universal language context in the app The problem is I have no idea where to wrap the context provider, there is no root component as I can see

my project structure:

app
    Dashboard.tsx
    index.tsx
    Login.tsx
    Profile.tsx
assets
components
    Button.tsx
    Drawer.tsx
    DrawerItem.tsx
    HR.tsx
    TextField.tsx
forms
    LoginForm.tsx
ts
    declarations.d.ts
.gitignore
app.json
babel.config.js
index.ts
metro.config.js
package.json
tsconfig.json
yarn.lock

index.ts

import "expo-router/entry" 

Found this discussionon Github around the same problem, I have no _layout file though

Colpotomy

Answer 1

You must have a top level _layout file. Wrap it up with a provider and it should work for you.

<AppProvider>
      <Stack initialRouteName="home">
        <Stack.Screen
          name="home"
          options={{
            headerShown: false,
          }}
        />
      </Stack>
</AppProvider>

Irma

Answer 2

Wrapp your Provider at the _layout

 <Provider>
   <Stack>
    <Stack.Screen name="(tabs)" />
    <Stack.Screen name="modal" />
  </Stack>
</Provider>

Kaitlinkaitlyn

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Pearlene