actual/packages/mobile/react-navigation-tabs+1.0.2.patch
2022-04-28 22:44:38 -04:00

321 lines
9.4 KiB
Diff

diff --git a/node_modules/react-navigation-tabs/src/views/BottomTabBar.js b/node_modules/react-navigation-tabs/src/views/BottomTabBar.js
index 219d26f..be514f3 100644
--- a/node_modules/react-navigation-tabs/src/views/BottomTabBar.js
+++ b/node_modules/react-navigation-tabs/src/views/BottomTabBar.js
@@ -6,7 +6,8 @@ import {
TouchableWithoutFeedback,
StyleSheet,
View,
- Platform,
+ Keyboard,
+ Platform
} from 'react-native';
import { SafeAreaView } from '@react-navigation/native';
@@ -24,7 +25,7 @@ export type TabBarOptions = {
labelStyle: any,
tabStyle: any,
adaptive?: boolean,
- style: any,
+ style: any
};
type Props = TabBarOptions & {
@@ -40,7 +41,7 @@ type Props = TabBarOptions & {
renderIcon: any,
dimensions: { width: number, height: number },
isLandscape: boolean,
- safeAreaInset: { top: string, right: string, bottom: string, left: string },
+ safeAreaInset: { top: string, right: string, bottom: string, left: string }
};
const majorVersion = parseInt(Platform.Version, 10);
@@ -83,7 +84,67 @@ class TabBarBottom extends React.Component<Props> {
showIcon: true,
allowFontScaling: true,
adaptive: isIOS11,
- safeAreaInset: { bottom: 'always', top: 'never' },
+ safeAreaInset: { bottom: 'always', top: 'never' }
+ };
+
+ state = {
+ layout: { height: 0, width: 0 },
+ keyboard: false,
+ visible: new Animated.Value(1)
+ };
+
+ componentDidMount() {
+ if (Platform.OS === 'ios') {
+ Keyboard.addListener('keyboardWillShow', this._handleKeyboardShow);
+ Keyboard.addListener('keyboardWillHide', this._handleKeyboardHide);
+ } else {
+ Keyboard.addListener('keyboardDidShow', this._handleKeyboardShow);
+ Keyboard.addListener('keyboardDidHide', this._handleKeyboardHide);
+ }
+ }
+
+ componentWillUnmount() {
+ if (Platform.OS === 'ios') {
+ Keyboard.removeListener('keyboardWillShow', this._handleKeyboardShow);
+ Keyboard.removeListener('keyboardWillHide', this._handleKeyboardHide);
+ } else {
+ Keyboard.removeListener('keyboardDidShow', this._handleKeyboardShow);
+ Keyboard.removeListener('keyboardDidHide', this._handleKeyboardHide);
+ }
+ }
+
+ _handleKeyboardShow = () =>
+ this.setState({ keyboard: true }, () =>
+ Animated.timing(this.state.visible, {
+ toValue: 0,
+ duration: 150,
+ useNativeDriver: true
+ }).start()
+ );
+
+ _handleKeyboardHide = () =>
+ Animated.timing(this.state.visible, {
+ toValue: 1,
+ duration: 100,
+ useNativeDriver: true
+ }).start(() => {
+ this.setState({ keyboard: false });
+ });
+
+ _handleLayout = e => {
+ const { layout } = this.state;
+ const { height, width } = e.nativeEvent.layout;
+
+ if (height === layout.height && width === layout.width) {
+ return;
+ }
+
+ this.setState({
+ layout: {
+ height,
+ width
+ }
+ });
};
_renderLabel = ({ route, focused }) => {
@@ -93,7 +154,7 @@ class TabBarBottom extends React.Component<Props> {
labelStyle,
showLabel,
showIcon,
- allowFontScaling,
+ allowFontScaling
} = this.props;
if (showLabel === false) {
@@ -113,7 +174,7 @@ class TabBarBottom extends React.Component<Props> {
showIcon && this._shouldUseHorizontalLabels()
? styles.labelBeside
: styles.labelBeneath,
- labelStyle,
+ labelStyle
]}
allowFontScaling={allowFontScaling}
>
@@ -136,7 +197,7 @@ class TabBarBottom extends React.Component<Props> {
inactiveTintColor,
renderIcon,
showIcon,
- showLabel,
+ showLabel
} = this.props;
if (showIcon === false) {
return null;
@@ -160,7 +221,7 @@ class TabBarBottom extends React.Component<Props> {
style={[
styles.iconWithExplicitHeight,
showLabel === false && !horizontal && styles.iconWithoutLabel,
- showLabel !== false && !horizontal && styles.iconWithLabel,
+ showLabel !== false && !horizontal && styles.iconWithLabel
]}
/>
);
@@ -202,7 +263,7 @@ class TabBarBottom extends React.Component<Props> {
onTabLongPress,
safeAreaInset,
style,
- tabStyle,
+ tabStyle
} = this.props;
const { routes } = navigation.state;
@@ -212,49 +273,73 @@ class TabBarBottom extends React.Component<Props> {
this._shouldUseHorizontalLabels() && !Platform.isPad
? styles.tabBarCompact
: styles.tabBarRegular,
- style,
+ style
];
return (
- <SafeAreaView style={tabBarStyle} forceInset={safeAreaInset}>
- {routes.map((route, index) => {
- const focused = index === navigation.state.index;
- const scene = { route, focused };
- const accessibilityLabel = this.props.getAccessibilityLabel({
- route,
- });
- const testID = this.props.getTestID({ route });
-
- const backgroundColor = focused
- ? activeBackgroundColor
- : inactiveBackgroundColor;
-
- const ButtonComponent =
- this.props.getButtonComponent({ route }) ||
- TouchableWithoutFeedbackWrapper;
-
- return (
- <ButtonComponent
- key={route.key}
- onPress={() => onTabPress({ route })}
- onLongPress={() => onTabLongPress({ route })}
- testID={testID}
- accessibilityLabel={accessibilityLabel}
- style={[
- styles.tab,
- { backgroundColor },
- this._shouldUseHorizontalLabels()
- ? styles.tabLandscape
- : styles.tabPortrait,
- tabStyle,
- ]}
- >
- {this._renderIcon(scene)}
- {this._renderLabel(scene)}
- </ButtonComponent>
- );
- })}
- </SafeAreaView>
+ <Animated.View
+ style={[
+ styles.container,
+ {
+ // When the keyboard is shown, slide down the tab bar
+ transform: [
+ {
+ translateY: this.state.visible.interpolate({
+ inputRange: [0, 1],
+ outputRange: [this.state.layout.height, 0]
+ })
+ }
+ ],
+ // Absolutely position the tab bar so that the content is below it
+ // This is needed to avoid gap at bottom when the tab bar is hidden
+ position: this.state.keyboard ? 'absolute' : null
+ }
+ ]}
+ pointerEvents={
+ this.state.keyboard ? 'none' : 'auto'
+ }
+ onLayout={this._handleLayout}
+ >
+ <SafeAreaView style={tabBarStyle} forceInset={safeAreaInset}>
+ {routes.map((route, index) => {
+ const focused = index === navigation.state.index;
+ const scene = { route, focused };
+ const accessibilityLabel = this.props.getAccessibilityLabel({
+ route
+ });
+ const testID = this.props.getTestID({ route });
+
+ const backgroundColor = focused
+ ? activeBackgroundColor
+ : inactiveBackgroundColor;
+
+ const ButtonComponent =
+ this.props.getButtonComponent({ route }) ||
+ TouchableWithoutFeedbackWrapper;
+
+ return (
+ <ButtonComponent
+ key={route.key}
+ onPress={() => onTabPress({ route })}
+ onLongPress={() => onTabLongPress({ route })}
+ testID={testID}
+ accessibilityLabel={accessibilityLabel}
+ style={[
+ styles.tab,
+ { backgroundColor },
+ this._shouldUseHorizontalLabels()
+ ? styles.tabLandscape
+ : styles.tabPortrait,
+ tabStyle
+ ]}
+ >
+ {this._renderIcon(scene)}
+ {this._renderLabel(scene)}
+ </ButtonComponent>
+ );
+ })}
+ </SafeAreaView>
+ </Animated.View>
);
}
}
@@ -267,47 +352,47 @@ const styles = StyleSheet.create({
backgroundColor: '#fff',
borderTopWidth: StyleSheet.hairlineWidth,
borderTopColor: 'rgba(0, 0, 0, .3)',
- flexDirection: 'row',
+ flexDirection: 'row'
},
tabBarCompact: {
- height: COMPACT_HEIGHT,
+ height: COMPACT_HEIGHT
},
tabBarRegular: {
- height: DEFAULT_HEIGHT,
+ height: DEFAULT_HEIGHT
},
tab: {
flex: 1,
- alignItems: isIos ? 'center' : 'stretch',
+ alignItems: isIos ? 'center' : 'stretch'
},
tabPortrait: {
justifyContent: 'flex-end',
- flexDirection: 'column',
+ flexDirection: 'column'
},
tabLandscape: {
justifyContent: 'center',
- flexDirection: 'row',
+ flexDirection: 'row'
},
iconWithoutLabel: {
- flex: 1,
+ flex: 1
},
iconWithLabel: {
- flex: 1,
+ flex: 1
},
iconWithExplicitHeight: {
- height: Platform.isPad ? DEFAULT_HEIGHT : COMPACT_HEIGHT,
+ height: Platform.isPad ? DEFAULT_HEIGHT : COMPACT_HEIGHT
},
label: {
textAlign: 'center',
- backgroundColor: 'transparent',
+ backgroundColor: 'transparent'
},
labelBeneath: {
fontSize: 11,
- marginBottom: 1.5,
+ marginBottom: 1.5
},
labelBeside: {
fontSize: 12,
- marginLeft: 15,
- },
+ marginLeft: 15
+ }
});
export default withDimensions(TabBarBottom);