Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

309
Views
react-native swipeable gesture not working on android?

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>
    );
}
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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>
  );
}
about 4 years ago · Juan Pablo Isaza Report

0

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

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!