lpitault/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Added safe area for tab bar

Browse source
This commit is contained in:
Arnaud Vergnet 2020-05-27 15:30:01 +02:00
parent a27d0b7fa6
commit 7658cbcb16
1 changed files with 28 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/components/Tabbar/CustomTabBar.js
View file

@ -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>
);
}
}