1import React, { Component } from 'react';
2import { Animated, StyleSheet, Text, View } from 'react-native';
3import { RectButton } from 'react-native-gesture-handler';
4import Swipeable from 'react-native-gesture-handler/Swipeable';
5
6export default class AppleStyleSwipeableRow extends Component {
7  _swipeableRow?: Swipeable;
8
9  renderLeftActions = (progress: Animated.Value, dragX: Animated.Value) => {
10    const trans = dragX.interpolate({
11      inputRange: [0, 50, 100, 101],
12      outputRange: [-20, 0, 0, 1],
13    });
14    return (
15      <RectButton style={styles.leftAction} onPress={this.close}>
16        <Animated.Text
17          style={[
18            styles.actionText,
19            {
20              transform: [{ translateX: trans }],
21            },
22          ]}
23        >
24          Archive
25        </Animated.Text>
26      </RectButton>
27    );
28  }
29  renderRightAction = (text: string, color: string, x: number, progress: Animated.Value) => {
30    const trans = progress.interpolate({
31      inputRange: [0, 1],
32      outputRange: [x, 0],
33    });
34    const pressHandler = () => {
35      this.close();
36      alert(text);
37    };
38    return (
39      <Animated.View style={{ flex: 1, transform: [{ translateX: trans }] }}>
40        <RectButton style={[styles.rightAction, { backgroundColor: color }]} onPress={pressHandler}>
41          <Text style={styles.actionText}>{text}</Text>
42        </RectButton>
43      </Animated.View>
44    );
45  }
46  renderRightActions = (progress: Animated.Value) => (
47    <View style={{ width: 192, flexDirection: 'row' }}>
48      {this.renderRightAction('More', '#C8C7CD', 192, progress)}
49      {this.renderRightAction('Flag', '#ffab00', 128, progress)}
50      {this.renderRightAction('More', '#dd2c00', 64, progress)}
51    </View>
52  )
53  updateRef = (ref: Swipeable) => {
54    this._swipeableRow = ref;
55  }
56  close = () => {
57    this._swipeableRow!.close();
58  }
59  render() {
60    const { children } = this.props;
61    return (
62      <Swipeable
63        ref={this.updateRef}
64        friction={2}
65        leftThreshold={30}
66        rightThreshold={40}
67        renderLeftActions={this.renderLeftActions}
68        renderRightActions={this.renderRightActions}
69      >
70        {children}
71      </Swipeable>
72    );
73  }
74}
75
76const styles = StyleSheet.create({
77  leftAction: {
78    flex: 1,
79    backgroundColor: '#497AFC',
80    justifyContent: 'center',
81  },
82  actionText: {
83    color: 'white',
84    fontSize: 16,
85    backgroundColor: 'transparent',
86    padding: 10,
87  },
88  rightAction: {
89    alignItems: 'center',
90    flex: 1,
91    justifyContent: 'center',
92  },
93});
94