react-native-gesture-handler/Example/App.js at try/android-modal · devagul93/react-native-gesture-handler · 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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
import * as React from 'react';
import { Text, View, StyleSheet, Modal, Linking, Button } from 'react-native';
import { BaseButton, TapGestureHandler } from 'react-native-gesture-handler';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      modalVisible: false,
    };
  }

  toggleModal = () => {
    this.setState({
      modalVisible: !this.state.modalVisible,
    });
  };

  goToUrl = url => {
    Linking.canOpenURL(url).then(response => Linking.openURL(url));
  };

  render() {
    return (
      <View style={styles.container}>
        <TapGestureHandler
          onHandlerStateChange={({ nativeEvent }) => console.warn(nativeEvent)}>
          <Text>XXX</Text>
        </TapGestureHandler>
        <Text>
          onGestureEvent is not trigger when GestureHandler components is on a
          modal on Android
        </Text>
        <Text
          style={styles.link}
          onPress={() =>
            this.goToUrl(
              'https://github.com/kmagiera/react-native-gesture-handler/issues/139'
            )
          }>
          (See:
          https://github.com/kmagiera/react-native-gesture-handler/issues/139)
        </Text>

        <Text>Open the Modal dialog by push on the button below</Text>

        <View style={styles.devider} />

        <BaseButton style={styles.button} onPress={() => this.toggleModal()}>
          <Text>Open Modal Dialog</Text>
        </BaseButton>

        <Modal
          visible={this.state.modalVisible}
          transparent={true}
          animationType="fade"
          onRequestClose={() => this.toggleModal()}>
          <View style={styles.modalOverlay}>
            <View style={styles.modalInner}>
              <Text>
                Button #1 can close the dialog (Standard React Native Button
                component)
              </Text>

              <TapGestureHandler
                onHandlerStateChange={({ nativeEvent }) =>
                  console.warn(nativeEvent)
                }>
                <Text>XXX</Text>
              </TapGestureHandler>

              <View style={styles.devider} />

              <Text>
                Button #2 does not respond to pressing on Android (Gesture
                Handler "BaseButton")
              </Text>

              <View style={styles.devider} />

              <View style={styles.modalFooter}>
                <Button title="Button #1" onPress={() => this.toggleModal()} />
                <BaseButton
                  style={styles.button}
                  onPress={() => this.toggleModal()}>
                  <Text>Button #2</Text>
                </BaseButton>
              </View>
            </View>
          </View>
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    paddingHorizontal: 60,
  },
  devider: {
    height: 20,
  },
  button: {
    backgroundColor: '#DCDCDC',
    paddingVertical: 6,
    paddingHorizontal: 20,
  },
  modalOverlay: {
    backgroundColor: 'rgba(0, 0, 0, 0.2)',
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  modalInner: {
    backgroundColor: '#fff',
    borderRadius: 12,
    paddingHorizontal: 20,
    paddingVertical: 20,
    marginHorizontal: 40,
  },
  modalFooter: {
    flexDirection: 'row',
    flexWrap: 'nowrap',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  link: {
    color: '#0991FF',
    paddingVertical: 4,
  },
});