react-native swipeable gesture not working on android?

Question

I am doing a react native course with Mosh (https://codewithmosh.com/). I am using expo. I am very new to react native and don't really know what I am doing, but I know my code should work. I double-checked my code against his and even went so far as to copy my project over to a friends mac and see if the code works on ios (as mosh is running his code on the ios simulator). On the ios simulator, my code runs perfectly, but on android, nothing happens.

Here is where I implement the swipeable itself:

import React from 'react';
import { StyleSheet, View, Image, TouchableHighlight } from 'react-native';
import Swipeable from 'react-native-gesture-handler/Swipeable';


import AppText from './AppText';
import colors from '../config/colors';

function ListItem({title, subtitle, image, onPress, renderRightActions}) {
    return (
        <Swipeable renderRightActions={renderRightActions} >
            <TouchableHighlight underlayColor={colors.light} onPress={onPress} >  
                <View style={styles.container} >
                    <Image style={styles.image} source={image} />
                    <View> 
                        <AppText style={styles.title} >{title}</AppText>
                        <AppText style={styles.subTitle}>{subtitle}</AppText>
                    </View>
                </View>
            </TouchableHighlight>
        </Swipeable>
    );
}

I then export this to a different screen:

function MessagesScreen(props) {
    return (
        <Screen>
            <FlatList
                data={messages}
                keyExtractor={message => message.id.toString}
                renderItem={({ item }) => (
                <ListItem 
                title={item.title}
                subtitle={item.description}
                image={item.image}
                onPress={() => console.log('message selected', item)}
                renderRightActions={ListItemDeleteAction}
            />
        )} 
            ItemSeparatorComponent={ListItemSeparator} 
        />

        </Screen>
    );
}

the listItemDelete action I am passing into the renderRightActions prop can be seen here:

function ListItemDeleteAction(props) {
    return (
        <View style={styles.container} ></View>
    );
}

Thermoelectric

I am in the exact same place! Lol – Tohubohu

Answer 1

Alright so, I found a solution by wrapping the swipeable in a gestureHandlerRootView.

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

import AppText from "./AppText";
import colors from "../config/colors";

function ListItem({ title, subtitle, image, onPress, renderRightActions }) {
  return (
    <GestureHandlerRootView>
      <Swipeable renderRightActions={renderRightActions}>
        <TouchableHighlight underlayColor={colors.light} onPress={onPress}>
          <View style={styles.container}>
            <Image style={styles.image} source={image} />
            <View>
              <AppText style={styles.title}>{title}</AppText>
              <AppText style={styles.subTitle}>{subtitle}</AppText>
            </View>
          </View>
        </TouchableHighlight>
      </Swipeable>
    </GestureHandlerRootView>
  );
}

Thermoelectric

You save my day :) – Ketch

This isn't working for me. I have a list of swipeable items inside a scrollview. If I slightly swipe left it scrolls instead of showing the action button. – Cheslie

Answer 2

I found a solution by wrapping the swipeable in a gestureHandlerRootView.

import { GestureHandlerRootView } from "react-native-gesture-handler";

import AppText from "./AppText";
import colors from "../config/colors";

function ListItem({ title, subtitle, image, renderRightActions }) {
  return (
    <GestureHandlerRootView>
      <Swipeable renderRightActions={renderRightActions}>
          <View style={styles.main}>
            <Image style={styles.img} source={image} />
          </View>
      </Swipeable>
    </GestureHandlerRootView>
  );
}

Cockerel

Answer 3

One common issue that might cause this problem is missing or incorrectly set styles, particularly the width of the swipeable component.

In React Native, it's essential to define the width explicitly for the component to be swipeable and display correctly.

Here is how you can ensure your component is styled correctly:

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

const MySwipeableComponent = () => {
  const renderRightActions = () => (
    <View style={styles.rightAction}>
      <Text style={styles.actionText}>Delete</Text>
    </View>
  );

  return (
    <Swipeable renderRightActions={renderRightActions}>
      <View style={styles.container}>
        <Text style={styles.text}>Swipe me</Text>
      </View>
    </Swipeable>
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red',
    height: '100%',
    width: 80, // Ensure width is defined here
  },
  rightAction: {
    backgroundColor: 'blue',
    justifyContent: 'center',
    alignItems: 'center',
    width: 80, // Width for the action button
  },
  actionText: {
    color: 'white',
  },
  text: {
    color: 'white',
  },
});

export default MySwipeableComponent;

Imparity

Answer 4

try this option...

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

then wrap on <Swipeable>..</Swipeable> look example below

<GestureHandlerRootView>
      <Swipeable renderRightActions={renderRightActions}>
        <TouchableHighlight underlayColor={Colors.ccc} onPress={onPress}>
          <View style={styles.view}>
            <Image style={styles.image} source={image} />
            <View style={styles.details}>
              <Txt style={styles.title}>{title}</Txt>
              <Txt style={styles.subtitle}>{subtitle}</Txt>
            </View>
          </View>
        </TouchableHighlight> 
      </Swipeable>
    </GestureHandlerRootView>

Burtie