'React-native-gesture-handler swipeable is not working on Android

Here is my code.

App.js

import Swipeable from 'react-native-gesture-handler/Swipeable';

const RightActions = () => {
  return (
    <TouchableOpacity onPress={() => console.warn('works'))}>
      <Icon name="md-trash" size={18} color={Colors.red} />
    </TouchableOpacity>
  );
};

const App = () => {
  return (
    <ScrollView>
    ...
      {Object.keys(data).map(key => {
        return (
          <Swipeable key={key} renderRightActions={RightActions}>
            <View>
              <Text>Swipe left</Text>
            </View>
          </Swipeable>
        );
      });
    </ScrollView>
  );
};

export default App;

And here is my MainActivity.java as the package suggest.

package com.project;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "project";
    }

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }
        };
    }
}

I don't understand what is going on but it's a bit frustrating. Is there anyone who knows what to do ? My code is an exact copy of a tutorial i found so i expected it to work. The only difference is that my project uses react-native while the tutorial used expo.

Solution 1:^[1]

Use FlatList instead of map as react-native-gesture-handler supports the list component.

Solution 2:^[2]

Maybe related or not since I'm still new to RN, mine is working after I put the renderItem row components of flatlist in seperate component file and import it to main screen file like this:

create new component file, example implementing Swipeable.

export default RowItemComponent =()=> {
  return (
   <Swipeable>
      ....
   </Swipeable>
   )
}

import back to main screen flatlist:

<Flatlist renderItem = {({item}) => { return <RowItemComponent>}}

You should already able to swipe inside flatlist
Mine always fail to work perfectly if I put renderItem component as const in same file.

Solution 3:^[3]

Update your MainActivity.java file (or wherever you create an instance of ReactActivityDelegate), so that it overrides the method responsible for creating ReactRootView instance and then use the root view wrapper provided by this library. Do not forget to import ReactActivityDelegate, ReactRootView, and RNGestureHandlerEnabledRootView:

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

Solution 4:^[4]

At your TouchableOpacity onPress you had extra ), that is why you got error. Already test your code removing the extra ) and working.

remove the extra ")"

TouchableOpacity onPress={() => console.warn('works')}

Solution 5:^[5]

You need to wrap your Swipeable component in GesturHandlerRootView. I think this will solve your issue

import {Swipeable, GestureHandlerRootView} from 'react-native-gesture-handler';

const RightActions = () => {
  return (
    <TouchableOpacity onPress={() => console.warn('works'))}>
      <Icon name="md-trash" size={18} color={Colors.red} />
    </TouchableOpacity>
  );
};

const App = () => {
  return (
    <ScrollView>
    ...
      {Object.keys(data).map(key => {
        return (
          <GestureHandlerRootView>
            <Swipeable key={key} renderRightActions={RightActions}>
              <View>
                <Text>Swipe left</Text>
              </View>
            </Swipeable>
          </GestureHandlerRootView>
        );
      });
    </ScrollView>
  );
};

export default App;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	A H
Solution 2
Solution 3	Rajesh Nasit
Solution 4	Kishan Bharda
Solution 5	Ishaq Kamran

'React-native-gesture-handler swipeable is not working on Android

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]