Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

310
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda