reactnative-gmail-swipe/SwipeableListItem.js at main · dhidroid/reactnative-gmail-swipe · 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
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Swipeable from 'react-native-gesture-handler/Swipeable';
import Animated from 'react-native-reanimated';

const SwipeableListItem = ({ email, onSwipeLeft, onSwipeRight }) => {
  const renderLeftActions = (progress, dragX) => {
    const scale = dragX.interpolate({
      inputRange: [0, 100],
      outputRange: [0, 1],
      extrapolate: 'clamp',
    });

    return (
      <View style={[styles.action, styles.archive]}>
        <Animated.Text style={[styles.actionText, { transform: [{ scale }] }]}>
          Archive
        </Animated.Text>
      </View>
    );
  };

  const renderRightActions = (progress, dragX) => {
    const scale = dragX.interpolate({
      inputRange: [-100, 0],
      outputRange: [1, 0],
      extrapolate: 'clamp',
    });

    return (
      <View style={[styles.action, styles.delete]}>
        <Animated.Text style={[styles.actionText, { transform: [{ scale }] }]}>
          Delete
        </Animated.Text>
      </View>
    );
  };

  return (
    <Swipeable
      renderLeftActions={renderLeftActions}
      onSwipeLeft={onSwipeLeft}
      renderrenderRightActions={renderRightActions}
      onSwipeRight={onSwipeRight}

    >
      <View style={styles.container}>
        <Text style={styles.emailSubject}>{email.subject}</Text>
        <Text style={styles.emailBody}>{email.body}</Text>
      </View>
    </Swipeable>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  emailSubject: {
    fontWeight: 'bold',
    fontSize: 16,
  },
  emailBody: {
    marginTop: 4,
    fontSize: 14,
    color: '#555',
  },
  action: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 100,
    height: '100%',
  },
  actionText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
  archive: {
    backgroundColor: 'blue',
  },
  delete: {
    backgroundColor: 'red',
  },
});

export default SwipeableListItem;