Im using: react-native, expo,
react-native-gesture-handler/Swipeable
here is a code of screen https://github.com/ArturScwaiberov/react-native-dental-app/blob/master/screens/HomeScreen.js
In my app there is list of appointments rendered by SectionList.
In renderItem I created two buttons, one of them is to delete item.
So, I cant understand how should I pass appointment ID to renderRightActions to delete or edit this current appointment.. please help me find out the solution!
Here is my HomeScreen code review:
const HomeScreen = ({ navigation }) => {
const [data, setData] = useState(null)
const [refreshing, setRefreshing] = useState(false)
const fetchAppointments = () => {
setRefreshing(true)
appointmentsApi
.get()
.then(({ data }) => {
setData(data.message)
setRefreshing(false)
})
.catch((e) => {
setRefreshing(false)
console.log(e)
})
}
useEffect(fetchAppointments, [])
const removeAppointment = (id) => {
console.log(id)
const result = data.map((group) => {
group.data = group.data.filter((item) => item._id !== id)
return group
})
setData(result)
//appointmentsApi.remove(id)
}
renderRightAction = (text, color, x, progress) => {
const trans = progress.interpolate({
inputRange: [0, 1],
outputRange: [x, 0],
})
const pressHandler = () => {
if (text === 'pencil') {
alert('hey')
} else {
//but how to get over here the ID of item from SectionList?
removeAppointment(id)
}
}
return (
<Animated.View style={{ flex: 1, transform: [{ translateX: trans }] }}>
<RectButton
style={{
alignItems: 'center',
flex: 1,
justifyContent: 'center',
backgroundColor: color,
}}
onPress={pressHandler}
>
<ActionText>
<Octicons name={text} size={24} color='white' />
</ActionText>
</RectButton>
</Animated.View>
)
}
renderRightActions = (progress) => (
<RightButtonsHandler>
{renderRightAction('pencil', '#B4C1CB', 160, progress)}
{renderRightAction('trashcan', '#F85A5A', 80, progress)}
</RightButtonsHandler>
)
return (
<Container>
<SectionList
style={{ paddingLeft: 20, paddingRight: 20 }}
sections={data}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => (
<Swipeable renderRightActions={renderRightActions} friction={2}>
<Appointment navigation={navigation} item={item} />
</Swipeable>
)}
renderSectionHeader={({ section: { title } }) => <SectionTitle>{title}</SectionTitle>}
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={fetchAppointments} />}
/>
<PluseButton
style={{
shadowColor: '#2A86FF',
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.3,
shadowRadius: 4.65,
elevation: 8,
}}
onPress={() => navigation.navigate('AddPatient')}
>
<Ionicons name='ios-add' size={32} color='white' />
</PluseButton>
</Container>
)
}
You only need to pass the item id as a function param.
renderRightActions={(progress) => renderRightActions(progress, item.id)}
I made all changes. Try this code:
const HomeScreen = ({ navigation }) => {
const [data, setData] = useState(null)
const [refreshing, setRefreshing] = useState(false)
const fetchAppointments = () => {
setRefreshing(true)
appointmentsApi
.get()
.then(({ data }) => {
setData(data.message)
setRefreshing(false)
})
.catch((e) => {
setRefreshing(false)
console.log(e)
})
}
useEffect(fetchAppointments, [])
const removeAppointment = (id) => {
console.log(id)
const result = data.map((group) => {
group.data = group.data.filter((item) => item._id !== id)
return group
})
setData(result)
//appointmentsApi.remove(id)
}
renderRightAction = (text, color, x, progress, id) => {
const trans = progress.interpolate({
inputRange: [0, 1],
outputRange: [x, 0],
})
const pressHandler = () => {
if (text === 'pencil') {
alert('hey')
} else {
// but how to get over here the ID of item from SectionList?
removeAppointment(id) // its simple! :)
}
}
return (
<Animated.View style={{ flex: 1, transform: [{ translateX: trans }] }}>
<RectButton
style={{
alignItems: 'center',
flex: 1,
justifyContent: 'center',
backgroundColor: color,
}}
onPress={pressHandler}
>
<ActionText>
<Octicons name={text} size={24} color='white' />
</ActionText>
</RectButton>
</Animated.View>
)
}
renderRightActions = (progress, id) => (
<RightButtonsHandler>
{renderRightAction('pencil', '#B4C1CB', 160, progress, id)}
{renderRightAction('trashcan', '#F85A5A', 80, progress, id)}
</RightButtonsHandler>
)
return (
<Container>
<SectionList
style={{ paddingLeft: 20, paddingRight: 20 }}
sections={data}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => (
<Swipeable renderRightActions={(progress) => renderRightActions(progress, item.id)} friction={2}>
<Appointment navigation={navigation} item={item} />
</Swipeable>
)}
renderSectionHeader={({ section: { title } }) => <SectionTitle>{title}</SectionTitle>}
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={fetchAppointments} />}
/>
<PluseButton
style={{
shadowColor: '#2A86FF',
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.3,
shadowRadius: 4.65,
elevation: 8,
}}
onPress={() => navigation.navigate('AddPatient')}
>
<Ionicons name='ios-add' size={32} color='white' />
</PluseButton>
</Container>
)
}