Revert "Collapse header when scrolling"

This reverts commit f70a289c
This commit is contained in:
Arnaud Vergnet 2020-04-12 00:34:41 +02:00
parent f70a289cdf
commit f12029eae9
4 changed files with 13 additions and 40 deletions

View file

@ -52,7 +52,6 @@
"react-native-safe-area-context": "0.7.3", "react-native-safe-area-context": "0.7.3",
"react-native-screens": "~2.2.0", "react-native-screens": "~2.2.0",
"react-native-webview": "8.1.1", "react-native-webview": "8.1.1",
"react-navigation-collapsible": "^5.4.0",
"react-navigation-header-buttons": "^3.0.5" "react-navigation-header-buttons": "^3.0.5"
}, },
"devDependencies": { "devDependencies": {

View file

@ -13,12 +13,12 @@ import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen";
import PlanexScreen from '../screens/Websites/PlanexScreen'; import PlanexScreen from '../screens/Websites/PlanexScreen';
import {MaterialCommunityIcons} from "@expo/vector-icons"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import AsyncStorageManager from "../managers/AsyncStorageManager"; import AsyncStorageManager from "../managers/AsyncStorageManager";
import {useTheme, withTheme} from 'react-native-paper'; import {withTheme} from 'react-native-paper';
import i18n from "i18n-js"; import i18n from "i18n-js";
import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen"; import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
import ScannerScreen from "../screens/ScannerScreen"; import ScannerScreen from "../screens/ScannerScreen";
import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton"; import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
import {createCollapsibleStack} from 'react-navigation-collapsible';
const TAB_ICONS = { const TAB_ICONS = {
home: 'triangle', home: 'triangle',
@ -44,9 +44,7 @@ function getDrawerButton(navigation: Object) {
const ProximoStack = createStackNavigator(); const ProximoStack = createStackNavigator();
function ProximoStackComponent(props: Object) { function ProximoStackComponent() {
const {colors} = useTheme();
return ( return (
<ProximoStack.Navigator <ProximoStack.Navigator
initialRouteName="index" initialRouteName="index"
@ -64,19 +62,13 @@ function ProximoStackComponent(props: Object) {
}} }}
component={ProximoMainScreen} component={ProximoMainScreen}
/> />
{createCollapsibleStack(
<ProximoStack.Screen <ProximoStack.Screen
name="proximo-list" name="proximo-list"
options={{ options={{
title: i18n.t('screens.proximoArticles') title: i18n.t('screens.proximoArticles')
}} }}
component={ProximoListScreen} component={ProximoListScreen}
/>, />
{
collapsedColor: colors.surface,
useNativeDriver: true /* Optional, default: true */,
}
)}
<ProximoStack.Screen <ProximoStack.Screen
name="proximo-about" name="proximo-about"
component={ProximoAboutScreen} component={ProximoAboutScreen}

View file

@ -1,16 +1,13 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Animated, FlatList, Image, Platform, ScrollView, View} from "react-native"; import {FlatList, Image, Platform, ScrollView, View} from "react-native";
import i18n from "i18n-js"; import i18n from "i18n-js";
import CustomModal from "../../components/Custom/CustomModal"; import CustomModal from "../../components/Custom/CustomModal";
import {RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper"; import {RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
import {stringMatchQuery} from "../../utils/Search"; import {stringMatchQuery} from "../../utils/Search";
import ProximoListItem from "../../components/Lists/ProximoListItem"; import ProximoListItem from "../../components/Lists/ProximoListItem";
import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton"; import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";
import {withCollapsible} from "../../utils/withCollapsible";
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
function sortPrice(a, b) { function sortPrice(a, b) {
return a.price - b.price; return a.price - b.price;
@ -42,7 +39,6 @@ type Props = {
navigation: Object, navigation: Object,
route: Object, route: Object,
theme: Object, theme: Object,
collapsibleStack: Object,
} }
type State = { type State = {
@ -326,9 +322,7 @@ class ProximoListScreen extends React.Component<Props, State> {
itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index}); itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
render() { render() {
const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
return ( return (
<View style={{ <View style={{
height: '100%' height: '100%'
@ -337,7 +331,7 @@ class ProximoListScreen extends React.Component<Props, State> {
{this.state.modalCurrentDisplayItem} {this.state.modalCurrentDisplayItem}
</CustomModal> </CustomModal>
{/*$FlowFixMe*/} {/*$FlowFixMe*/}
<AnimatedFlatList <FlatList
data={this.listData} data={this.listData}
extraData={this.state.currentSearchString + this.state.currentSortMode} extraData={this.state.currentSearchString + this.state.currentSortMode}
keyExtractor={this.keyExtractor} keyExtractor={this.keyExtractor}
@ -346,14 +340,10 @@ class ProximoListScreen extends React.Component<Props, State> {
removeClippedSubviews={true} removeClippedSubviews={true}
getItemLayout={this.itemLayout} getItemLayout={this.itemLayout}
initialNumToRender={10} initialNumToRender={10}
// Animations
onScroll={onScroll}
contentContainerStyle={{paddingTop: containerPaddingTop}}
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
/> />
</View> </View>
); );
} }
} }
export default withCollapsible(withTheme(ProximoListScreen)); export default withTheme(ProximoListScreen);

View file

@ -1,8 +0,0 @@
import React from 'react';
import {useCollapsibleStack} from "react-navigation-collapsible";
export const withCollapsible = (Component: any) => {
return (props: any) => {
return <Component collapsibleStack={useCollapsibleStack()} {...props} />;
};
};