React-Navigation performance: How many screens are too many?

Question

I am new to both Recact Native and React-Navigation. The app I am planning is super content heavy. It will have several hundred unqique screens. I want to connect them via React-Navigation so my stack is going to be quiet large. Is there an issue with that performance wise or anything I should keep in mind? My guess is that a screen is only loaded when the user is accessing it for the first time, so the initial loading time of the app should not be affected?

Thanks!

Answer 1

Actually it doesn't matter how may js files are you creating but it matters when you are :

1. Not Reusing your code . For example you create a 3 Screens which uses a Card so it didn't create a card component js file separately then the complexity is increasing but if you create a JS file for Card and reuse it in 3 screens it optimised this. So if you this this component will be reusable then create separate file for it.
2. Using Dimension too much . I know when using dimensions the Screen design is responsive but at abstract level it calculate height , width every time for every screen so it is not an optimized way . So try to use flex and also try to reduce usage of Dimension . But if you use Dimension wisely it is very powerful tool.

3)Try to use FastImage instead of image when you want to show images using FlatList , Map etc. In short if images in a single screen is render more than twice.

4. You can get more info here : Optimization in React-Native

Note: At Last i want to say that you can create as much as JS files but it must be reusable , not unnecessary and no repeated code there.