React-native-pager-view: Add Tabs connected to ViewPager

Created on 30 Apr 2019 · 8Comments · Source: callstack/react-native-pager-view

Should be fairly simple to connect the ViewPager to tabs like is done here: https://github.com/madhu314/react-native-tabbed-view-pager-android

The above library is out of date and it uses a broken version of ViewPager. We could offer tabs as optional and nice to have.

enhancement

Source

ferrannp

👍3 🚀2 ❤2

Most helpful comment

I just found a way to do it out of the box.

const Tabs = () => {
  const [pageIndex, setPageIndex] = useState(0);

  let viewPager;

  const tabsRef = node => {
    if (node !== null) {
      viewPager = node;
    }
  };

  const setPage = (index: number) => {
    setPageIndex(index);
    viewPager && viewPager.setPage(index);
  };

  const onPageSelected = ({ nativeEvent: { position } }: PageSelectedEvent) => {
    setPageIndex(position);
  };

  return (
    <>
      <ViewPager
        initialPage={0}
        ref={tabsRef}
        onPageSelected={onPageSelected}
      >
        <View key="0">
          <Screen text="A" />
        </View>
        <View key="1">
          <Screen text="B" />
        </View>
      </ViewPager>
      <PageButtons currentIndex={pageIndex} setPage={setPage} />
    </>
  );
};

Kristonitas on 7 Nov 2019

🎉3

All 8 comments

Yes this for sure!

Noitidart on 22 May 2019

It is easier to use and update this library.
https://github.com/ptomasroos/react-native-scrollable-tab-view

eXist-FraGGer on 5 Oct 2019

I have started to work on this feature, just a proof of concept on Android, will need some help to implement it on iOS 😅

I will clean code and create a branch in my fork with those changes and share it (not enough time for that sorry 😔)

Happy (halloween || "la castañera") to everyone!! 🎃/ 🌰

reactViewPagerTabs

x0s3 on 31 Oct 2019

Oh @x0s3 didn't know somebody was working on it. There is actually a repo that might do the same if they update to use the ViewPager from the community https://github.com/madhu314/react-native-tabbed-view-pager-android/issues/17.

ferrannp on 31 Oct 2019

Oh @x0s3 didn't know somebody was working on it. There is actually a repo that might do the same if they update to use the ViewPager from the community madhu314/react-native-tabbed-view-pager-android#17.

it would be useful to close this or update labels, so that there is no confusion in the future 😅 (just a comment)

x0s3 on 31 Oct 2019

I just found a way to do it out of the box.

const Tabs = () => {
  const [pageIndex, setPageIndex] = useState(0);

  let viewPager;

  const tabsRef = node => {
    if (node !== null) {
      viewPager = node;
    }
  };

  const setPage = (index: number) => {
    setPageIndex(index);
    viewPager && viewPager.setPage(index);
  };

  const onPageSelected = ({ nativeEvent: { position } }: PageSelectedEvent) => {
    setPageIndex(position);
  };

  return (
    <>
      <ViewPager
        initialPage={0}
        ref={tabsRef}
        onPageSelected={onPageSelected}
      >
        <View key="0">
          <Screen text="A" />
        </View>
        <View key="1">
          <Screen text="B" />
        </View>
      </ViewPager>
      <PageButtons currentIndex={pageIndex} setPage={setPage} />
    </>
  );
};

Kristonitas on 7 Nov 2019

🎉3

@x0s3 @ferrannp are you still working on it ?