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            this.setState({ modalVisible: false });
31            alert('Modal has been closed.');
32          }}>
33          <View />
34        </Modal>
35
36        <Modal
37          animationType={this.state.animationType}
38          transparent={false}
39          visible={this.state.modalVisible}
40          onRequestClose={() => {
41            this.setState({ modalVisible: false });
42            alert('Modal has been closed.');
43          }}>
44          <View style={styles.modalContainer}>
45            <View>
46              <Text>Hello World!</Text>
47              <Button
48                style={styles.button}
49                onPress={() => {
50                  this.setState({ modalVisible: false });
51                }}
52                title="Hide Modal"
53              />
54            </View>
55          </View>
56        </Modal>
57        <Button
58          style={styles.button}
59          onPress={() => {
60            this.setState({ modalVisible: true, animationType: 'slide' });
61          }}
62          title="Show modal (slide)"
63        />
64
65        {Layout.isSmallDevice && <View style={{ marginBottom: 10 }} />}
66
67        <Button
68          style={styles.button}
69          onPress={() => {
70            this.setState({ modalVisible: true, animationType: 'fade' });
71          }}
72          title="Show modal (fade)"
73        />
74      </View>
75    );
76  }
77}
78
79const styles = StyleSheet.create({
80  container: {
81    alignItems: 'flex-start',
82    padding: 10,
83    flexDirection: Layout.isSmallDevice ? 'column' : 'row',
84  },
85  modalContainer: {
86    flex: 1,
87    alignItems: 'center',
88    justifyContent: 'center',
89  },
90  button: {
91    alignSelf: 'flex-start',
92    flexGrow: 0,
93    paddingHorizontal: 15,
94    paddingVertical: 10,
95    borderRadius: 3,
96    marginRight: 10,
97  },
98  buttonText: {
99    color: '#fff',
100  },
101});
102