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

Fixed tab bar losing sync with header when navigating back in same stack

Browse source
This commit is contained in:
Arnaud Vergnet 2020-04-20 09:42:34 +02:00
parent 80ff70c1f7
commit 1dbfe29037
1 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -14,6 +14,7 @@ type Props = {
type State = {
translateY: AnimatedValue,
barSynced: boolean,
}
const TAB_ICONS = {
@ -30,12 +31,12 @@ class CustomTabBar extends React.Component<Props, State> {
static TAB_BAR_HEIGHT = 48;
barSynced: boolean; // Is the bar synced with the header for animations?
activeColor: string;
inactiveColor: string;
state = {
translateY: new Animated.Value(0),
barSynced: false,// Is the bar synced with the header for animations?
}
// shouldComponentUpdate(nextProps: Props): boolean {
@ -48,7 +49,6 @@ class CustomTabBar extends React.Component<Props, State> {
constructor(props) {
super(props);
this.tabRef = React.createRef();
this.barSynced = false;
this.activeColor = props.theme.colors.primary;
this.inactiveColor = props.theme.colors.tabIcon;
}
@ -79,7 +79,7 @@ class CustomTabBar extends React.Component<Props, State> {
onRouteChange = () => {
this.barSynced = false;
this.setState({barSynced: false});
}
renderIcon = (route, index) => {
@ -107,9 +107,11 @@ class CustomTabBar extends React.Component<Props, State> {
const stackRoute = route.state ? stackState.routes[stackState.index] : undefined;
const params = stackRoute ? stackRoute.params : undefined;
const collapsible = params ? params.collapsible : undefined;
if (collapsible && !this.barSynced) {
this.barSynced = true;
this.setState({translateY: Animated.multiply(-1.5, collapsible.translateY)});
if (collapsible && !this.state.barSynced) {
this.setState({
translateY: Animated.multiply(-1.5, collapsible.translateY),
barSynced: true,
});
}
}