From 7658cbcb165ff1961eca92165a1836af700a2715 Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet <vergnet@etud.insa-toulouse.fr> Date: Wed, 27 May 2020 15:30:01 +0200 Subject: [PATCH] Added safe area for tab bar --- src/components/Tabbar/CustomTabBar.js | 53 ++++++++++++++------------- 1 file changed, 28 insertions(+), 25 deletions(-) diff --git a/src/components/Tabbar/CustomTabBar.js b/src/components/Tabbar/CustomTabBar.js index c83c175..481a334 100644 --- a/src/components/Tabbar/CustomTabBar.js +++ b/src/components/Tabbar/CustomTabBar.js @@ -3,6 +3,7 @@ import {withTheme} from 'react-native-paper'; import TabIcon from "./TabIcon"; import TabHomeIcon from "./TabHomeIcon"; import {Animated} from 'react-native'; +import {SafeAreaView} from 'react-native-safe-area-context'; type Props = { state: Object, @@ -67,13 +68,13 @@ class CustomTabBar extends React.Component<Props, State> { } tabBarIcon = (route, focused) => { - let icon = TAB_ICONS[route.name]; - icon = focused ? icon : icon + ('-outline'); - if (route.name !== "home") - return icon; - else - return null; -}; + let icon = TAB_ICONS[route.name]; + icon = focused ? icon : icon + ('-outline'); + if (route.name !== "home") + return icon; + else + return null; + }; onRouteChange = () => { @@ -134,24 +135,26 @@ class CustomTabBar extends React.Component<Props, State> { render() { this.props.navigation.addListener('state', this.onRouteChange); return ( - <Animated.View - ref={this.tabRef} - // animation={"fadeInUp"} - // duration={500} - // useNativeDriver - style={{ - flexDirection: 'row', - height: CustomTabBar.TAB_BAR_HEIGHT, - width: '100%', - position: 'absolute', - bottom: 0, - left: 0, - backgroundColor: this.props.theme.colors.surface, - transform: [{translateY: this.state.translateY}] - }} - > - {this.props.state.routes.map(this.renderIcon)} - </Animated.View> + <SafeAreaView> + <Animated.View + ref={this.tabRef} + // animation={"fadeInUp"} + // duration={500} + // useNativeDriver + style={{ + flexDirection: 'row', + height: CustomTabBar.TAB_BAR_HEIGHT, + width: '100%', + position: 'absolute', + bottom: 0, + left: 0, + backgroundColor: this.props.theme.colors.surface, + transform: [{translateY: this.state.translateY}] + }} + > + {this.props.state.routes.map(this.renderIcon)} + </Animated.View> + </SafeAreaView> ); } }