React-native-tab-view: So how do I implement lazy loading in the current version?

[Linginnn]

| software | version
| --------------------- | -------
| react-native |0.54
| react-native-tab-view |0.77

I've looked at a lot of issues.
But I still don't know how to implement lazy this way?

[deecewan]

I'm currently looking at this. The way I'm doing it (and I only started like 15 minutes ago) is to just re-calculate the index + routes when I get new date, and pass that in as navigationState.

[Linginnn]

Can you give me a thought?Because the page will call componentDidMount this component at the beginning.When and what do I judge?
To make an asynchronous network request.
thanks

[deecewan]

you could you static getDerivedStateFromProps (or componentWillReceiveProps) and update your state from there. I'm not maintaining any state for the actual pager - I calculate it fresh after ever page change because it's pretty cheap.

[Linginnn]

Can you give me an example?I don't quite understand.
thanks

[Vi-jay]

lazy={true}

[Vi-jay]

oh no ,the current version has removed it

[pribeh]

I'm puzzled as well as to how to achieve this. It looks like the documented function no longer works.

[Palisand]

Justifications for removing lazy and an alternative approach are described here.

You can also use the focused prop as mentioned here along with a property you set only once:

...
renderScene = ({route, focused}) => {
  ...
  return <Scene focused={focused} />;
  ...
}
...
class Scene extends Component {

  firstFocus = true;

  handleFirstFocus = () => {
    this.firstFocus = false;
    // do here what you used to do in componentWill/DidMount when lazy was available
  }

  componentDidMount() {
    this.props.focused && this.handleFirstFocus();
  }

  componentDidUpdate() {
    this.firstFocus && this.props.focused && this.handleFirstFocus();
  }

}

This is what I'm currently doing and it works fine for me.

You can also keep firstFocus in component state.

@NorthNothing If this solves your problems, please close this issue.

[gianpaj]

I couldn't get componentDidUpdate() to trigger when a tab is focused.
Looks like the tab component is not receiving updated props when it's are focused.

Any suggestions with the latest version? (>= 1.0.0)

[gianpaj]

Actually I found a way:

Tabs.js

_renderScene = ({ route, navigationState }) => {
    switch (route.key) {
      case 'clothes':
        return (
          <ImageGrid
            focused={navigationState.index === 0}
          />
        );
      case 'shoes':
        return (
          <ImageGrid
            focused={navigationState.index === 1}
          />
        );
      case 'other':
        return (
          <ImageGrid
            focused={navigationState.index === 2}
          />
        );
      default:
        return null;
    }
};

ImageGrid.js

export default class ImageGrid extends React.PureComponent<Props, State> {
  firstFocus = true;

  componentDidMount() {
    // for the first tab that will be in focused
    if (this.props.focused) {
      this.firstFocus = false;
      this.fetchItems(); // expensive method
    }
  }

  componentDidUpdate() {
    // when switching tabs, do this only the first time the tabs if focused to
    if (this.firstFocus && this.props.focused) {
      this.firstFocus = false;
      this.fetchItems(); // expensive method
    }
  }

  // ....
}

[leoyb]

Why is a basic function so complicated?

[andyngdz]

I didn't understand why we have to make it so complicated while this is a very basic function for TabView.

[satya164]

Example: https://snack.expo.io/@satya164/react-native-tab-view-lazy-load