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 { 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 { labelStyle, showLabel, showIcon, - allowFontScaling, + allowFontScaling } = this.props; if (showLabel === false) { @@ -113,7 +174,7 @@ class TabBarBottom extends React.Component { showIcon && this._shouldUseHorizontalLabels() ? styles.labelBeside : styles.labelBeneath, - labelStyle, + labelStyle ]} allowFontScaling={allowFontScaling} > @@ -136,7 +197,7 @@ class TabBarBottom extends React.Component { inactiveTintColor, renderIcon, showIcon, - showLabel, + showLabel } = this.props; if (showIcon === false) { return null; @@ -160,7 +221,7 @@ class TabBarBottom extends React.Component { 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 { onTabLongPress, safeAreaInset, style, - tabStyle, + tabStyle } = this.props; const { routes } = navigation.state; @@ -212,49 +273,73 @@ class TabBarBottom extends React.Component { this._shouldUseHorizontalLabels() && !Platform.isPad ? styles.tabBarCompact : styles.tabBarRegular, - style, + style ]; return ( - - {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 ( - 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)} - - ); - })} - + ); } } @@ -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);