RenderLeftActions from the Swipeable in React Native are not Working

Question

Issue Explanation: Left Action Not Clickable in ReanimatedSwipeable Problem Statement: When using react-native-gesture-handler/ReanimatedSwipeable, the left action container appears when swiping left, but it is not clickable. However, if i import Swipeable from react-native-gesture-handler/Swipeable (which is now deprecated), the left action works as expected.

Here is a sample issue:https://drive.google.com/file/d/1UUz3T_RcEfa-Gs2iMeRwGWYYpzDpTBFy/view?usp=drive_link

Code:

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

const SwipeableItem = () => {
  const renderRightActions = () => (
    <TouchableOpacity
      style={styles.actionContainer}
      onPress={() => Alert.alert('Action Clicked!', 'You clicked the action')}
    >
      <Text style={styles.actionText}>Click 2 Me</Text>
    </TouchableOpacity>
  );

  const renderLeftActions = () => (
    <TouchableOpacity
      style={{
        width: 100,
        height: 80,
        backgroundColor: 'green',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 10,
      }}
      onPress={() => Alert.alert('Action Clicked!', 'You clicked the action')}
    >
      <Text style={styles.actionText}>Click 1 Me</Text>
    </TouchableOpacity>
  );

  return (
    <GestureHandlerRootView style={styles.container}>
      <Swipeable
        renderRightActions={renderRightActions}
        renderLeftActions={renderLeftActions}
      >
        <View style={styles.swipeItem}>
          <Text style={styles.itemText}>Swipe Left to Reveal</Text>
        </View>
      </Swipeable>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5F5F5',
  },
  swipeItem: {
    width: 300,
    height: 80,
    backgroundColor: 'grey',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 10,
    shadowColor: '#000',
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  itemText: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  actionContainer: {
    width: 100,
    height: 80,
    backgroundColor: '#FF5733',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 10,
  },
  actionText: {
    color: '#FFF',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default SwipeableItem;

package.json:

{
  "name": "Pickyassistcrm",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@gorhom/bottom-sheet": "^4.6.4",
    "@react-native-async-storage/async-storage": "^2.1.0",
    "@react-native-community/datetimepicker": "^8.2.0",
    "@react-native-community/geolocation": "^3.4.0",
    "@react-native-community/slider": "^4.5.5",
    "@react-native-picker/picker": "^2.11.0",
    "@react-navigation/bottom-tabs": "^6.6.1",
    "@react-navigation/material-top-tabs": "^6.6.14",
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/native-stack": "^6.10.1",
    "@reduxjs/toolkit": "^2.5.1",
    "axios": "^1.7.9",
    "html-entities": "^2.5.2",
    "lucide-react-native": "^0.475.0",
    "react": "18.2.0",
    "react-native": "0.74.5",
    "react-native-android-location-enabler": "^2.0.1",
    "react-native-calendar-strip": "^2.2.6",
    "react-native-document-picker": "^9.3.1",
    "react-native-element-dropdown": "^2.12.2",
    "react-native-gesture-handler": "^2.21.2",
    "react-native-get-random-values": "^1.11.0",
    "react-native-google-places-autocomplete": "^2.5.7",
    "react-native-image-picker": "^7.2.3",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-loader-kit": "^2.0.8",
    "react-native-maps": "^1.20.1",
    "react-native-modal-datetime-picker": "^18.0.0",
    "react-native-pager-view": "^6.6.1",
    "react-native-paper": "^5.13.1",
    "react-native-permissions": "^5.2.5",
    "react-native-pie-chart": "^3.0.2",
    "react-native-reanimated": "^3.16.3",
    "react-native-safe-area-context": "^4.14.0",
    "react-native-screens": "^4.3.0",
    "react-native-shimmer-placeholder": "^2.0.9",
    "react-native-sound": "^0.11.2",
    "react-native-step-indicator": "^1.0.3",
    "react-native-svg": "^15.11.1",
    "react-native-svg-transformer": "^1.5.0",
    "react-native-toast-notifications": "^3.4.0",
    "react-native-vector-icons": "^10.2.0",
    "react-native-video": "^6.9.1",
    "react-native-webview": "^13.12.5",
    "react-native-wheel-color-picker": "^1.3.1",
    "react-redux": "^9.2.0",
    "redux-persist": "^6.0.0",
    "toggle-switch-react-native": "^3.3.0",
    "twrnc": "^4.6.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.74.87",
    "@react-native/eslint-config": "0.74.87",
    "@react-native/metro-config": "0.74.87",
    "@react-native/typescript-config": "0.74.87",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

Answer 1

Instead of using TouchableOpacity from react-native, use the RNGH version:

import { TouchableOpacity } from react-native-gesture-handler;