Where to put polyfills in the new router ?

[Twiggeh]

Hi!
I have the issue that with the new router, the polyfills are not being loaded before the rest of the code is executed.
I import the modules currently at the _layout the index =>

app/
  index.tsx
  _layout.tsx

I have also tried putting it into the index.tsx file, but that didn't seem to make a difference.

_layout.tsx

import "@/comps/polyfillA" // runs after the {something } import
import { something } from "moduleNeedingPolyfill" // runs before first import

it used to be that you could put your polyfills into the index.js file (which worked), but that is now gone, how could I resolve this now ?

I can create an example, but that won't work on snack as it doesn't support the new router yet.

[EvanBacon]

Create an index.js file and make your polyfill the first import:

import 'polyfill'
import 'expo-router/entry'

Then change the main field in the package.json to point to the "main": "./index".

[bsluther]

It could be there and I missed it, but it might be helpful to have this in the expo-router docs. The guidance I found there is related to providers, but recommends putting them in the root _layout.ts, which won't work for polyfills, and could send one down a rabbit hole if one doesn't google the right question.

[isaachinman]

@EvanBacon On a similar note, where should users put SplashScreen.preventAutoHideAsync()? Putting it in a layout file, or a custom entry point, both do not work as expected.

[patroza]

Perhaps pollyfills could be made an actual feature so you can configure a polyfill file and it will be automatically loaded before the router entry. It's more explicit and can be well documented.

[pooriamo]

I was also struggling with this. I had put it in app/_layout.tsx but after investigation, I realized that that file is loaded after (tabs)/_layout.tsx!
This saved me, thank you. I wish it was documented somewhere.

Also, I'm very curious to know why the loading order is like that.

[salieflewis]

Does anyone know if this pattern would support package instantiation as such?

import 'text-encoding-polyfill'
import { install } from 'react-native-quick-crypto'
import 'expo-router/entry'

install()