Swipeable is not working on android?

React Native
1

here is my MessagesScreen.js

import React from 'react';

import { FlatList, StyleSheet, View} from 'react-native';

import ListItem from '../components/ListItem';

import ListItemSeparator from '../components/ListItemSeparator';

import Screen from '../components/Screen';

const messages = [

    {

        id: 1,

        title:"T1",

        description:"D1",

        image: require("../assets/mosh.jpg")

    },

    {

        id: 2,

        title:"T2",

        description:"D2",

        image: require("../assets/mosh.jpg")

    }

]

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={()=>(<View style={{

                                               backgroundColor: "red",

                                               width:70

                                           }}></View>)}/>)}

            ItemSeparatorComponent={ListItemSeparator}/>

        </Screen>

    );

}

const styles = StyleSheet.create({

   

})

export default MessagesScreen;

and here ListItem.js

import React from 'react';

import { View, StyleSheet, Image, TouchableHighlight } from 'react-native';

import AppText from './AppText';

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

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

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>

    );

}

const styles = StyleSheet.create({

    container:{

        flexDirection:"row",

        padding: 15

    },

    image:{

        width:70,

        height:70,

        borderRadius: 35,

        marginRight:10

    },

    title:{

        fontWeight: "bold"

    },

    subTitle:{

        color:colors.medium

    }

})

export default ListItem;
1 Like
3

It has taken me hours, but I finally found a solution. Try this:

All it involves is wrapping the entire thing around a 

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

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>
  );
}
4 Likes
4

Hey Kris,
Thank You for the help. It worked after wrapping it with GestureHandlerRootView.

2 Likes
5

Wow…Nowhere does it mention to wrap it in a GestureHandlerRootView but now it works. THANKS!

1 Like
6

Hello there,

It seems that this solution does NOT work in Android 12 API 31.
I’m rather frustrated by this.

Took the code from the site (‘END’ version - and it still doesn’t work even after I’ve added the ‘GestureHandlerRootView’ hack)

Any help will be much appreciated.

It looks as if the Android guys are doing the best they can to avoid supporting the swipe ability.

Thanks,
Jacob

7

Thank you Kris, it worked.

8

Kris’ suggestion worked like a peach for me.

9

did you fix it ? also could not render the action even wrapping with the gesture handler root view

10

Works. Thanks! (using on Pixel 7 virtual device)