1import React, { Component } from 'react';
2import { Alert, StyleSheet, Text, View } from 'react-native';
3import { FlatList, RectButton } from 'react-native-gesture-handler';
4
5import AppleStyleSwipeableRow from './GestureHandler/AppleStyleSwipeableRow';
6import GmailStyleSwipeableRow from './GestureHandler/GmailStyleSwipeableRow';
7
8const Row: React.FunctionComponent<{ item: Item }> = ({ item }) => (
9  <RectButton style={styles.rectButton} onPress={() => Alert.alert(item.from)}>
10    <Text style={styles.fromText}>{item.from}</Text>
11    <Text numberOfLines={2} style={styles.messageText}>
12      {item.message}
13    </Text>
14    <Text style={styles.dateText}>{item.when} ❭</Text>
15  </RectButton>
16);
17
18const SwipeableRow: React.FunctionComponent<{ item: Item; index: number }> = ({ item, index }) => {
19  if (index % 2 === 0) {
20    return (
21      <AppleStyleSwipeableRow>
22        <Row item={item} />
23      </AppleStyleSwipeableRow>
24    );
25  } else {
26    return (
27      <GmailStyleSwipeableRow>
28        <Row item={item} />
29      </GmailStyleSwipeableRow>
30    );
31  }
32};
33
34export default class GestureHandlerSwipeableScreen extends Component {
35  static navigationOptions = {
36    title: 'Swipeable Rows',
37  };
38
39  render() {
40    return (
41      <FlatList
42        data={DATA}
43        ItemSeparatorComponent={() => <View style={styles.separator} />}
44        renderItem={({ item, index }: { item: Item; index: number }) => (
45          <SwipeableRow item={item} index={index} />
46        )}
47        keyExtractor={(_, index) => index.toString()}
48      />
49    );
50  }
51}
52
53const styles = StyleSheet.create({
54  rectButton: {
55    flex: 1,
56    height: 80,
57    paddingVertical: 10,
58    paddingHorizontal: 20,
59    justifyContent: 'space-between',
60    flexDirection: 'column',
61    backgroundColor: 'white',
62  },
63  separator: {
64    backgroundColor: 'rgb(200, 199, 204)',
65    height: StyleSheet.hairlineWidth,
66  },
67  fromText: {
68    fontWeight: 'bold',
69    backgroundColor: 'transparent',
70  },
71  messageText: {
72    color: '#999',
73    backgroundColor: 'transparent',
74  },
75  dateText: {
76    backgroundColor: 'transparent',
77    position: 'absolute',
78    right: 20,
79    top: 10,
80    color: '#999',
81    fontWeight: 'bold',
82  },
83});
84
85interface Item {
86  from: string;
87  when: string;
88  message: string;
89}
90
91const DATA: Item[] = [
92  {
93    from: "D'Artagnan",
94    when: '3:11 PM',
95    message:
96      'Unus pro omnibus, omnes pro uno. Nunc scelerisque, massa non lacinia porta, quam odio dapibus enim, nec tincidunt dolor leo non neque',
97  },
98  {
99    from: 'Aramis',
100    when: '11:46 AM',
101    message:
102      'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus hendrerit ligula dignissim maximus aliquet. Integer tincidunt, tortor at finibus molestie, ex tellus laoreet libero, lobortis consectetur nisl diam viverra justo.',
103  },
104  {
105    from: 'Athos',
106    when: '6:06 AM',
107    message:
108      'Sed non arcu ullamcorper, eleifend velit eu, tristique metus. Duis id sapien eu orci varius malesuada et ac ipsum. Ut a magna vel urna tristique sagittis et dapibus augue. Vivamus non mauris a turpis auctor sagittis vitae vel ex. Curabitur accumsan quis mauris quis venenatis.',
109  },
110  {
111    from: 'Porthos',
112    when: 'Yesterday',
113    message:
114      'Vivamus id condimentum lorem. Duis semper euismod luctus. Morbi maximus urna ut mi tempus fermentum. Nam eget dui sed ligula rutrum venenatis.',
115  },
116  {
117    from: 'Cardinal Richelieu',
118    when: '2 days ago',
119    message:
120      'Pellentesque id quam ac tortor pellentesque tempor tristique ut nunc. Pellentesque posuere ut massa eget imperdiet. Ut at nisi magna. Ut volutpat tellus ut est viverra, eu egestas ex tincidunt. Cras tellus tellus, fringilla eget massa in, ultricies maximus eros.',
121  },
122  {
123    from: "D'Artagnan",
124    when: 'Week ago',
125    message:
126      'Aliquam non aliquet mi. Proin feugiat nisl maximus arcu imperdiet euismod nec at purus. Vestibulum sed dui eget mauris consequat dignissim.',
127  },
128  {
129    from: 'Domestos',
130    when: '2 days ago',
131    message:
132      'Aliquam imperdiet dolor eget aliquet feugiat. Fusce tincidunt mi diam. Pellentesque cursus semper sem. Aliquam ut ullamcorper massa, sed tincidunt eros.',
133  },
134  {
135    from: 'Cardinal Richelieu',
136    when: '2 weeks ago',
137    message:
138      'Vestibulum ac nisi non augue viverra ullamcorper quis vitae mi. Donec vitae risus aliquam, posuere urna fermentum, fermentum risus. ',
139  },
140];
141