hello guys i m facing a problem with swipeable. It is not rendering the right actions. i can show my code but in my case it’s not the code from the course, its my personal app. When i did this course it worked, but months later im doing my project and i got this problem.
Here is my component ( as if it was the ListItem from the course):
import React from "react";
import { View, StyleSheet } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import Swipeable from "react-native-gesture-handler/Swipeable";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import AppText from "./AppText";
import ProfileImage from "./ProfileImage";
import defaultStyles from "../config/styles";
const PICTURE_SIZE = 100;
const Comment = ({ item, index, renderRighActions }) => {
return (
<GestureHandlerRootView>
<Swipeable renderRightActions={renderRighActions}>
<View key={index} style={styles.container}>
<ProfileImage
userId={item.userId}
size={{ width: PICTURE_SIZE, height: PICTURE_SIZE }}
/>
<View style={styles.textContainer}>
<AppText style={styles.text}>{item.text}</AppText>
</View>
<View
style={{
flex: 1,
alignItems: "flex-end",
}}
>
<MaterialCommunityIcons
name="chevron-right"
size={24}
color={defaultStyles.colors.medium}
/>
</View>
</View>
</Swipeable>
</GestureHandlerRootView>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: "row",
alignItems: "center",
},
text: {
backgroundColor: defaultStyles.colors.secondary,
padding: 10,
borderRadius: 10,
color: defaultStyles.colors.black,
},
delete: {
flexDirection: "row",
},
});
export default Comment;
Here is my screen, where i render the component (ignore the code that is not useful for this problem, look only to the comments flatlist and its render item function):
const renderComment = ({ item, index }) => {
return (
<Comment
renderRightActions={() => <DeleteAction />}
item={item}
index={index}
/>
);
};
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<View style={styles.container}>
<View style={styles.imageContainer}>
<Image
style={styles.image}
source={{ uri: `${baseURL}\\${item.picture.src}` }}
/>
</View>
<View style={styles.profileContainer}>
<ScrollView showsVerticalScrollIndicator={false}>
<View style={styles.profileContent}>
<View style={styles.header}>
<View style={{ flex: 1 }}>
<AppText numberOfLines={3} style={styles.cetaceanName}>
{item.name}
</AppText>
</View>
<View style={styles.headerIcons}>
<IconButton
onPress={handleFavoritePress}
name={selectFavoriteIcon()[0]}
color={selectFavoriteIcon()[1]}
size={32}
/>
<IconButton
onPress={handleNotificationPress}
name={selectNotificationIcon()}
color={defaultStyles.colors.black}
size={32}
/>
</View>
</View>
<AppText style={styles.title}>Detalhes</AppText>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
>
<ListDetails details={item.details} />
</ScrollView>
{/* <AppText style={styles.text}>{item.individualId}</AppText>
*/}
<AppText style={styles.title}>Introdução</AppText>
<AppText style={styles.text}>{item.introduction}</AppText>
<AppText style={styles.title}>Comportamento social</AppText>
<AppText style={styles.text}>{item.socialBehavior}</AppText>
<AppText style={styles.title}>Caraterísticas físicas</AppText>
<AppText style={styles.text}>{item.physic}</AppText>
<AppText style={styles.title}>História</AppText>
<AppText style={styles.text}>{item.history}</AppText>
<AppText style={styles.title}>Rota de migração</AppText>
<AppText style={styles.text}>{item.migration}</AppText>
<AppText style={styles.title}>Comentários</AppText>
<AppTextInput
style={styles.inputComment}
submitIcon
submitDisabled={!comment && true}
onSubmit={handleSubmit}
size={24}
value={comment}
onChangeText={(text) => handleComment(text)}
icon="comment"
placeholder="Adicione um comentário..."
/>
{comments.length != 0 ? (
<FlatList
style={styles.commentsBox}
horizontal={false}
nestedScrollEnabled
showsVerticalScrollIndicator
data={comments}
renderItem={renderComment}
ItemSeparatorComponent={() => (
<ListItemSeparator
width="95%"
color={defaultStyles.colors.transparent}
/>
)}
/>
) : (
<Skeleton style={styles.skeletonComments} />
)}
</View>
</ScrollView>
</View>
{isBottomSheetActive && (
<>
<Fade duration={500} value={0.4} isVisible={isAnimating} />
<BottomSheet
closeBottomSheet={handleCloseBottomSheet}
onPress={handleApplyChanges}
maxValue={-400}
minValue={-350}
initialValue={-400}
title="Notificações"
>
<ListOptions
options={notifications}
optionsActive={inputs}
onPress={(itemId, itemTitle) =>
handleNotificationOptionPress(itemId, itemTitle)
}
handleDropDownPressed={(itemId, itemTitle) =>
handleNotificationOptionPress(itemId, itemTitle)
}
handleOnChange={(text, id) =>
handleOnChangeNotification(text, id)
}
/>
</BottomSheet>
</>
)}
</View>
</GestureHandlerRootView>
);
And finally here is my deleteAction component:
import React from "react";
import { View, StyleSheet, TouchableOpacity } from "react-native";
import defaultStyles from "../config/styles";
import { MaterialCommunityIcons } from "@expo/vector-icons";
const DeleteAction = ({ onPress }) => {
return (
<TouchableOpacity onPress={onPress}>
<View style={styles.container}>
<MaterialCommunityIcons
name="trash-can"
size={24}
color={defaultStyles.colors.white}
></MaterialCommunityIcons>
</View>
</TouchableOpacity>
);
};
export default DeleteAction;
const styles = StyleSheet.create({
container: {
backgroundColor: defaultStyles.colors.danger,
width: 70,
alignItems: "center",
justifyContent: "center",
borderTopRightRadius: 15,
borderBottomRightRadius: 15,
},
});