import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable';

export default function Example() {
  return (
    <View style={{ flex: 1, marginTop: 200, backgroundColor: 'pink' }}>
      <Swipeable
        onSwipeableWillClose={(dir) => {
          console.log('will close', dir);
        }}
        onSwipeableWillOpen={(dir) => {
          console.log('will open', dir);
        }}
        onSwipeableOpen={(dir) => {
          console.log('open', dir);
        }}
        onSwipeableClose={(dir) => {
          console.log('close', dir);
        }}
        leftThreshold={50}
        rightThreshold={50}
        renderLeftActions={() => {
          return (
            <TouchableOpacity
              onPress={() => {
                console.log('press left');
              }}>
              <View
                style={{ height: 80, width: 80, backgroundColor: 'yellow' }}>
                <Text>Left</Text>
              </View>
            </TouchableOpacity>
          );
        }}
        renderRightActions={() => {
          return (
            <TouchableOpacity
              onPress={() => {
                console.log('press right');
              }}>
              <View
                style={{ height: 80, width: 80, backgroundColor: 'magenta' }}>
                <Text>Right</Text>
              </View>
            </TouchableOpacity>
          );
        }}>
        <TouchableOpacity
          onPress={() => {
            console.log('press outer');
          }}>
          <View
            style={{
              width: '100%',
              height: 80,
              backgroundColor: 'blue',
            }}>
            <TouchableOpacity
              onPress={() => {
                console.log('press inner');
              }}
              style={{ width: 80, height: 80, alignSelf: 'center' }}>
              <View
                style={{ width: 80, height: 80, backgroundColor: 'white' }}
              />
            </TouchableOpacity>
          </View>
        </TouchableOpacity>
      </Swipeable>
    </View>
  );
}

import React, { forwardRef, useCallback } from 'react';
import Animated from 'react-native-reanimated';
import {
  Text,
  I18nManager,
  StyleSheet,
  TouchableOpacity,
  View,
} from 'react-native';

interface SwipeableMethods {
  close: () => void;
  openLeft: () => void;
  openRight: () => void;
  reset: () => void;
}

const Example = forwardRef<SwipeableMethods, unknown>((_props, _ref) => {
  const leftElement = useCallback(
    () => (
      <View
        style={{
          ...StyleSheet.absoluteFillObject,
          flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
        }}>
        <TouchableOpacity
          onPress={() => {
            console.log('press left');
          }}>
          <View style={{ height: 80, width: 80, backgroundColor: 'yellow' }}>
            <Text>Left</Text>
          </View>
        </TouchableOpacity>
      </View>
    ),
    []
  );

  const rightElement = useCallback(
    () => (
      <Animated.View
        style={{
          ...StyleSheet.absoluteFillObject,
          flexDirection: I18nManager.isRTL ? 'row' : 'row-reverse',
        }}>
        <TouchableOpacity
          onPress={() => {
            console.log('press right');
          }}>
          <View style={{ height: 80, width: 80, backgroundColor: 'magenta' }}>
            <Text>Right</Text>
          </View>
        </TouchableOpacity>
      </Animated.View>
    ),
    []
  );

  return (
    <View>
      {leftElement()}
      {rightElement()}
      <View
        style={{
          transform: [{ translateX: 0 }, { scale: 0.5 }],
          width: 393,
          height: 80,
          backgroundColor: 'blue',
        }}
      />
    </View>
  );
});

export default Example;