react-native-pager-view icon indicating copy to clipboard operation
react-native-pager-view copied to clipboard

Passing current /

Open klintan opened this issue 2 years ago • 2 comments

Ask your Question

So I'm probably missing something fundamental; but is there an example of passing the currently active page to a child?

I'm doing something very similar to the Basic example, but I would like to pass the current active page to a child. Unfortunately setting a state variable using the selectPageCallback re-renders the parent, and the animated view goes back to the initialPage={0} basically just flickers back.

This happens as soon as you set any kind of state variable.

Would love any pointers or ideas! (quite a react novice so I'm probably just doing something very bad :) )

Some of my sample code:

 const setPage = useCallback(
    (page) =>
      pagerRef.current?.setPage(page),
    []
  );
  
  const data = [
    {
      key: 0,
      title: 'A good child,
      view: <ChildView nextPage={setPage}></ChildView >,
      ...
    },

<AnimatedPagerView
        style={{ flex: 1 }}
        initialPage={0}
        ref={pagerRef}
        scrollEnabled={true}
        draggable={true}
        onPageScroll={onPageScroll}
        onPageSelected={onPageSelected}
      >
        {useMemo(() => {
          return data.map(({ key, title, view }) => (
            <View key={key}>
              {view}
            </View>
          ));
        }, [data])}
      </AnimatedPagerView>
      ```

Now in my world I would do something like this:

const onPageSelected = useCallback(({ nativeEvent }) => { setActivePage(nativeEvent.position); }, []);

<ChildView nextPage={setPage} activePage={activePage}></ChildView >


klintan avatar Jun 05 '23 07:06 klintan

facing the same issue 🥲

fusandy avatar Jun 20 '23 13:06 fusandy

You could set your initialPage to the activePage initialPage={activePage} I think that would solve the flicker.

RemiHin avatar Sep 04 '23 14:09 RemiHin

Please use usePagerView hook.

MrRefactor avatar Dec 02 '24 10:12 MrRefactor