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