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-screens": "~2.2.0",
"react-native-webview": "8.1.1",
"react-navigation-collapsible": "^5.4.0",
"react-navigation-header-buttons": "^3.0.5"
},
"devDependencies": {

View file

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

View file

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