react-native-paper/example/src/Examples/ModalExample.tsx at 67aefdd8d7daa8208089624efd437f56ac05fd05 · callstack/react-native-paper · 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
import * as React from 'react';
import { StyleSheet, View } from 'react-native';

import { Button, List, Modal, Portal, Text } from 'react-native-paper';

import { useExampleTheme } from '../hooks/useExampleTheme';
import ScreenWrapper from '../ScreenWrapper';

const ModalExample = () => {
  const theme = useExampleTheme();

  const [visibleModal1, setVisibleModal1] = React.useState(false);
  const [visibleModal2, setVisibleModal2] = React.useState(false);
  const [visibleModal3, setVisibleModal3] = React.useState(false);

  return (
    <ScreenWrapper>
      <List.Section title="Simple">
        <View style={styles.row}>
          <Portal>
            <Modal
              visible={visibleModal1}
              onDismiss={() => setVisibleModal1(false)}
              contentContainerStyle={[
                styles.modal,
                { backgroundColor: theme.colors.background },
              ]}
            >
              <Text>Example Modal. Click outside this area to dismiss.</Text>
            </Modal>
          </Portal>
          <Button mode="outlined" onPress={() => setVisibleModal1(true)}>
            Open Modal
          </Button>
        </View>
      </List.Section>
      <List.Section title="Disable Animations">
        <View style={styles.row}>
          <Portal>
            <Modal
              disableAnimations={true}
              visible={visibleModal2}
              onDismiss={() => setVisibleModal2(false)}
              contentContainerStyle={[
                styles.modal,
                { backgroundColor: theme.colors.background },
              ]}
            >
              <Text>
                Example Modal with animations disabled. Click outside this area
                to dismiss.
              </Text>
            </Modal>
          </Portal>
          <Button mode="outlined" onPress={() => setVisibleModal2(true)}>
            Open Modal
          </Button>
        </View>
      </List.Section>
      <List.Section title="Handle escape (web)">
        <View style={styles.row}>
          <Portal>
            <Modal
              handleEscape={true}
              visible={visibleModal3}
              onDismiss={() => setVisibleModal3(false)}
              contentContainerStyle={[
                styles.modal,
                { backgroundColor: theme.colors.background },
              ]}
            >
              <Text>Example Modal with escape handling.</Text>
            </Modal>
          </Portal>
          <Button mode="outlined" onPress={() => setVisibleModal3(true)}>
            Open Modal
          </Button>
        </View>
      </List.Section>
    </ScreenWrapper>
  );
};

ModalExample.title = 'Modal';

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'center',
    margin: 8,
  },
  modal: {
    padding: 20,
  },
});

export default ModalExample;