caseStudy/App.tsx at master · hcsagan/caseStudy · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import React from "react";
import LocalList from "./src/pages/LocalList";
import SocketList from "./src/pages/SocketList";
import "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import SelectScreen from "./src/pages/SelectScreen";
import PopupScreen from "./src/pages/PopupScreen";
import { enableScreens } from "react-native-screens";
import { Dimensions } from "react-native";
import { ToastProvider } from "react-native-toast-notifications";
import { User } from "./src/types/User";

enableScreens();

const { height: VIEWPORT_HEIGHT } = Dimensions.get("window");

export type MainNavigatorParamList = {
  "Select Screen": undefined,
  "Local List": undefined,
  "Online List": undefined
}

export type RootNavigatorParamList = {
  Main: undefined,
  Modal: {
    data: User
  }
}

const RootStack = createStackNavigator<RootNavigatorParamList>();
const Stack = createStackNavigator<MainNavigatorParamList>();


const MainNavigator = () => (
  <Stack.Navigator screenOptions={{ headerShown: false }}>
    <Stack.Screen name="Select Screen" component={SelectScreen} />
    <Stack.Screen name="Local List" component={LocalList} />
    <Stack.Screen name="Online List" component={SocketList} />
  </Stack.Navigator>
);

export default function App() {
  return (
    <ToastProvider>
      <NavigationContainer>
        <RootStack.Navigator
          mode="modal"
          screenOptions={{
            headerShown: false,
            cardStyle: { backgroundColor: "transparent" },
            cardOverlayEnabled: true,
            cardStyleInterpolator: ({ current: { progress } }) => ({
              cardStyle: {
                opacity: progress,
                transform: [
                  {
                    translateY: progress.interpolate({
                      inputRange: [0, 1],
                      outputRange: [VIEWPORT_HEIGHT, 0],
                      extrapolateLeft: "clamp",
                    }),
                  },
                  {
                    scale: progress.interpolate({
                      inputRange: [0, 1],
                      outputRange: [0.5, 1],
                      extrapolateLeft: "clamp",
                    }),
                  },
                ],
              },
              overlayStyle: {
                opacity: progress.interpolate({
                  inputRange: [0, 1],
                  outputRange: [0, 0.25],
                  extrapolate: "clamp",
                }),
              },
            }),
          }}
        >
          <RootStack.Screen name="Main" component={MainNavigator} />
          <RootStack.Screen name="Modal" component={PopupScreen} />
        </RootStack.Navigator>
      </NavigationContainer>
    </ToastProvider>
  );
}