Dynamic tabs with webviews causing re-renders

[wilomgfx]

Hi, basically im using this (really great btw) library in my current job's app to show some webviews using tabs and i am adding/removing them dynamically based on the users action.

Expected behaviour

Not causing re-renders when adding or removing at the beginning of the routes array.

Actual behaviour

If i add/remove a route dynamically at the beginning of the routes array, all my tabs re-rerender, which is problematic, because the webviews do too.

Probably doing this the wrong way, but i can't seem to find a good enough solution to not hack around this.

Code sample, screenshots

I was having trouble on my real app at work, so i decided to create a base repo with CRNA that shows this
https://github.com/wilomgfx/react-native-tab-view-with-webviews

What have you tried

Mutating directly the array of routes and only adding/removing from the end of the array which works fine, problem is starting at the front. (which is a case that could happen in my real app)

[satya164]

Thanks for the detailed issue with repro. It's a bug. I need to investigate how I to fix this in the library when I get some time, but for now you can explicitely add a key to the scene you're rendering:

<WebViewer url={route.url} key={route.key} />

https://github.com/wilomgfx/react-native-tab-view-with-webviews/blob/master/app/Tabs.js#L22

[wilomgfx]

@satya164 Thanks for your quick answer. Wow i can't believe i did not think of that. I was looking for some really complicated solutions haha -__-.

I will look into that bug too.

Best regards,

[Kottidev]

@wilomgfx @satya164 ,

It should be we use FlatList instead of ScrollView and mapping routes.

I think with FlatList your components don't re-renders

[wilomgfx]

@satya164 just found it still does cause re-renders under android.

RN version : 0.51.0
Package version : latest

[satya164]

@wilomgfx ViewPagerAndroid doesn't play well with changing the list of routes dynamically, so, unfortunately, we need to force it to re-render. but you can switch to a different pager and it'll not happen. I need to polish TabViewPagerExperimental so it can be the default on both platforms in the future to avoid platform-specific quirks.

[wilomgfx]

@satya164 Perfect i see, i'll change that up for android then. Thanks for the quick response !

[wilomgfx]

@satya164 I tried most of the pagers and they all seem to force re-render on android :(

[wilomgfx]

@satya164 I'm waiting on this to release the android version of my app, any chances you would know which pager would not cause a re-render on Android? Thanks a lot :)