react-native-tab-view

react-native-tab-view copied to clipboard

Motivation

When swipeEnabled is true, sometimes on iOS the app does or doesn't want to allow for overscrolling after reaching the very end or very beginning of pages. overdrag is one of the props from react-native-pager-view for this, but it wasn't presented in react-native-tab-view. This is also important for the latest @react-navigation/material-top-tabs which uses react-native-tab-view.

Test plan

import { SceneRendererProps, TabView } from 'react-native-tab-view';

export default function MaterialTopTabView({
  overdrag,
  ...
}: Props) {
  return (
    <TabView<Route<string>>
      overdrag={overdrag} // boolean: true or false. Optional. Defaults to false.
      ...
    />
  );
}

Before when it was not configurable, it's always over-scrollable.

https://user-images.githubusercontent.com/4941095/136645109-741c7352-d6ae-48fa-ba82-869b959826da.MP4

But now when it's set to false, over-scrolling can be prevented.

https://user-images.githubusercontent.com/4941095/136645121-b60a421a-eb7d-4e66-b8d2-b45852d844be.MP4

Hey sungsong88! Thanks for opening your first pull request in this repo. If you haven't already, make sure to read our contribution guidelines.

Hey there, @satya164. This PR is quite a critical fix to make the widely used package to work as expected on iOS: https://github.com/react-navigation/react-navigation/tree/main/packages/material-top-tabs. Could you review this, please? Thanks in advance.

On that note...there are several other properties that show up in typescript that are not transferred to the PagerComponent.

Something is definitely wrong here... we probably should be using the spread ...props and passing it into the PagerComponent...

https://github.com/satya164/react-native-tab-view/blob/main/src/TabView.tsx#L79

Closing this since overdrag now defaults to false in react-native-pager-view. Passing more props to PagerView can be addressed in separate PR.