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
12export default class ModalScreen extends React.Component<object, State> {
13  static navigationOptions = {
14    title: 'Modal',
15  };
16
17  readonly state: State = {
18    modalVisible: false,
19    animationType: 'none',
20  };
21
22  render() {
23    return (
24      <View style={styles.container}>
25        <Modal
26          visible={false}
27          onRequestClose={() => {
28            this.setState({ modalVisible: false });
29            alert('Modal has been closed.');
30          }}>
31          <View />
32        </Modal>
33
34        <Modal
35          animationType={this.state.animationType}
36          transparent={false}
37          visible={this.state.modalVisible}
38          onRequestClose={() => {
39            this.setState({ modalVisible: false });
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