What happened to LazyPagerView?

[MoritzCooks]

Ask your Question

I just found the issue #227 about preventing render for all pages at once. In the issue there is a PR mentioned that provides LazyPagerView component and it's also reference to 6.0.0-rc but it's not part of version 6.2.3

Is this available now or not (any more)?

Currently I have to prevent rerendering of all pages.

Thanks for clarification.

[troZee]

@MoritzCooks hope it clarifies the situation #673.
If you would like to achieve the lazy effect, you can use this library https://reactnavigation.org/docs/tab-view/ and hide the tabs.

[MoritzCooks]

Thanks for the clarification!
I actually found a workaround for that 🙂

[dareman-venkat]

@MoritzCooks Could you please share the workound for the lazy loading for not rendering all compoents

[efstathiosntonas]

@MoritzCooks would love to see the workaround too, can you please post an example? Thanks!

[MoritzCooks]

Oh sorry for responding so late @dareman-venkat and @efstathiosntonas .

I just adjusted the implementation to be a bit easier to understand. But that's basically it, just a bit stripped down:

const [page, setPage] = useState(0);

return (
  <PagerView
    offscreenPageLimit={2}
    initialPage={0}
    onPageSelected={({ target }) => setPage(target)}
  >
    {screens?.map((screen, index) => (
      <OnboardingScreen
        key={screen.id}
        shouldRender={index >= page - 1 && index <= page + 1}
        {...screen}
      />
    ))}
  </PagerView>
);

shouldRender

The children have a custom shouldRender prop which accepts a boolean.

• If true, render the component the way it should.
• If false, return as early as possible within the child: if (!shouldRender) return null

To check whether shouldRender is true or false, I keep track of the current page outside of the PagerView in a state.
In addition I add a tolerance of one page forward and backwards to prerender the next screen in both directions before it gets shown.

I hope this still helps!