fixing when conditional rendering is false

[guihendias]

trafficstars

Summary

Now its possible to use conditional rendering in PagerView pages.

Test Plan

What's required for testing (prerequisites)?

Make a conditional rendering child for PagerView.

What are the steps to reproduce (after prerequisites)?

If condition false, the app used to crash.

Compatibility

OS	Implemented
iOS	✅
Android	✅

Checklist

• [x] I have tested this on a device and a simulator
• [ ] I added the documentation in README.md
• [ ] I updated the typed files (TS and Flow)

[mikob]

Any chance this can be merged?

[troZee]

Hey 👋 I have tested a below code

import React, { useEffect, useMemo, useState } from 'react';
import { StyleSheet, View, SafeAreaView, Animated, Text } from 'react-native';

import PagerView from 'react-native-pager-view';

import { LikeCount } from './component/LikeCount';
import { NavigationPanel } from './component/NavigationPanel';
import { useNavigationPanel } from './hook/useNavigationPanel';

const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);

export function BasicPagerViewExample() {
  const { ref, ...navigationPanel } = useNavigationPanel();

  const [pages, setPages] = useState<React.ReactNode>(null);
  const memoPages = useMemo(
    () =>
      navigationPanel.pages.map((page, index) => (
        <View key={page.key} style={page.style} collapsable={false}>
          <LikeCount />
          <Text testID={`pageNumber${index}`}>{`page number ${index}`}</Text>
        </View>
      )),
    [navigationPanel.pages]
  );

  useEffect(() => {
    setTimeout(() => {
      setPages(memoPages);
    }, 2000);
  });
  return (
    <SafeAreaView style={styles.container}>
      <AnimatedPagerView
        //@ts-ignore
        testID="pager-view"
        ref={ref}
        style={styles.PagerView}
        initialPage={0}
        overdrag={navigationPanel.overdragEnabled}
        scrollEnabled={navigationPanel.scrollEnabled}
        onPageScroll={navigationPanel.onPageScroll}
        onPageSelected={navigationPanel.onPageSelected}
        onPageScrollStateChanged={navigationPanel.onPageScrollStateChanged}
        pageMargin={10}
        // Lib does not support dynamically orientation change
        orientation="horizontal"
        // Lib does not support dynamically transitionStyle change
        transitionStyle="scroll"
        showPageIndicator={navigationPanel.dotsEnabled}
      >
        {pages}
      </AnimatedPagerView>
      <NavigationPanel {...navigationPanel} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  image: {
    width: 300,
    height: 200,
    padding: 20,
  },
  PagerView: {
    flex: 1,
  },
});

and it does not work.

[Dashue]

Could have used this right now @guihendias @troZee Workaround?