Add Tabs connected to ViewPager

[ferrannp]

trafficstars

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.

[Noitidart]

Yes this for sure!

[eXist-FraGGer]

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

[x0s3]

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!! 🎃/ 🌰

[ferrannp]

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.

[x0s3]

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)

[Kristonitas]

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} />
    </>
  );
};

[troZee]

@x0s3 @ferrannp are you still working on it ?

[ferrannp]

Nope, I haven't had time as https://github.com/madhu314/react-native-tabbed-view-pager-android worked well for me still 😅.

[numandev1]

@troZee is there any example to make scroll tab view by using pagerview?

[troZee]

Closing bc tabview is responsible for adding tabs on top of pager view. More here https://github.com/satya164/react-native-tab-view#readme