1import * as React from 'react';
2import { Modal, StyleSheet, Text, View } from 'react-native';
3
4import Button from '../components/Button';
5import { Layout } from '../constants';
6
7interface State {
8  modalVisible: boolean;
9  animationType?: 'none' | 'slide' | 'fade';
10}
11
12// See: https://github.com/expo/expo/pull/10229#discussion_r490961694
13// eslint-disable-next-line @typescript-eslint/ban-types
14export default class ModalScreen extends React.Component<{}, State> {
15  static navigationOptions = {
16    title: 'Modal',
17  };
18
19  readonly state: State = {
20    modalVisible: false,
21    animationType: 'none',
22  };
23
24  render() {
25    return (
26      <View style={styles.container}>
27        <Modal
28          visible={false}
29          onRequestClose={() => {
30            alert('Modal has been closed.');
31          }}>
32          <View />
33        </Modal>
34
35        <Modal
36          animationType={this.state.animationType}
37          transparent={false}
38          visible={this.state.modalVisible}
39          onRequestClose={() => {
40            alert('Modal has been closed.');
41          }}>
42          <View style={styles.modalContainer}>
43            <View>
44              <Text>Hello World!</Text>
45              <Button
46                style={styles.button}
47                onPress={() => {
48                  this.setState({ modalVisible: false });
49                }}
50                title="Hide Modal"
51              />
52            </View>
53          </View>
54        </Modal>
55        <Button
56          style={styles.button}
57          onPress={() => {
58            this.setState({ modalVisible: true, animationType: 'slide' });
59          }}
60          title="Show modal (slide)"
61        />
62
63        {Layout.isSmallDevice && <View style={{ marginBottom: 10 }} />}
64
65        <Button
66          style={styles.button}
67          onPress={() => {
68            this.setState({ modalVisible: true, animationType: 'fade' });
69          }}
70          title="Show modal (fade)"
71        />
72      </View>
73    );
74  }
75}
76
77const styles = StyleSheet.create({
78  container: {
79    alignItems: 'flex-start',
80    padding: 10,
81    flexDirection: Layout.isSmallDevice ? 'column' : 'row',
82  },
83  modalContainer: {
84    flex: 1,
85    alignItems: 'center',
86    justifyContent: 'center',
87  },
88  button: {
89    alignSelf: 'flex-start',
90    flexGrow: 0,
91    paddingHorizontal: 15,
92    paddingVertical: 10,
93    borderRadius: 3,
94    marginRight: 10,
95  },
96  buttonText: {
97    color: '#fff',
98  },
99});
100