vergnet/application-amicale
5
5
Fork 5
Code Issues Pull requests Releases Wiki Activity

Compare commits

base: vergnet:c67e2fa40585e04241ae468b0649af6fca8ff4c3
Branches Tags
vergnet:master
vergnet:functional-migration
vergnet:v5.0.0-3
vergnet:v5.0.0-2
vergnet:4.1.0
vergnet:4.0.1
vergnet:3.0.7
..
compare: vergnet:d22e7bb50d12520128f7d8f55c1290782d7fa53c
Branches Tags
vergnet:master
vergnet:functional-migration
vergnet:v5.0.0-3
vergnet:v5.0.0-2
vergnet:4.1.0
vergnet:4.0.1
vergnet:3.0.7

No commits in common. "c67e2fa40585e04241ae468b0649af6fca8ff4c3" and "d22e7bb50d12520128f7d8f55c1290782d7fa53c" have entirely different histories.
c67e2fa405 ... d22e7bb50d

10 changed files with 164 additions and 374 deletions
Show stats Expand all files Collapse all files

1
package.json
View file

@ -51,7 +51,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": {

12
src/components/Custom/BasicLoadingScreen.js
View file

@ -1,8 +1,8 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {View} from 'react-native';
import {ActivityIndicator, withTheme} from 'react-native-paper'; import {ActivityIndicator, withTheme} from 'react-native-paper';
import {View} from "react-native";
/** /**
* Component used to display a header button * Component used to display a header button
@ -12,19 +12,17 @@ import {ActivityIndicator, withTheme} from 'react-native-paper';
*/ */
function BasicLoadingScreen(props) { function BasicLoadingScreen(props) {
const {colors} = props.theme; const {colors} = props.theme;
let position = undefined;
if (props.isAbsolute !== undefined && props.isAbsolute)
position = 'absolute';
return ( return (
<View style={{ <View style={{
backgroundColor: colors.background, backgroundColor: colors.background,
position: position, position: 'absolute',
top: 0, top: 0,
right: 0, right: 0,
width: '100%', width: '100%',
height: '100%', height: '100%',
justifyContent: 'center', flex: 1,
alignItems: 'center',
justifyContent: 'center'
}}> }}>
<ActivityIndicator <ActivityIndicator
animating={true} animating={true}

21
src/components/Lists/WebSectionList.js
View file

@ -7,7 +7,6 @@ import {Snackbar} from 'react-native-paper';
import {Animated, RefreshControl, View} from "react-native"; import {Animated, RefreshControl, View} from "react-native";
import ErrorView from "../Custom/ErrorView"; import ErrorView from "../Custom/ErrorView";
import BasicLoadingScreen from "../Custom/BasicLoadingScreen"; import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
import {withCollapsible} from "../../utils/withCollapsible";
type Props = { type Props = {
navigation: Object, navigation: Object,
@ -21,7 +20,6 @@ type Props = {
updateData: number, updateData: number,
itemHeight: number | null, itemHeight: number | null,
onScroll: Function, onScroll: Function,
collapsibleStack: Object,
} }
type State = { type State = {
@ -33,14 +31,13 @@ type State = {
const MIN_REFRESH_TIME = 5 * 1000; const MIN_REFRESH_TIME = 5 * 1000;
/** /**
* Component used to render a SectionList with data fetched from the web * Component used to render a SectionList with data fetched from the web
* *
* This is a pure component, meaning it will only update if a shallow comparison of state and props is different. * This is a pure component, meaning it will only update if a shallow comparison of state and props is different.
* To force the component to update, change the value of updateData. * To force the component to update, change the value of updateData.
*/ */
class WebSectionList extends React.PureComponent<Props, State> { export default class WebSectionList extends React.PureComponent<Props, State> {
static defaultProps = { static defaultProps = {
renderSectionHeader: null, renderSectionHeader: null,
@ -174,16 +171,11 @@ class WebSectionList extends React.PureComponent<Props, State> {
index index
}); });
onListScroll= (event) => {
};
render() { render() {
let dataset = []; let dataset = [];
if (this.state.fetchedData !== undefined) if (this.state.fetchedData !== undefined)
dataset = this.props.createDataset(this.state.fetchedData); dataset = this.props.createDataset(this.state.fetchedData);
const shouldRenderHeader = this.props.renderSectionHeader !== null; const shouldRenderHeader = this.props.renderSectionHeader !== null;
const {containerPaddingTop, scrollIndicatorInsetTop, onScrollWithListener} = this.props.collapsibleStack;
return ( return (
<View> <View>
{/*$FlowFixMe*/} {/*$FlowFixMe*/}
@ -192,7 +184,6 @@ class WebSectionList extends React.PureComponent<Props, State> {
extraData={this.props.updateData} extraData={this.props.updateData}
refreshControl={ refreshControl={
<RefreshControl <RefreshControl
progressViewOffset={containerPaddingTop}
refreshing={this.state.refreshing} refreshing={this.state.refreshing}
onRefresh={this.onRefresh} onRefresh={this.onRefresh}
/> />
@ -202,6 +193,7 @@ class WebSectionList extends React.PureComponent<Props, State> {
//$FlowFixMe //$FlowFixMe
renderItem={this.props.renderItem} renderItem={this.props.renderItem}
stickySectionHeadersEnabled={this.props.stickyHeader} stickySectionHeadersEnabled={this.props.stickyHeader}
contentContainerStyle={{minHeight: '100%'}}
style={{minHeight: '100%'}} style={{minHeight: '100%'}}
ListEmptyComponent={this.state.refreshing ListEmptyComponent={this.state.refreshing
? <BasicLoadingScreen/> ? <BasicLoadingScreen/>
@ -212,12 +204,7 @@ class WebSectionList extends React.PureComponent<Props, State> {
} }
getItemLayout={this.props.itemHeight !== null ? this.itemLayout : undefined} getItemLayout={this.props.itemHeight !== null ? this.itemLayout : undefined}
// Animations // Animations
onScroll={onScrollWithListener(this.props.onScroll)} onScroll={this.props.onScroll}
contentContainerStyle={{
paddingTop: containerPaddingTop,
minHeight: '100%'
}}
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
/> />
<Snackbar <Snackbar
visible={this.state.snackbarVisible} visible={this.state.snackbarVisible}
@ -235,5 +222,3 @@ class WebSectionList extends React.PureComponent<Props, State> {
); );
} }
} }
export default withCollapsible(WebSectionList);

51
src/components/Screens/WebViewScreen.js
View file

@ -9,18 +9,14 @@ import MaterialHeaderButtons, {Item} from '../Custom/HeaderButton';
import {HiddenItem} from "react-navigation-header-buttons"; import {HiddenItem} from "react-navigation-header-buttons";
import {Linking} from "expo"; import {Linking} from "expo";
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import {Animated, BackHandler} from "react-native"; import {BackHandler} from "react-native";
import {withCollapsible} from "../../utils/withCollapsible";
type Props = { type Props = {
navigation: Object, navigation: Object,
url: string, url: string,
customJS: string, customJS: string,
collapsibleStack: Object,
} }
const AnimatedWebView = Animated.createAnimatedComponent(WebView);
/** /**
* Class defining a webview screen. * Class defining a webview screen.
*/ */
@ -67,7 +63,7 @@ class WebViewScreen extends React.PureComponent<Props> {
} }
onBackButtonPressAndroid = () => { onBackButtonPressAndroid = () => {
if (this.canGoBack) { if (this.canGoBack){
this.onGoBackClicked(); this.onGoBackClicked();
return true; return true;
} }
@ -116,48 +112,15 @@ class WebViewScreen extends React.PureComponent<Props> {
* *
* @return {*} * @return {*}
*/ */
getRenderLoading = () => <BasicLoadingScreen isAbsolute={true}/>; getRenderLoading = () => <BasicLoadingScreen/>;
// document.getElementsByTagName('body')[0].style.paddingTop = '100px';
// $( 'body *' ).filter(function(){
// var position = $(this).css('position');
// var top = $(this).css('top');
// if((position === 'fixed') && top !== 'auto'){
// console.log(top);
// $(this).css('top', 'calc(' + top + ' + 100px)');
// console.log($(this).css('top'));
// };
// });
// document.querySelectorAll('body *').forEach(function(node){
// var style = window.getComputedStyle(node);
// var position = style.getPropertyValue('position');
// var top = style.getPropertyValue('top');
// if((position === 'fixed') && top !== 'auto'){
// console.log(top);
// node.style.top = 'calc(' + top + ' + 100px)';
// console.log(node.style.top);
// console.log(node);
// };
// });
getJavascriptPadding(padding: number) {
return (
"document.getElementsByTagName('body')[0].style.paddingTop = '" + padding + "px';\n" +
"true;"
);
}
render() { render() {
const {containerPaddingTop, onScroll} = this.props.collapsibleStack;
const customJS = this.getJavascriptPadding(containerPaddingTop);
return ( return (
<AnimatedWebView <WebView
ref={this.webviewRef} ref={this.webviewRef}
source={{uri: this.props.url}} source={{uri: this.props.url}}
startInLoadingState={true} startInLoadingState={true}
injectedJavaScript={this.props.customJS + customJS} injectedJavaScript={this.props.customJS}
javaScriptEnabled={true} javaScriptEnabled={true}
renderLoading={this.getRenderLoading} renderLoading={this.getRenderLoading}
renderError={() => <ErrorView renderError={() => <ErrorView
@ -167,11 +130,9 @@ class WebViewScreen extends React.PureComponent<Props> {
onNavigationStateChange={navState => { onNavigationStateChange={navState => {
this.canGoBack = navState.canGoBack; this.canGoBack = navState.canGoBack;
}} }}
// Animations
onScroll={onScroll}
/> />
); );
} }
} }
export default withCollapsible(WebViewScreen); export default WebViewScreen;

259
src/navigation/DrawerNavigator.js
View file

@ -26,8 +26,6 @@ import {AmicaleWebsiteScreen} from "../screens/Websites/AmicaleWebsiteScreen";
import {TutorInsaWebsiteScreen} from "../screens/Websites/TutorInsaWebsiteScreen"; import {TutorInsaWebsiteScreen} from "../screens/Websites/TutorInsaWebsiteScreen";
import {WiketudWebsiteScreen} from "../screens/Websites/WiketudWebsiteScreen"; import {WiketudWebsiteScreen} from "../screens/Websites/WiketudWebsiteScreen";
import {ElusEtudiantsWebsiteScreen} from "../screens/Websites/ElusEtudiantsWebsiteScreen"; import {ElusEtudiantsWebsiteScreen} from "../screens/Websites/ElusEtudiantsWebsiteScreen";
import {createCollapsibleStack} from "react-navigation-collapsible";
import {useTheme} from "react-native-paper";
const defaultScreenOptions = { const defaultScreenOptions = {
gestureEnabled: true, gestureEnabled: true,
@ -108,33 +106,23 @@ function SettingsStackComponent() {
const SelfMenuStack = createStackNavigator(); const SelfMenuStack = createStackNavigator();
function SelfMenuStackComponent() { function SelfMenuStackComponent() {
const {colors} = useTheme();
return ( return (
<SelfMenuStack.Navigator <SelfMenuStack.Navigator
initialRouteName="self-menu" initialRouteName="self-menu"
headerMode="float" headerMode="float"
screenOptions={defaultScreenOptions} screenOptions={defaultScreenOptions}
> >
{createCollapsibleStack( <SelfMenuStack.Screen
<SelfMenuStack.Screen name="self-menu"
name="self-menu" component={SelfMenuScreen}
component={SelfMenuScreen} options={({navigation}) => {
options={({navigation}) => { const openDrawer = getDrawerButton.bind(this, navigation);
const openDrawer = getDrawerButton.bind(this, navigation); return {
return { title: i18n.t('screens.menuSelf'),
title: i18n.t('screens.menuSelf'), headerLeft: openDrawer
headerLeft: openDrawer, };
headerStyle: { }}
backgroundColor: colors.surface, />
},
};
}}
/>,
{
collapsedColor: 'transparent',
useNativeDriver: true,
}
)}
</SelfMenuStack.Navigator> </SelfMenuStack.Navigator>
); );
} }
@ -142,33 +130,23 @@ function SelfMenuStackComponent() {
const AvailableRoomStack = createStackNavigator(); const AvailableRoomStack = createStackNavigator();
function AvailableRoomStackComponent() { function AvailableRoomStackComponent() {
const {colors} = useTheme();
return ( return (
<AvailableRoomStack.Navigator <AvailableRoomStack.Navigator
initialRouteName="available-rooms" initialRouteName="available-rooms"
headerMode="float" headerMode="float"
screenOptions={defaultScreenOptions} screenOptions={defaultScreenOptions}
> >
{createCollapsibleStack( <AvailableRoomStack.Screen
<AvailableRoomStack.Screen name="available-rooms"
name="available-rooms" component={AvailableRoomScreen}
component={AvailableRoomScreen} options={({navigation}) => {
options={({navigation}) => { const openDrawer = getDrawerButton.bind(this, navigation);
const openDrawer = getDrawerButton.bind(this, navigation); return {
return { title: i18n.t('screens.availableRooms'),
title: i18n.t('screens.availableRooms'), headerLeft: openDrawer
headerLeft: openDrawer, };
headerStyle: { }}
backgroundColor: colors.surface, />
},
};
}}
/>,
{
collapsedColor: 'transparent',
useNativeDriver: false, // native driver does not work with webview
}
)}
</AvailableRoomStack.Navigator> </AvailableRoomStack.Navigator>
); );
} }
@ -176,33 +154,23 @@ function AvailableRoomStackComponent() {
const BibStack = createStackNavigator(); const BibStack = createStackNavigator();
function BibStackComponent() { function BibStackComponent() {
const {colors} = useTheme();
return ( return (
<BibStack.Navigator <BibStack.Navigator
initialRouteName="bib" initialRouteName="bib"
headerMode="float" headerMode="float"
screenOptions={defaultScreenOptions} screenOptions={defaultScreenOptions}
> >
{createCollapsibleStack( <BibStack.Screen
<BibStack.Screen name="bib"
name="bib" component={BibScreen}
component={BibScreen} options={({navigation}) => {
options={({navigation}) => { const openDrawer = getDrawerButton.bind(this, navigation);
const openDrawer = getDrawerButton.bind(this, navigation); return {
return { title: i18n.t('screens.bib'),
title: i18n.t('screens.bib'), headerLeft: openDrawer
headerLeft: openDrawer, };
headerStyle: { }}
backgroundColor: colors.surface, />
},
};
}}
/>,
{
collapsedColor: 'transparent',
useNativeDriver: false, // native driver does not work with webview
}
)}
</BibStack.Navigator> </BibStack.Navigator>
); );
} }
@ -210,33 +178,23 @@ function BibStackComponent() {
const AmicaleWebsiteStack = createStackNavigator(); const AmicaleWebsiteStack = createStackNavigator();
function AmicaleWebsiteStackComponent() { function AmicaleWebsiteStackComponent() {
const {colors} = useTheme();
return ( return (
<AmicaleWebsiteStack.Navigator <AmicaleWebsiteStack.Navigator
initialRouteName="amicale-website" initialRouteName="amicale-website"
headerMode="float" headerMode="float"
screenOptions={defaultScreenOptions} screenOptions={defaultScreenOptions}
> >
{createCollapsibleStack( <AmicaleWebsiteStack.Screen
<AmicaleWebsiteStack.Screen name="amicale-website"
name="amicale-website" component={AmicaleWebsiteScreen}
component={AmicaleWebsiteScreen} options={({navigation}) => {
options={({navigation}) => { const openDrawer = getDrawerButton.bind(this, navigation);
const openDrawer = getDrawerButton.bind(this, navigation); return {
return { title: "Amicale",
title: "Amicale", headerLeft: openDrawer
headerLeft: openDrawer, };
headerStyle: { }}
backgroundColor: colors.surface, />
},
};
}}
/>,
{
collapsedColor: 'transparent',
useNativeDriver: false, // native driver does not work with webview
}
)}
</AmicaleWebsiteStack.Navigator> </AmicaleWebsiteStack.Navigator>
); );
} }
@ -244,33 +202,23 @@ function AmicaleWebsiteStackComponent() {
const ElusEtudiantsStack = createStackNavigator(); const ElusEtudiantsStack = createStackNavigator();
function ElusEtudiantsStackComponent() { function ElusEtudiantsStackComponent() {
const {colors} = useTheme();
return ( return (
<ElusEtudiantsStack.Navigator <ElusEtudiantsStack.Navigator
initialRouteName="elus-etudiants" initialRouteName="elus-etudiants"
headerMode="float" headerMode="float"
screenOptions={defaultScreenOptions} screenOptions={defaultScreenOptions}
> >
{createCollapsibleStack( <ElusEtudiantsStack.Screen
<ElusEtudiantsStack.Screen name="elus-etudiants"
name="elus-etudiants" component={ElusEtudiantsWebsiteScreen}
component={ElusEtudiantsWebsiteScreen} options={({navigation}) => {
options={({navigation}) => { const openDrawer = getDrawerButton.bind(this, navigation);
const openDrawer = getDrawerButton.bind(this, navigation); return {
return { title: "Élus Étudiants",
title: "Élus Étudiants", headerLeft: openDrawer
headerLeft: openDrawer, };
headerStyle: { }}
backgroundColor: colors.surface, />
},
};
}}
/>,
{
collapsedColor: 'transparent',
useNativeDriver: false, // native driver does not work with webview
}
)}
</ElusEtudiantsStack.Navigator> </ElusEtudiantsStack.Navigator>
); );
} }
@ -278,33 +226,23 @@ function ElusEtudiantsStackComponent() {
const WiketudStack = createStackNavigator(); const WiketudStack = createStackNavigator();
function WiketudStackComponent() { function WiketudStackComponent() {
const {colors} = useTheme();
return ( return (
<WiketudStack.Navigator <WiketudStack.Navigator
initialRouteName="wiketud" initialRouteName="wiketud"
headerMode="float" headerMode="float"
screenOptions={defaultScreenOptions} screenOptions={defaultScreenOptions}
> >
{createCollapsibleStack( <WiketudStack.Screen
<WiketudStack.Screen name="wiketud"
name="wiketud" component={WiketudWebsiteScreen}
component={WiketudWebsiteScreen} options={({navigation}) => {
options={({navigation}) => { const openDrawer = getDrawerButton.bind(this, navigation);
const openDrawer = getDrawerButton.bind(this, navigation); return {
return { title: "Wiketud",
title: "Wiketud", headerLeft: openDrawer
headerLeft: openDrawer, };
headerStyle: { }}
backgroundColor: colors.surface, />
},
};
}}
/>,
{
collapsedColor: 'transparent',
useNativeDriver: false, // native driver does not work with webview
}
)}
</WiketudStack.Navigator> </WiketudStack.Navigator>
); );
} }
@ -312,38 +250,29 @@ function WiketudStackComponent() {
const TutorInsaStack = createStackNavigator(); const TutorInsaStack = createStackNavigator();
function TutorInsaStackComponent() { function TutorInsaStackComponent() {
const {colors} = useTheme();
return ( return (
<TutorInsaStack.Navigator <TutorInsaStack.Navigator
initialRouteName="tutorinsa" initialRouteName="tutorinsa"
headerMode="float" headerMode="float"
screenOptions={defaultScreenOptions} screenOptions={defaultScreenOptions}
> >
{createCollapsibleStack( <TutorInsaStack.Screen
<TutorInsaStack.Screen name="tutorinsa"
name="tutorinsa" component={TutorInsaWebsiteScreen}
component={TutorInsaWebsiteScreen} options={({navigation}) => {
options={({navigation}) => { const openDrawer = getDrawerButton.bind(this, navigation);
const openDrawer = getDrawerButton.bind(this, navigation); return {
return { title: "Tutor'INSA",
title: "Tutor'INSA", headerLeft: openDrawer
headerLeft: openDrawer, };
headerStyle: { }}
backgroundColor: colors.surface, />
},
};
}}
/>,
{
collapsedColor: 'transparent',
useNativeDriver: false, // native driver does not work with webview
}
)}
</TutorInsaStack.Navigator> </TutorInsaStack.Navigator>
); );
} }
const TetrisStack = createStackNavigator(); const TetrisStack = createStackNavigator();
function TetrisStackComponent() { function TetrisStackComponent() {
@ -479,33 +408,23 @@ function AmicaleContactStackComponent() {
const ClubStack = createStackNavigator(); const ClubStack = createStackNavigator();
function ClubStackComponent() { function ClubStackComponent() {
const {colors} = useTheme();
return ( return (
<ClubStack.Navigator <ClubStack.Navigator
initialRouteName={"club-list"} initialRouteName={"club-list"}
headerMode="float" headerMode="float"
screenOptions={defaultScreenOptions} screenOptions={defaultScreenOptions}
> >
{createCollapsibleStack( <ClubStack.Screen
<ClubStack.Screen name="club-list"
name="club-list" component={ClubListScreen}
component={ClubListScreen} options={({navigation}) => {
options={({navigation}) => { const openDrawer = getDrawerButton.bind(this, navigation);
const openDrawer = getDrawerButton.bind(this, navigation); return {
return { title: i18n.t('clubs.clubList'),
title: i18n.t('clubs.clubList'), headerLeft: openDrawer
headerLeft: openDrawer, };
headerStyle: { }}
backgroundColor: colors.surface, />
},
};
}}
/>,
{
collapsedColor: 'transparent',
useNativeDriver: true,
}
)}
<ClubStack.Screen <ClubStack.Screen
name="club-information" name="club-information"
component={ClubDisplayScreen} component={ClubDisplayScreen}

158
src/navigation/MainTabNavigator.js
View file

@ -13,13 +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 FeedItemScreen from "../screens/FeedItemScreen"; import FeedItemScreen from "../screens/FeedItemScreen";
import {createCollapsibleStack} from "react-navigation-collapsible";
const TAB_ICONS = { const TAB_ICONS = {
@ -47,49 +46,30 @@ function getDrawerButton(navigation: Object) {
const ProximoStack = createStackNavigator(); const ProximoStack = createStackNavigator();
function ProximoStackComponent() { function ProximoStackComponent() {
const {colors} = useTheme();
return ( return (
<ProximoStack.Navigator <ProximoStack.Navigator
initialRouteName="index" initialRouteName="index"
headerMode="float" headerMode="float"
screenOptions={defaultScreenOptions} screenOptions={defaultScreenOptions}
> >
{createCollapsibleStack( <ProximoStack.Screen
<ProximoStack.Screen name="index"
name="index" options={({navigation}) => {
options={({navigation}) => { const openDrawer = getDrawerButton.bind(this, navigation);
const openDrawer = getDrawerButton.bind(this, navigation); return {
return { title: 'Proximo',
title: 'Proximo', headerLeft: openDrawer
headerLeft: openDrawer, };
headerStyle: { }}
backgroundColor: colors.surface, component={ProximoMainScreen}
}, />
}; <ProximoStack.Screen
}} name="proximo-list"
component={ProximoMainScreen} options={{
/>, title: i18n.t('screens.proximoArticles')
{ }}
collapsedColor: 'transparent', component={ProximoListScreen}
useNativeDriver: true, />
}
)}
{createCollapsibleStack(
<ProximoStack.Screen
name="proximo-list"
options={{
title: i18n.t('screens.proximoArticles'),
headerStyle: {
backgroundColor: colors.surface,
}
}}
component={ProximoListScreen}
/>,
{
collapsedColor: 'transparent',
useNativeDriver: true,
}
)}
<ProximoStack.Screen <ProximoStack.Screen
name="proximo-about" name="proximo-about"
component={ProximoAboutScreen} component={ProximoAboutScreen}
@ -105,33 +85,23 @@ function ProximoStackComponent() {
const ProxiwashStack = createStackNavigator(); const ProxiwashStack = createStackNavigator();
function ProxiwashStackComponent() { function ProxiwashStackComponent() {
const {colors} = useTheme();
return ( return (
<ProxiwashStack.Navigator <ProxiwashStack.Navigator
initialRouteName="index" initialRouteName="index"
headerMode='float' headerMode='float'
screenOptions={defaultScreenOptions} screenOptions={defaultScreenOptions}
> >
{createCollapsibleStack( <ProxiwashStack.Screen
<ProxiwashStack.Screen name="index"
name="index" component={ProxiwashScreen}
component={ProxiwashScreen} options={({navigation}) => {
options={({navigation}) => { const openDrawer = getDrawerButton.bind(this, navigation);
const openDrawer = getDrawerButton.bind(this, navigation); return {
return { title: i18n.t('screens.proxiwash'),
title: i18n.t('screens.proxiwash'), headerLeft: openDrawer
headerLeft: openDrawer, };
headerStyle: { }}
backgroundColor: colors.surface, />
},
};
}}
/>,
{
collapsedColor: 'transparent',
useNativeDriver: true,
}
)}
<ProxiwashStack.Screen <ProxiwashStack.Screen
name="proxiwash-about" name="proxiwash-about"
component={ProxiwashAboutScreen} component={ProxiwashAboutScreen}
@ -147,7 +117,6 @@ function ProxiwashStackComponent() {
const PlanningStack = createStackNavigator(); const PlanningStack = createStackNavigator();
function PlanningStackComponent() { function PlanningStackComponent() {
const {colors} = useTheme();
return ( return (
<PlanningStack.Navigator <PlanningStack.Navigator
initialRouteName="index" initialRouteName="index"
@ -183,34 +152,25 @@ function HomeStackComponent(initialRoute: string | null, defaultData: Object) {
let data; let data;
if (initialRoute !== null) if (initialRoute !== null)
data = {data: defaultData, nextScreen: initialRoute, shouldOpen: true}; data = {data: defaultData, nextScreen: initialRoute, shouldOpen: true};
const {colors} = useTheme();
return ( return (
<HomeStack.Navigator <HomeStack.Navigator
initialRouteName={"index"} initialRouteName={"index"}
headerMode="float" headerMode="float"
screenOptions={defaultScreenOptions} screenOptions={defaultScreenOptions}
> >
{createCollapsibleStack( <HomeStack.Screen
<HomeStack.Screen name="index"
name="index" component={HomeScreen}
component={HomeScreen} options={({navigation}) => {
options={({navigation}) => { const openDrawer = getDrawerButton.bind(this, navigation);
const openDrawer = getDrawerButton.bind(this, navigation); return {
return { title: i18n.t('screens.home'),
title: i18n.t('screens.home'), headerLeft: openDrawer
headerLeft: openDrawer, };
headerStyle: { }}
backgroundColor: colors.surface, initialParams={data}
}, />
};
}}
initialParams={data}
/>,
{
collapsedColor: 'transparent',
useNativeDriver: true,
}
)}
<HomeStack.Screen <HomeStack.Screen
name="home-planning-information" name="home-planning-information"
component={PlanningDisplayScreen} component={PlanningDisplayScreen}
@ -256,33 +216,23 @@ function HomeStackComponent(initialRoute: string | null, defaultData: Object) {
const PlanexStack = createStackNavigator(); const PlanexStack = createStackNavigator();
function PlanexStackComponent() { function PlanexStackComponent() {
const {colors} = useTheme();
return ( return (
<PlanexStack.Navigator <PlanexStack.Navigator
initialRouteName="index" initialRouteName="index"
headerMode="float" headerMode="float"
screenOptions={defaultScreenOptions} screenOptions={defaultScreenOptions}
> >
{createCollapsibleStack( <PlanexStack.Screen
<PlanexStack.Screen name="index"
name="index" component={PlanexScreen}
component={PlanexScreen} options={({navigation}) => {
options={({navigation}) => { const openDrawer = getDrawerButton.bind(this, navigation);
const openDrawer = getDrawerButton.bind(this, navigation); return {
return { title: 'Planex',
title: 'Planex', headerLeft: openDrawer
headerLeft: openDrawer, };
headerStyle: { }}
backgroundColor: colors.surface, />
},
};
}}
/>,
{
collapsedColor: 'transparent',
useNativeDriver: false, // native driver does not work with webview
}
)}
</PlanexStack.Navigator> </PlanexStack.Navigator>
); );
} }

13
src/screens/Amicale/Clubs/ClubListScreen.js
View file

@ -1,7 +1,7 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Animated, Platform} from "react-native"; import {FlatList, Platform} from "react-native";
import {Chip, Searchbar, withTheme} from 'react-native-paper'; import {Chip, Searchbar, withTheme} from 'react-native-paper';
import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen"; import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
import i18n from "i18n-js"; import i18n from "i18n-js";
@ -9,12 +9,10 @@ import ClubListItem from "../../../components/Lists/ClubListItem";
import {isItemInCategoryFilter, stringMatchQuery} from "../../../utils/Search"; import {isItemInCategoryFilter, stringMatchQuery} from "../../../utils/Search";
import ClubListHeader from "../../../components/Lists/ClubListHeader"; import ClubListHeader from "../../../components/Lists/ClubListHeader";
import MaterialHeaderButtons, {Item} from "../../../components/Custom/HeaderButton"; import MaterialHeaderButtons, {Item} from "../../../components/Custom/HeaderButton";
import {withCollapsible} from "../../../utils/withCollapsible";
type Props = { type Props = {
navigation: Object, navigation: Object,
theme: Object, theme: Object,
collapsibleStack: Object,
} }
type State = { type State = {
@ -96,10 +94,9 @@ class ClubListScreen extends React.Component<Props, State> {
getScreen = (data: Object) => { getScreen = (data: Object) => {
this.categories = data[0].categories; this.categories = data[0].categories;
const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
return ( return (
//$FlowFixMe //$FlowFixMe
<Animated.FlatList <FlatList
data={data[0].clubs} data={data[0].clubs}
keyExtractor={this.keyExtractor} keyExtractor={this.keyExtractor}
renderItem={this.getRenderItem} renderItem={this.getRenderItem}
@ -107,10 +104,6 @@ class ClubListScreen extends React.Component<Props, State> {
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
removeClippedSubviews={true} removeClippedSubviews={true}
getItemLayout={this.itemLayout} getItemLayout={this.itemLayout}
// Animations
onScroll={onScroll}
contentContainerStyle={{paddingTop: containerPaddingTop}}
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
/> />
) )
}; };
@ -215,4 +208,4 @@ class ClubListScreen extends React.Component<Props, State> {
} }
} }
export default withCollapsible(withTheme(ClubListScreen)); export default withTheme(ClubListScreen);

2
src/screens/HomeScreen.js
View file

@ -222,7 +222,7 @@ class HomeScreen extends React.Component<Props, State> {
id: key, id: key,
data: 0, data: 0,
icon: 'silverware-fork-knife', icon: 'silverware-fork-knife',
color: this.colors.menuColor, color: this.colors.menu,
onPress: this.onMenuClick, onPress: this.onMenuClick,
isAvailable: value.length > 0 isAvailable: value.length > 0
}; };

13
src/screens/Proximo/ProximoListScreen.js
View file

@ -1,14 +1,13 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Animated, 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";
function sortPrice(a, b) { function sortPrice(a, b) {
return a.price - b.price; return a.price - b.price;
@ -40,7 +39,6 @@ type Props = {
navigation: Object, navigation: Object,
route: Object, route: Object,
theme: Object, theme: Object,
collapsibleStack: Object,
} }
type State = { type State = {
@ -297,7 +295,6 @@ 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%'
@ -306,7 +303,7 @@ class ProximoListScreen extends React.Component<Props, State> {
{this.state.modalCurrentDisplayItem} {this.state.modalCurrentDisplayItem}
</CustomModal> </CustomModal>
{/*$FlowFixMe*/} {/*$FlowFixMe*/}
<Animated.FlatList <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}
@ -315,14 +312,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);

8
src/utils/withCollapsible.js
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} />;
};
};