WARN Looks like you're passing an inline function for 'component' prop for the screen 'Home' (e.g. component={() => <SomeComponent />}). Passing an inline function will cause the component state to be lost on re-render and cause perf issues since it's re-created every render. You can pass the function as children to 'Screen' instead to achieve the desired behaviour.

[sebastianjung]

It seems that this piece of code: return React.createElement(Stack.Screen, { key: name, name: name, component: C, options: Opts }); throws warnings in minified bundle.

Changing the code to the following, seems to resolve the issue. return React.createElement(Stack.Screen, { key: name, name: name, options: Opts },(props) => <C {...props} />);

Any thoughts on this?

[kanzitelli]

Hi @sebastianjung! Thanks for reporting the issue.

That's interesting, I've never faced that before. Navio's code is highly memoised (so shouldn't have unnecessary re-renders) but the warning is linked to this line, however I couldn't find anything wrong. I will need some time to test that and understand why it's happened.

Can you provide the steps on how to get to that warning? And maybe some code snippet?

[sebastianjung]

@kanzitelli I've been using your rn-starter template.

When minifiying with npx expo start --dev-client --minify the warning occures.

That may be sufficient.

[kanzitelli]

Hey @sebastianjung. I couldn't reproduce the warning on my end following the steps you provided. However, I changed some code in Navio related to the warning but idk if that's a correct way.

// line 633
return <Stack.Screen key={name} name={name} component={C} options={Opts} />;

Changed to

return (
  <Stack.Screen key={name} name={name} options={Opts}>
    {(props: any) => <C {...props} />}
  </Stack.Screen>
);

And after building it, it generated following code:

return (React.createElement(Stack.Screen, { key: name, name: name, options: Opts }, (props) => React.createElement(C, { ...props })));

It seems the same with what you sent before. But I'm not sure if that's correct way of building react-navigation's Stack Screens component. Let me know if that resolves the issue.

[sebastianjung]

@kanzitelli Sorry, but how to test if this works? Any branch i should check inside my project?

[sebastianjung]

I tried cloning this repo but building it does not give me a dist folder (probably because no bundler is involved). Sorry, i am not sure how to properly build this project i guess.