Swipeable is not working on android?

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

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

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

1 Like

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