Improved tab hiding by following header animation

This commit is contained in:
Arnaud Vergnet 2020-04-18 16:55:08 +02:00
parent 91853092be
commit 7f5ade5999
5 changed files with 40 additions and 47 deletions

2
App.js
View file

@ -62,7 +62,7 @@ export default class App extends React.Component<Props, State> {
this.defaultData = {}; this.defaultData = {};
this.urlHandler = new URLHandler(this.onInitialURLParsed, this.onDetectURL); this.urlHandler = new URLHandler(this.onInitialURLParsed, this.onDetectURL);
this.urlHandler.listen(); this.urlHandler.listen();
setSafeBounceHeight(Platform.OS === 'ios' ? 100 : 0); setSafeBounceHeight(Platform.OS === 'ios' ? 100 : 20);
} }
onInitialURLParsed = ({route, data}: Object) => { onInitialURLParsed = ({route, data}: Object) => {

View file

@ -9,7 +9,6 @@ import ErrorView from "../Custom/ErrorView";
import BasicLoadingScreen from "../Custom/BasicLoadingScreen"; import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
import {withCollapsible} from "../../utils/withCollapsible"; import {withCollapsible} from "../../utils/withCollapsible";
import * as Animatable from 'react-native-animatable'; import * as Animatable from 'react-native-animatable';
import AutoHideHandler from "../../utils/AutoHideHandler";
import CustomTabBar from "../Tabbar/CustomTabBar"; import CustomTabBar from "../Tabbar/CustomTabBar";
type Props = { type Props = {
@ -52,9 +51,9 @@ class WebSectionList extends React.PureComponent<Props, State> {
itemHeight: null, itemHeight: null,
}; };
scrollRef: Object;
refreshInterval: IntervalID; refreshInterval: IntervalID;
lastRefresh: Date; lastRefresh: Date;
hideHandler: AutoHideHandler;
state = { state = {
refreshing: false, refreshing: false,
@ -75,8 +74,6 @@ class WebSectionList extends React.PureComponent<Props, State> {
this.onFetchSuccess = this.onFetchSuccess.bind(this); this.onFetchSuccess = this.onFetchSuccess.bind(this);
this.onFetchError = this.onFetchError.bind(this); this.onFetchError = this.onFetchError.bind(this);
this.getEmptySectionHeader = this.getEmptySectionHeader.bind(this); this.getEmptySectionHeader = this.getEmptySectionHeader.bind(this);
this.hideHandler = new AutoHideHandler(false);
this.hideHandler.addListener(this.onHideChange);
} }
/** /**
@ -88,6 +85,7 @@ class WebSectionList extends React.PureComponent<Props, State> {
const onScreenBlur = this.onScreenBlur.bind(this); const onScreenBlur = this.onScreenBlur.bind(this);
this.props.navigation.addListener('focus', onScreenFocus); this.props.navigation.addListener('focus', onScreenFocus);
this.props.navigation.addListener('blur', onScreenBlur); this.props.navigation.addListener('blur', onScreenBlur);
this.scrollRef = React.createRef();
this.onRefresh(); this.onRefresh();
} }
@ -99,6 +97,8 @@ class WebSectionList extends React.PureComponent<Props, State> {
this.onRefresh(); this.onRefresh();
if (this.props.autoRefreshTime > 0) if (this.props.autoRefreshTime > 0)
this.refreshInterval = setInterval(this.onRefresh, this.props.autoRefreshTime) this.refreshInterval = setInterval(this.onRefresh, this.props.autoRefreshTime)
// if (this.scrollRef.current) // Reset scroll to top
// this.scrollRef.current.getNode().scrollToLocation({animated:false, itemIndex:0, sectionIndex:0});
} }
/** /**
@ -205,15 +205,10 @@ class WebSectionList extends React.PureComponent<Props, State> {
} }
onScroll = (event: Object) => { onScroll = (event: Object) => {
this.hideHandler.onScroll(event);
if (this.props.onScroll) if (this.props.onScroll)
this.props.onScroll(event); this.props.onScroll(event);
} }
onHideChange = (shouldHide: boolean) => {
this.props.navigation.setParams({hideTabBar: shouldHide});
}
render() { render() {
let dataset = []; let dataset = [];
if (this.state.fetchedData !== undefined) if (this.state.fetchedData !== undefined)
@ -224,6 +219,7 @@ class WebSectionList extends React.PureComponent<Props, State> {
<View> <View>
{/*$FlowFixMe*/} {/*$FlowFixMe*/}
<Animated.SectionList <Animated.SectionList
ref={this.scrollRef}
sections={dataset} sections={dataset}
extraData={this.props.updateData} extraData={this.props.updateData}
refreshControl={ refreshControl={

View file

@ -11,7 +11,6 @@ import {Linking} from "expo";
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import {Animated, BackHandler} from "react-native"; import {Animated, BackHandler} from "react-native";
import {withCollapsible} from "../../utils/withCollapsible"; import {withCollapsible} from "../../utils/withCollapsible";
import AutoHideHandler from "../../utils/AutoHideHandler";
type Props = { type Props = {
navigation: Object, navigation: Object,
@ -34,7 +33,6 @@ class WebViewScreen extends React.PureComponent<Props> {
}; };
webviewRef: Object; webviewRef: Object;
hideHandler: AutoHideHandler;
canGoBack: boolean; canGoBack: boolean;
@ -42,8 +40,6 @@ class WebViewScreen extends React.PureComponent<Props> {
super(); super();
this.webviewRef = React.createRef(); this.webviewRef = React.createRef();
this.canGoBack = false; this.canGoBack = false;
this.hideHandler = new AutoHideHandler(false);
this.hideHandler.addListener(this.onHideChange);
} }
/** /**
@ -136,15 +132,10 @@ class WebViewScreen extends React.PureComponent<Props> {
} }
onScroll = (event: Object) => { onScroll = (event: Object) => {
this.hideHandler.onScroll(event);
if (this.props.onScroll) if (this.props.onScroll)
this.props.onScroll(event); this.props.onScroll(event);
} }
onHideChange = (shouldHide: boolean) => {
this.props.navigation.setParams({hideTabBar: shouldHide});
}
render() { render() {
const {containerPaddingTop, onScrollWithListener} = this.props.collapsibleStack; const {containerPaddingTop, onScrollWithListener} = this.props.collapsibleStack;
return ( return (

View file

@ -2,33 +2,45 @@ import * as React from 'react';
import {withTheme} from 'react-native-paper'; import {withTheme} from 'react-native-paper';
import TabIcon from "./TabIcon"; import TabIcon from "./TabIcon";
import TabHomeIcon from "./TabHomeIcon"; import TabHomeIcon from "./TabHomeIcon";
import * as Animatable from 'react-native-animatable'; import {AnimatedValue} from "react-native-reanimated";
import {Animated} from 'react-native';
type Props = { type Props = {
state: Object, state: Object,
descriptors: Object, descriptors: Object,
navigation: Object, navigation: Object,
theme: Object, theme: Object,
collapsibleStack: Object,
}
type State = {
translateY: AnimatedValue,
} }
/** /**
* Abstraction layer for Agenda component, using custom configuration * Abstraction layer for Agenda component, using custom configuration
*/ */
class CustomTabBar extends React.Component<Props> { 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?
state = {
translateY: new Animated.Value(0),
}
// shouldComponentUpdate(nextProps: Props): boolean { // shouldComponentUpdate(nextProps: Props): boolean {
// return (nextProps.theme.dark !== this.props.theme.dark) // return (nextProps.theme.dark !== this.props.theme.dark)
// || (nextProps.state.index !== this.props.state.index); // || (nextProps.state.index !== this.props.state.index);
// } // }
isHidden: boolean;
tabRef: Object; tabRef: Object;
constructor() { constructor() {
super(); super();
this.tabRef = React.createRef(); this.tabRef = React.createRef();
this.barSynced = false;
} }
onItemPress(route: Object, currentIndex: number, destIndex: number) { onItemPress(route: Object, currentIndex: number, destIndex: number) {
@ -38,6 +50,7 @@ class CustomTabBar extends React.Component<Props> {
canPreventDefault: true, canPreventDefault: true,
}); });
if (currentIndex !== destIndex && !event.defaultPrevented) { if (currentIndex !== destIndex && !event.defaultPrevented) {
this.state.translateY = new Animated.Value(0);
this.props.navigation.navigate(route.name, { this.props.navigation.navigate(route.name, {
screen: 'index', screen: 'index',
params: {animationDir: currentIndex < destIndex ? "right" : "left"} params: {animationDir: currentIndex < destIndex ? "right" : "left"}
@ -45,16 +58,21 @@ class CustomTabBar extends React.Component<Props> {
} }
} }
onRouteChange = () => {
this.barSynced = false;
}
render() { render() {
const state = this.props.state; const state = this.props.state;
const descriptors = this.props.descriptors; const descriptors = this.props.descriptors;
const navigation = this.props.navigation; const navigation = this.props.navigation;
this.props.navigation.addListener('state', this.onRouteChange);
return ( return (
<Animatable.View <Animated.View
ref={this.tabRef} ref={this.tabRef}
animation={"fadeInUp"} // animation={"fadeInUp"}
duration={500} // duration={500}
useNativeDriver // useNativeDriver
style={{ style={{
flexDirection: 'row', flexDirection: 'row',
height: CustomTabBar.TAB_BAR_HEIGHT, height: CustomTabBar.TAB_BAR_HEIGHT,
@ -63,6 +81,7 @@ class CustomTabBar extends React.Component<Props> {
bottom: 0, bottom: 0,
left: 0, left: 0,
backgroundColor: this.props.theme.colors.surface, backgroundColor: this.props.theme.colors.surface,
transform: [{translateY: this.state.translateY}]
}} }}
> >
{state.routes.map((route, index) => { {state.routes.map((route, index) => {
@ -85,18 +104,14 @@ class CustomTabBar extends React.Component<Props> {
}); });
}; };
if (isFocused) { if (isFocused) {
const tabVisible = options.tabBarVisible(); const stackState = route.state;
console.log(tabVisible); const stackRoute = route.state ? stackState.routes[stackState.index] : undefined;
if (this.tabRef.current) { const params = stackRoute ? stackRoute.params : undefined;
if (this.isHidden && tabVisible) { const collapsible = params ? params.collapsible : undefined;
this.isHidden = false; if (collapsible && !this.barSynced) {
this.tabRef.current.slideInUp(300); this.barSynced = true;
} else if (!this.isHidden && !tabVisible){ this.setState({translateY: Animated.multiply(-1.5, collapsible.translateY)});
this.isHidden = true;
this.tabRef.current.slideOutDown(300);
}
} }
} }
const color = isFocused ? options.activeColor : options.inactiveColor; const color = isFocused ? options.activeColor : options.inactiveColor;
@ -120,7 +135,7 @@ class CustomTabBar extends React.Component<Props> {
key={route.key} key={route.key}
/> />
})} })}
</Animatable.View> </Animated.View>
); );
} }
} }

View file

@ -343,15 +343,6 @@ class TabNavigator extends React.Component<Props> {
else else
return null; return null;
}, },
tabBarVisible: () => {
const state = route.state;
// Get the current route in the stack
const screen = state ? state.routes[state.index] : undefined;
const params = screen ? screen.params : undefined;
const hideTabBar = params ? params.hideTabBar : undefined;
return hideTabBar !== undefined ? !hideTabBar : true;
},
animationEnabled: true,
tabBarLabel: route.name !== 'home' ? undefined : '', tabBarLabel: route.name !== 'home' ? undefined : '',
activeColor: this.props.theme.colors.primary, activeColor: this.props.theme.colors.primary,
inactiveColor: this.props.theme.colors.tabIcon, inactiveColor: this.props.theme.colors.tabIcon,