vergnet/application-amicale
5
5
Fork 5
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 TabIcon from "./TabIcon";
import TabHomeIcon from "./TabHomeIcon"; import TabHomeIcon from "./TabHomeIcon";
import {Animated} from 'react-native'; import {Animated} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
type Props = { type Props = {
state: Object, state: Object,
@ -67,13 +68,13 @@ class CustomTabBar extends React.Component<Props, State> {
} }
tabBarIcon = (route, focused) => { tabBarIcon = (route, focused) => {
let icon = TAB_ICONS[route.name]; let icon = TAB_ICONS[route.name];
icon = focused ? icon : icon + ('-outline'); icon = focused ? icon : icon + ('-outline');
if (route.name !== "home") if (route.name !== "home")
return icon; return icon;
else else
return null; return null;
}; };
onRouteChange = () => { onRouteChange = () => {
@ -134,24 +135,26 @@ class CustomTabBar extends React.Component<Props, State> {
render() { render() {
this.props.navigation.addListener('state', this.onRouteChange); this.props.navigation.addListener('state', this.onRouteChange);
return ( return (
<Animated.View <SafeAreaView>
ref={this.tabRef} <Animated.View
// animation={"fadeInUp"} ref={this.tabRef}
// duration={500} // animation={"fadeInUp"}
// useNativeDriver // duration={500}
style={{ // useNativeDriver
flexDirection: 'row', style={{
height: CustomTabBar.TAB_BAR_HEIGHT, flexDirection: 'row',
width: '100%', height: CustomTabBar.TAB_BAR_HEIGHT,
position: 'absolute', width: '100%',
bottom: 0, position: 'absolute',
left: 0, bottom: 0,
backgroundColor: this.props.theme.colors.surface, left: 0,
transform: [{translateY: this.state.translateY}] backgroundColor: this.props.theme.colors.surface,
}} transform: [{translateY: this.state.translateY}]
> }}
{this.props.state.routes.map(this.renderIcon)} >
</Animated.View> {this.props.state.routes.map(this.renderIcon)}
</Animated.View>
</SafeAreaView>
); );
} }
} }