Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
105
rated 0 times [  110] [ 5]  / answers: 1 / hits: 5760  / 2 Years ago, fri, december 31, 2021, 12:00:00

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

More From » android

 Answers
5

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

[#542] Monday, December 20, 2021, 3 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
feliciarainak

Total Points: 104
Total Questions: 91
Total Answers: 83

Location: Greenland
Member since Thu, Oct 27, 2022
2 Years ago
;