Lazy initialized MaterialTopTabNavigator routes #9

charpeni · 2018-04-03T16:41:25Z

Routes in MaterialTopTabNavigator are now lazy initialized like in MaterialBottomTabNavigator.

A scene visibility is computed from multiple states and props:

To handle the pan between tabs, we check if you're currently swiping between tabs and the prop lazyOnSwipe is true (default value) or if the tab have been already loaded, we'll check if this tab is a sibling of the focused tab. Then, we'll display the tab if it's a sibling.

With the prop animationEnabled to true, we shouldn't hide a tab before the transition is done. So we're waiting COMPLETE_TRANSITION action to hide it. Also, if the prop sceneAlwaysVisible is true (default value), we won't hide scenes between A and D while transitioning.

If the current tab has not been loaded and must not be visible, we do not render it.

I'll update the docs accordingly to this PR.

src/utils/createTabNavigator.js

@@ -24,8 +24,16 @@ export type InjectedProps = {
  screenProps?: any,
 };

+type State = {
+  isSwiping: boolean,


src/utils/createTabNavigator.js

@@ -119,6 +135,9 @@ export default function createTabNavigator(TabView: React.ComponentType<*>) {
          navigation={navigation}
          descriptors={descriptors}
          screenProps={screenProps}
+          onSwipeStart={this._handleSwipeStart}


src/navigators/createMaterialTopTabNavigator.js

@@ -17,16 +18,35 @@ type Props = InjectedProps & {
  tabBarPosition?: 'top' | 'bottom',
  tabBarComponent?: React.ComponentType<*>,
  tabBarOptions?: TabBarOptions,
+  lazyOnSwipe: boolean,


src/navigators/createMaterialTopTabNavigator.js

@@ -17,16 +18,35 @@ type Props = InjectedProps & {
  tabBarPosition?: 'top' | 'bottom',
  tabBarComponent?: React.ComponentType<*>,
  tabBarOptions?: TabBarOptions,
+  lazyOnSwipe: boolean,
+  sceneAlwaysVisible: boolean,


src/navigators/createMaterialTopTabNavigator.js

@@ -17,16 +18,35 @@ type Props = InjectedProps & {
  tabBarPosition?: 'top' | 'bottom',
  tabBarComponent?: React.ComponentType<*>,
  tabBarOptions?: TabBarOptions,
+  lazyOnSwipe: boolean,
+  sceneAlwaysVisible: boolean,


src/navigators/createMaterialTopTabNavigator.js

@@ -113,18 +133,109 @@ class TabView extends React.PureComponent<Props> {

  _renderPanPager = props => <TabViewPagerPan {...props} />;

-  _renderScene = ({ route, focused }) => {
-    const { renderScene, animationEnabled, swipeEnabled } = this.props;
+  componentWillMount() {


src/navigators/createMaterialTopTabNavigator.js

+    }
+  }
+
+  componentWillReceiveProps(nextProps) {


src/navigators/createMaterialTopTabNavigator.js

+    }
+  }
+
+  _onAction = payload => {


src/navigators/createMaterialTopTabNavigator.js

+        transitioningFromIndex:
+          (payload.lastState && payload.lastState.index) || 0,
+      });
+    } else if (payload.action.type === 'Navigation/COMPLETE_TRANSITION') {


charpeni · 2018-05-14T18:29:32Z

@satya164 I have done your requested changes and upgraded it to match with react-navigation@2.0.1.

satya164 · 2018-05-24T15:36:41Z

I'll check this over the weekend.

charpeni · 2018-06-01T18:48:29Z

I've done some non-scientific benchmarks in a application that have many — probably too much — tabs, and we have noticed a significant improvement with the memory.

Check these videos below:

createMaterialTopTabNavigator from this PR.

createMaterialTopTabNavigator from react-navigation@2.0.4

createTabNavigator (deprecated) from react-navigation@2.0.4

satya164 · 2018-06-01T21:53:34Z

I'm sorry I haven't been able to test this. Will definitely do tomorrow. Also it'll be great to have this feature directly in react-native-tab-view instead of here :)

satya164

After trying this on device, it doesn't work very well with swipes as I suspected. For example, when you are on tab 1, and then you swipe quickly to reach tab 3, tab 3 will stay blank until the animation ends. I updated the example app on master to add an image gallery, so it should be visible after you rebase.

This is a very useful optimization otherwise, so I think landing this, but turning it off by default would be the best choice. Also should avoid extra setStates when the feature is turned off.

Also since we added lazy prop in bottom tabs, we should add it here. We can also add another prop optimizationsEnabled for the clipped thingy and set it to false by default.

src/navigators/createMaterialTopTabNavigator.js

+    const mustBeVisible = this._mustBeVisible(props);
+
+    if (!loaded.includes(index) && !mustBeVisible) {
+      return null;


src/navigators/createMaterialTopTabNavigator.js

+    animationEnabled: true,
+  };
+
+  static getDerivedStateFromProps(nextProps, prevState) {


charpeni · 2018-06-05T19:20:03Z

Also it'll be great to have this feature directly in react-native-tab-view instead of here :)

I totally agree I should have done that back in the days. But for now, I just want to land this and maybe improve it and port it to react-native-tab-view after.

This is a very useful optimization otherwise, so I think landing this, but turning it off by default would be the best choice. Also should avoid extra setStates when the feature is turned off.

Also since we added lazy prop in bottom tabs, we should add it here.

Extra setStates are avoided in case lazy is false.

But if we want to go further, these extra setStates are useful to properly lazy load scenes on swipe. If we really want to avoid these extra setStates, we would have to do one of the following:

Disable lazy loading if swipe is enabled.
Lazy load on focus instead of swipe.

In case swipe is disabled, _handleSwipeStart won't be called.
In case animation is disabled, _handleAnimationEnd and _handleIndexChange won't be called (except on swipe).

We can also add another prop optimizationsEnabled for the clipped thingy and set it to false by default.

Sure, but bottom tabs are already using the clipped thingy (ResourceSavingScene) without optimizationsEnabled prop.

Thoughts?

satya164 · 2018-06-05T19:29:38Z

Extra setStates are avoided in case lazy is false.

I meant extra setStates when lazy is turned off. Since we don't need them.

We can also avoid setStates for the resource saving stuff. I did that in bottom navigation. But that's a different thing.

Sure, but bottom tabs are already using the clipped thingy (ResourceSavingScene) without optimizationsEnabled prop.

Yeah, but in bottom tabs it's impossible to notice the optimization. Here we can see the blank page when swiping, so it's important to have it customizable.

Disable lazy loading if swipe is enabled. Lazy load on focus instead of swipe.

I was thinking about heuristics to enable/disable lazy. But then I thought it'll be less confusing to make it explicit. I'll defer to @brentvatne on this.

charpeni · 2018-06-05T19:31:28Z

I meant extra setStates when lazy is turned off. Since we don't need them.

Introduced in the last commit. 👍

Thanks for the feedback.

charpeni · 2018-06-28T17:03:23Z

I was thinking about heuristics to enable/disable lazy. But then I thought it'll be less confusing to make it explicit. I'll defer to @brentvatne on this.

@brentvatne Any thoughts?

brentvatne · 2018-06-28T17:04:30Z

let's skip heuristics for now and just make it explicit

charpeni · 2018-07-18T19:31:06Z

It should be fine like this then 😃

satya164 · 2018-07-19T06:22:56Z

Can we turn off lazy by default since it doesn't work well in all scenarios?

charpeni · 2018-07-25T20:05:49Z

Done!

Donhv · 2018-07-29T16:12:15Z

@charpeni why i update latest version react-navigation (2.9,3) and lazy in creatMaterialTopTabNavigator not work?

charpeni · 2018-07-30T12:33:41Z

Because this PR is not included in react-navigation yet.

Related to react-navigation/tabs#9

Donhv · 2018-08-08T02:42:23Z

@charpeni how I can use lazy in creatMaterialTopTabNavigator :(

nebulashine · 2018-10-14T02:10:37Z

Same question here.

I'm using "react-navigation": "^2.14.2" but found lazy not effective - createMaterialTopTabNavigator is still rendering all screens at once.

satya164 suggested changes Apr 25, 2018

View reviewed changes

charpeni force-pushed the tabs-lazy-initialized branch from bf378d3 to def63d6 Compare May 14, 2018 18:27

satya164 suggested changes Jun 2, 2018

View reviewed changes

src/navigators/createMaterialTopTabNavigator.js Outdated

const mustBeVisible = this._mustBeVisible(props);

if (!loaded.includes(index) && !mustBeVisible) {

return null;

This comment was marked as abuse.

Sign in to view

satya164 force-pushed the master branch from 64ba998 to 6337769 Compare June 3, 2018 19:25

satya164 suggested changes Jun 3, 2018

View reviewed changes

src/navigators/createMaterialTopTabNavigator.js Outdated

animationEnabled: true,

};

static getDerivedStateFromProps(nextProps, prevState) {

This comment was marked as abuse.

Sign in to view

This comment was marked as abuse.

Sign in to view

charpeni added 4 commits June 5, 2018 11:45

Lazy initialized MaterialTopTabNavigator routes

e6ede86

Fix eslint and flow errors

d918914

Sync with react-navigation@2.0.1

009fc63

Add lazy and optimizationsEnabled

dfcca27

charpeni force-pushed the tabs-lazy-initialized branch from def63d6 to dfcca27 Compare June 5, 2018 19:18

brentvatne mentioned this pull request Jul 21, 2018

Props Lazy in createMaterialTopTabNavigator not work react-navigation/react-navigation#4737

Closed

Flip default lazy option to false for MaterialTopTabNavigator

6f812a6

satya164 approved these changes Jul 26, 2018

View reviewed changes

satya164 merged commit a4ea2bc into react-navigation:master Jul 26, 2018

charpeni added a commit to react-navigation/react-navigation.github.io that referenced this pull request Aug 1, 2018

Add lazy and optimizationsEnabled props

ee556d6

Related to react-navigation/tabs#9

charpeni mentioned this pull request Aug 1, 2018

Add lazy and optimizationsEnabled props react-navigation/react-navigation.github.io#225

Merged

charpeni deleted the tabs-lazy-initialized branch August 1, 2018 19:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Lazy initialized MaterialTopTabNavigator routes #9

Lazy initialized MaterialTopTabNavigator routes #9

charpeni commented Apr 3, 2018 •

edited

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

charpeni commented May 14, 2018

satya164 commented May 24, 2018

charpeni commented Jun 1, 2018

satya164 commented Jun 1, 2018

satya164 left a comment

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

charpeni commented Jun 5, 2018

satya164 commented Jun 5, 2018

charpeni commented Jun 5, 2018

charpeni commented Jun 28, 2018

brentvatne commented Jun 28, 2018

charpeni commented Jul 18, 2018

satya164 commented Jul 19, 2018

charpeni commented Jul 25, 2018

Donhv commented Jul 29, 2018

charpeni commented Jul 30, 2018

Donhv commented Aug 8, 2018

nebulashine commented Oct 14, 2018

Lazy initialized MaterialTopTabNavigator routes #9

Lazy initialized MaterialTopTabNavigator routes #9

Conversation

charpeni commented Apr 3, 2018 • edited

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

charpeni commented May 14, 2018

satya164 commented May 24, 2018

charpeni commented Jun 1, 2018

createMaterialTopTabNavigator from this PR.

createMaterialTopTabNavigator from react-navigation@2.0.4

createTabNavigator (deprecated) from react-navigation@2.0.4

satya164 commented Jun 1, 2018

satya164 left a comment

Choose a reason for hiding this comment

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

charpeni commented Jun 5, 2018

satya164 commented Jun 5, 2018

charpeni commented Jun 5, 2018

charpeni commented Jun 28, 2018

brentvatne commented Jun 28, 2018

charpeni commented Jul 18, 2018

satya164 commented Jul 19, 2018

charpeni commented Jul 25, 2018

Donhv commented Jul 29, 2018

charpeni commented Jul 30, 2018

Donhv commented Aug 8, 2018

nebulashine commented Oct 14, 2018

charpeni commented Apr 3, 2018 •

edited