Skip to content

Instantly share code, notes, and snippets.

@Aryk
Created November 29, 2021 05:53
Show Gist options
  • Save Aryk/1499525ad105919fee85d5a893392f6d to your computer and use it in GitHub Desktop.
Save Aryk/1499525ad105919fee85d5a893392f6d to your computer and use it in GitHub Desktop.
diff --git a/node_modules/react-native-tab-view/lib/typescript/TabView.d.ts b/node_modules/react-native-tab-view/lib/typescript/TabView.d.ts
index c3a9586..a580cfe 100644
--- a/node_modules/react-native-tab-view/lib/typescript/TabView.d.ts
+++ b/node_modules/react-native-tab-view/lib/typescript/TabView.d.ts
@@ -21,5 +21,6 @@ export declare type Props<T extends Route> = PagerProps & {
lazyPreloadDistance?: number;
sceneContainerStyle?: StyleProp<ViewStyle>;
style?: StyleProp<ViewStyle>;
+ usePanResponderPager?: boolean;
};
export default function TabView<T extends Route>({ onIndexChange, navigationState, renderScene, initialLayout, keyboardDismissMode, lazy, lazyPreloadDistance, onSwipeStart, onSwipeEnd, renderLazyPlaceholder, renderTabBar, sceneContainerStyle, style, swipeEnabled, tabBarPosition, }: Props<T>): JSX.Element;
diff --git a/node_modules/react-native-tab-view/src/TabBar.tsx b/node_modules/react-native-tab-view/src/TabBar.tsx
index f1137f4..7c1e53f 100644
--- a/node_modules/react-native-tab-view/src/TabBar.tsx
+++ b/node_modules/react-native-tab-view/src/TabBar.tsx
@@ -274,7 +274,7 @@ export default class TabBar<T extends Route> extends React.Component<
render() {
const {
- position,
+ position: _position,
navigationState,
jumpTo,
scrollEnabled,
@@ -300,6 +300,11 @@ export default class TabBar<T extends Route> extends React.Component<
style,
indicatorContainerStyle,
} = this.props;
+ // @aryk - Sometimes the _position is undefined, when we are doing state
+ // updates while also transitioning tabs...I'm not entirely sure why.
+ // This prevents the app from blowing up with an error.`
+ const position = _position || new Animated.Value(0)
+
const { layout, tabWidths } = this.state;
const { routes } = navigationState;
diff --git a/node_modules/react-native-tab-view/src/TabView.tsx b/node_modules/react-native-tab-view/src/TabView.tsx
index 72d1271..1f87a15 100644
--- a/node_modules/react-native-tab-view/src/TabView.tsx
+++ b/node_modules/react-native-tab-view/src/TabView.tsx
@@ -9,6 +9,7 @@ import {
import TabBar from './TabBar';
import SceneView from './SceneView';
import Pager from './Pager';
+import PanResponderAdapter from './PanResponderAdapter';
import type {
Layout,
NavigationState,
@@ -31,6 +32,7 @@ export type Props<T extends Route> = PagerProps & {
lazyPreloadDistance?: number;
sceneContainerStyle?: StyleProp<ViewStyle>;
style?: StyleProp<ViewStyle>;
+ usePanResponderPager?: boolean;
};
export default function TabView<T extends Route>({
@@ -49,6 +51,7 @@ export default function TabView<T extends Route>({
style,
swipeEnabled = true,
tabBarPosition = 'top',
+ usePanResponderPager,
}: Props<T>) {
const [layout, setLayout] = React.useState({
width: 0,
@@ -74,9 +77,13 @@ export default function TabView<T extends Route>({
});
};
+ // On Android, when you have a FlatList in the tabs and the container is also a VirtualizedList, you may run
+ // into this issue: https://github.com/satya164/react-native-tab-view/discussions/1293
+ const PagerComponent = usePanResponderPager ? PanResponderAdapter : Pager;
+
return (
<View onLayout={handleLayout} style={[styles.pager, style]}>
- <Pager
+ <PagerComponent
layout={layout}
navigationState={navigationState}
keyboardDismissMode={keyboardDismissMode}
@@ -134,7 +141,7 @@ export default function TabView<T extends Route>({
</React.Fragment>
);
}}
- </Pager>
+ </PagerComponent>
</View>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment