react-native-screens/apps/src/screens/Modals.tsx at 88ecbb18ce55ee0ba1062567e1f02fd8b05c428b · software-mansion/react-native-screens · 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import React from 'react';
import { View, StyleSheet } from 'react-native';
import {
  createNativeStackNavigator,
  NativeStackNavigationProp,
} from '@react-navigation/native-stack';
import { Button, Alert } from '../shared';

type StackParamList = {
  Main: undefined;
  Modal: undefined;
  FullscreenModal: undefined;
  Alert: undefined;
  ContainedModal: undefined;
  PageSheet: undefined;
};

interface MainScreenProps {
  navigation: NativeStackNavigationProp<StackParamList, 'Main'>;
}

const MainScreen = ({ navigation }: MainScreenProps): React.JSX.Element => (
  <View style={{ ...styles.container, backgroundColor: 'bisque' }}>
    <Button title="Open modal" onPress={() => navigation.navigate('Modal')} />
    <Button
      title="Open fullscreen modal"
      onPress={() => navigation.navigate('FullscreenModal')}
    />
    <Button title="Open alert" onPress={() => navigation.navigate('Alert')} />
    <Button
      title="Open contained modal"
      onPress={() => navigation.navigate('ContainedModal')}
    />
    <Button
      title="Open pageSheet"
      onPress={() => navigation.navigate('PageSheet')}
    />
    <Button onPress={() => navigation.pop()} title="🔙 Back to Examples" />
  </View>
);

interface ModalScreenProps {
  navigation: NativeStackNavigationProp<StackParamList, 'Modal'>;
}

const ModalScreen = ({ navigation }: ModalScreenProps): React.JSX.Element => (
  <View style={{ ...styles.container, backgroundColor: 'thistle' }}>
    <Button title="Open modal" onPress={() => navigation.push('Modal')} />
    <Button
      title="Open fullscreen modal"
      onPress={() => navigation.push('FullscreenModal')}
    />
    <Button title="Open alert" onPress={() => navigation.navigate('Alert')} />
    <Button
      title="Open contained modal"
      onPress={() => navigation.navigate('ContainedModal')}
    />
    <Button
      title="Open pageSheet"
      onPress={() => navigation.push('PageSheet')}
    />
    <Button title="Go back" onPress={() => navigation.goBack()} />
  </View>
);

const Stack = createNativeStackNavigator<StackParamList>();

const App = (): React.JSX.Element => (
  <Stack.Navigator
    screenOptions={{
      headerBackVisible: false,
    }}>
    <Stack.Screen
      name="Main"
      component={MainScreen}
      options={{ title: 'Modals' }}
    />
    <Stack.Screen
      name="Modal"
      component={ModalScreen}
      options={{ presentation: 'modal' }}
    />
    <Stack.Screen
      name="FullscreenModal"
      component={ModalScreen}
      options={{ presentation: 'fullScreenModal' }}
    />
    <Stack.Screen
      name="ContainedModal"
      component={ModalScreen}
      options={{ presentation: 'containedModal' }}
    />
    <Stack.Screen
      name="PageSheet"
      component={ModalScreen}
      options={{ presentation: 'pageSheet' }}
    />
    <Stack.Screen
      name="Alert"
      component={Alert}
      options={{
        presentation: 'transparentModal',
        headerShown: false,
        animation: 'slide_from_bottom',
      }}
    />
  </Stack.Navigator>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 10,
  },
});

export default App;