Where should root component logic go in Expo Router apps?

[justblender]

Since expo-router/entry takes care of registering root component by using an internal <App /> component, where should initial app logic go now?

Given the following app structure, for example, I want to load some custom fonts using expo-font. Usually that sort of stuff would be resolved inside of <App />, but where should it go now? Is it root _layout?

app/
├── (app)/
│   ├── _layout.tsx
│   └── index.tsx
├── _layout.tsx
└── sign-in.tsx

[okwast]

The question is also true for all kinds of providers like data store, themes, user state, etc.
As the outer most _layout wraps all screens, I expect that this is the place to do it.
I agree this doesn't feel 100% right at first as it isn't really a layout thing, but actually you are structurally layouting your app there, so I would say it makes sense.

[RWOverdijk]

Based on the info I found for splash screens I'd say the outer-most _layout makes sense. Because it's just another _layout it seems confusing, but calling it something like _app or _root would be weird as well, because it's the same thing. I think this could be solved with documentation.

[frankcalise]

This is how I'm working it also

[EvanBacon]

Whichever _layout is the root-most level that you want context to be accessible to (might not be all routes). Interestingly enough, this question could also be answered by looking at how global providers are used on web with frameworks like Remix or Next.js. In many ways, Expo Router apps will be more aligned with how the larger React community does things.

[markmccoid]

This may just be documentation lagging behind, but the referenced documentation for using the Splash Screen seems to be outdated.

I would suggest using the sample expo app and take a look at the first _layout.tsx file:

Here is the template I used:

npx create-expo-app --template tabs

This example will make initialization much clearer.

[badhrin]

I am struggling with this in the context of HeadlessJS in Android. If I register a HeadlessJS task (through Background Fetch or through RNFirebase) in the outermost _layout.js file (outside the component itself just like we do it in App.js), it does not register the headlessJS task. I get "No task registered for key ReactNativeFirebaseMessagingHeadlessTask" in adb logs. Same for BackgroundFetch Headless task. So where do we put the HeadlessJS logic in Expo router (currently using V2) based apps ?

I also tried using the HeadlessJS task in the index.js and that too does not work. I need HeadlessJS in my apps mainly to handle FCM notifications, but with the current gap in Expo Router, I am unable to use it. Is this a feature that needs enabling or a bug or am I just doing it wrong in Expo Router ?

Note that I am using create-expo-app --template tabs project structure