Moved collapsible stack creating in own file

This commit is contained in:
Arnaud Vergnet 2020-04-23 08:02:34 +02:00
parent 56effeaaf9
commit 033bb388fd
3 changed files with 40 additions and 67 deletions

View file

@ -11,8 +11,6 @@ import TabNavigator from "./TabNavigator";
import TetrisScreen from "../screens/Tetris/TetrisScreen";
import VoteScreen from "../screens/Amicale/VoteScreen";
import LoginScreen from "../screens/Amicale/LoginScreen";
import {useTheme} from "react-native-paper";
import {createCollapsibleStack} from "react-navigation-collapsible";
import {Platform} from "react-native";
import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen";
import BibScreen from "../screens/Websites/BibScreen";
@ -30,6 +28,7 @@ import ProfileScreen from "../screens/Amicale/ProfileScreen";
import ClubListScreen from "../screens/Amicale/Clubs/ClubListScreen";
import ClubAboutScreen from "../screens/Amicale/Clubs/ClubAboutScreen";
import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
import {createScreenCollapsibleStack, getWebsiteStack} from "../utils/CollapsibleUtils";
const defaultScreenOptions = {
gestureEnabled: true,
@ -41,38 +40,6 @@ const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentat
const screenTransition = Platform.OS === 'ios' ? TransitionPresets.SlideFromRightIOS : TransitionPresets.ScaleFromCenterAndroid;
function createScreenCollapsibleStack(
name: string,
Stack: any,
component: any,
title: string,
useNativeDriver?: boolean,
options?: { [key: string]: any }) {
const {colors} = useTheme();
const screenOptions = options != null ? options : {};
return createCollapsibleStack(
<Stack.Screen
name={name}
component={component}
options={{
title: title,
headerStyle: {
backgroundColor: colors.surface,
},
...screenOptions,
}}
/>,
{
collapsedColor: 'transparent',
useNativeDriver: useNativeDriver != null ? useNativeDriver : true, // native driver does not work with webview
}
)
}
function getWebsiteStack(name: string, Stack: any, component: any, title: string) {
return createScreenCollapsibleStack(name, Stack, component, title, false);
}
const MainStack = createStackNavigator();
function MainStackComponent(props: { createTabNavigator: () => React.Node }) {

View file

@ -21,6 +21,7 @@ import CustomTabBar from "../components/Tabbar/CustomTabBar";
import WebsitesHomeScreen from "../screens/Services/ServicesScreen";
import ServicesSectionScreen from "../screens/Services/ServicesSectionScreen";
import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen";
import {createScreenCollapsibleStack, getWebsiteStack} from "../utils/CollapsibleUtils";
const defaultScreenOptions = {
gestureEnabled: true,
@ -30,39 +31,6 @@ const defaultScreenOptions = {
const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS;
function createScreenCollapsibleStack(
name: string,
Stack: any,
component: any,
title: string,
useNativeDriver?: boolean,
options?: { [key: string]: any }) {
const {colors} = useTheme();
const screenOptions = options != null ? options : {};
return createCollapsibleStack(
<Stack.Screen
name={name}
component={component}
options={{
title: title,
headerStyle: {
backgroundColor: colors.surface,
},
...screenOptions,
}}
/>,
{
collapsedColor: 'transparent',
useNativeDriver: useNativeDriver != null ? useNativeDriver : true, // native driver does not work with webview
}
)
}
function getWebsiteStack(name: string, Stack: any, component: any, title: string) {
return createScreenCollapsibleStack(name, Stack, component, title, false);
}
const ServicesStack = createStackNavigator();
function ServicesStackComponent() {

View file

@ -0,0 +1,38 @@
// @flow
import * as React from 'react';
import {useTheme} from "react-native-paper";
import {createCollapsibleStack} from "react-navigation-collapsible";
import StackNavigator, {StackNavigationOptions} from "@react-navigation/stack";
export function createScreenCollapsibleStack(
name: string,
Stack: StackNavigator,
component: React.Node,
title: string,
useNativeDriver?: boolean,
options?: StackNavigationOptions) {
const {colors} = useTheme();
const screenOptions = options != null ? options : {};
return createCollapsibleStack(
<Stack.Screen
name={name}
component={component}
options={{
title: title,
headerStyle: {
backgroundColor: colors.surface,
},
...screenOptions,
}}
/>,
{
collapsedColor: colors.surface,
useNativeDriver: useNativeDriver != null ? useNativeDriver : true, // native driver does not work with webview
}
)
}
export function getWebsiteStack(name: string, Stack: any, component: any, title: string) {
return createScreenCollapsibleStack(name, Stack, component, title, false);
}