1// @ts-nocheck
2import MaterialIcons from '@expo/vector-icons/build/MaterialIcons';
3import React, { Component } from 'react';
4import { Animated, StyleSheet } from 'react-native';
5import { RectButton } from 'react-native-gesture-handler';
6import Swipeable from 'react-native-gesture-handler/Swipeable';
7
8const AnimatedIcon = Animated.createAnimatedComponent(MaterialIcons);
9
10export default class AppleStyleSwipeableRow extends Component {
11  _swipeableRow?: Swipeable;
12
13  renderLeftActions = (progress: Animated.Value, dragX: Animated.Value) => {
14    const scale = dragX.interpolate({
15      inputRange: [0, 80],
16      outputRange: [0, 1],
17      extrapolate: 'clamp',
18    });
19    return (
20      <RectButton style={styles.leftAction} onPress={this.close}>
21        <AnimatedIcon
22          name="archive"
23          size={30}
24          color="#fff"
25          style={[styles.actionIcon, { transform: [{ scale }] }]}
26        />
27      </RectButton>
28    );
29  };
30  renderRightActions = (progress: Animated.Value, dragX: Animated.Value) => {
31    const scale = dragX.interpolate({
32      inputRange: [-80, 0],
33      outputRange: [1, 0],
34      extrapolate: 'clamp',
35    });
36    return (
37      <RectButton style={styles.rightAction} onPress={this.close}>
38        <AnimatedIcon
39          name="delete-forever"
40          size={30}
41          color="#fff"
42          style={[styles.actionIcon, { transform: [{ scale }] }]}
43        />
44      </RectButton>
45    );
46  };
47  updateRef = (ref: Swipeable) => {
48    this._swipeableRow = ref;
49  };
50  close = () => {
51    this._swipeableRow!.close();
52  };
53  render() {
54    const { children } = this.props;
55    return (
56      <Swipeable
57        ref={this.updateRef}
58        friction={2}
59        leftThreshold={80}
60        rightThreshold={40}
61        renderLeftActions={this.renderLeftActions}
62        renderRightActions={this.renderRightActions}>
63        {children}
64      </Swipeable>
65    );
66  }
67}
68
69const styles = StyleSheet.create({
70  leftAction: {
71    flex: 1,
72    backgroundColor: '#388e3c',
73    justifyContent: 'center',
74  },
75  actionIcon: {
76    width: 30,
77    marginHorizontal: 10,
78  },
79  rightAction: {
80    alignItems: 'flex-end',
81    backgroundColor: '#dd2c00',
82    flex: 1,
83    justifyContent: 'center',
84  },
85});
86