1import React from 'react';
2import { Dimensions, StyleSheet, Text, View } from 'react-native';
3import { ScrollView } from 'react-native-gesture-handler';
4
5import BouncyBox from './GestureHandler/BouncyBox';
6import FancyButton from './GestureHandler/FancyButton';
7
8export default class GestureHandlerListScreen extends React.Component {
9  static navigationOptions = {
10    title: 'Gesture Handler List',
11  };
12
13  render() {
14    return (
15      <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
16        <Text style={styles.title}>LongPressGestureHandler, TapGestureHandler</Text>
17        <Text style={styles.paragraph}>
18          You can single tap, double tap, or long press these buttons!
19        </Text>
20        <FancyButton
21          onSingleTap={() => alert('Single tap')}
22          onDoubleTap={() => alert('Double tap')}
23          onLongPress={() => alert('Long press')}>
24          <Text>Try this button out!</Text>
25        </FancyButton>
26
27        <View style={{ marginTop: 20 }} />
28
29        <FancyButton
30          onSingleTap={() => alert('Single tap #2!')}
31          onDoubleTap={() => alert('Double tap #2!')}
32          onLongPress={() => alert('Long press #2!')}>
33          <Text>A second fancy button!</Text>
34        </FancyButton>
35
36        <View style={{ marginTop: 10 }} />
37
38        <Text style={styles.title}>PanGestureHandler, RotationGestureHandler</Text>
39        <Text style={styles.paragraph}>
40          You can drag it left and right, and also use two fingers to rotate it, and it'll bounce
41          back!
42        </Text>
43
44        <BouncyBox />
45        <View style={{ marginTop: 20 }} />
46        <BouncyBox style={{ backgroundColor: 'orange' }} />
47        <View style={{ marginTop: 20 }} />
48      </ScrollView>
49    );
50  }
51}
52
53const styles = StyleSheet.create({
54  container: {
55    flex: 1,
56  },
57  contentContainer: {
58    paddingHorizontal: 20,
59  },
60  title: {
61    marginTop: 15,
62    fontSize: Dimensions.get('window').width < 375 ? 20 : 25,
63    marginBottom: 5,
64  },
65  paragraph: {
66    color: '#888',
67    fontSize: 15,
68    marginBottom: 20,
69  },
70});
71