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