kirillzyusko / react-native-bundle-splitter

HOC for lazy components loading

Home Page:https://kirillzyusko.github.io/react-native-bundle-splitter/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Maximum depth reached with react navigation 5

vidsag opened this issue · comments

Describe the bug
Getting maximum depth reached when using with react navigation 5

Code snippet

<ScheduleStack.Navigator>
<ScheduleStack.Screen
  name="Schedule"
  component={register({
    require: () => require('../../screens/PlusScheduleScreen'),
  })}
  options={{
    header: ({ scene, navigation }) => (
      <HomeHeaderBar/>
    ),
  }}
/>
</ScheduleStack.Navigator> 

Is there something that I am doing wrong?

@vidsag everything is correct (in code snippet). As far as I remember I had such error when variable ROOT_FOLDER in metro.config.js didn't reflect real path. Could you try to change it and see whether it helps you? Instead of const ROOT_FOLDER = resolve(__dirname, '..'); it can be for example const ROOT_FOLDER = resolve(__dirname, ''); (you need to restart metro bundler after changing the path - only in this case new configuration will be loaded).

if changing this doesn't help, then I would ask you to create small reproducible demo, if it's possible :)

This worked for me.

const PlusScheduleScreen = register({
  require: () => require('../../screens/PlusScheduleScreen'),
});

<ScheduleStack.Navigator>
<ScheduleStack.Screen
  name="Schedule"
  component={PlusScheduleScreen}
  options={{
    header: ({ scene, navigation }) => (
      <HomeHeaderBar/>
    ),
  }}
/>
</ScheduleStack.Navigator> 

Not sure why inlining it is causing the issue.

@vidsag Hm, it's interesting🤔
I think that require may miss a context, if you use it as inline variant.
In any case I highly appreciate you! Thank you for your help!😎
Can I close this issue?

Yeah, I will close it. Thanks for your input. Appreciate your work on this awesome library.