322 lines
9.4 KiB
Diff
322 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);
|