Mindhunter

If you’re using Expo-router with Expo SDK 49 or higher, you might have noticed that the app is doesn’t have an entry point, expo-router automatically recognizes app folder as the entry point, but what if you want to wrap your app with a provider?

Your project structure would look like something like this:

├── app
│   ├── index.tsx
│   ├── Home
│   │   ├── index.tsx

If you wrap your app with a provider in index.tsx, it will only wrap that screen, and not the whole app, so how can we wrap the whole app with a provider?

The solution is to create a root layout component, and wrap it with the provider, and now your provider can be accessed from any screen.

// app/_layout.tsx
import React from "react";
import { Stack } from "expo-router";
import { Provider } from "./Provider";

export default function Layout() {
  return (
    <Provider>
      <Stack />
    </Provider>
  );
}

That’s it for today’s tech byte, see you next time!

If you have any suggestions or questions, feel free to reach out to me on Twitter or LinkedIn.

Today's Tech Byte: Wrapping your app with a provider in Expo-router