React Native RenderItem not working with custom renderItem - react-native

Question

I created a custom renderItem using the React Native documentation as an example and it is not working, however, when using a simple component (commented in the script), it is working perfectly. I have tried to change some things around, but I can't make it work.
For the flatlist, I based my code on the react native example at https://reactnative.dev/docs/flatlist, using the flat-list-simple example, calling the function in the render item as renderItem={Function} but react-native does not recognize it, I appreciate any guidance on what I could change or if I am doing the whole thing wrong, thank you!
import { StyleSheet, Text, View, TouchableOpacity, FlatList } from 'react-native'
import React from 'react'
import Ionicons from 'react-native-vector-icons/Ionicons';
import VisitasHeader from './VisitasHeader';
const VisitasCard = ({visitas,titulo}) => {
// renderItem for FlatList
const CardFunction = (item) => {
<View style={{marginBottom:10}}>
<View style={styles.card_top}>
<View style={styles.holder}>
<View style={styles.icon}>
<Ionicons
name='ios-people-circle-sharp'
color='white'
size={48}
/>
</View>
<View style={styles.visitante}>
<Text style={styles.text_nombre}>{item.nombre} </Text>
<Text style={styles.text_cedula}>e-0000001</Text>
<View>
<Text style={styles.text_fecha}>2 de enero de 2022</Text>
</View>
</View>
</View>
</View>
<View style={styles.card_bottom}>
<TouchableOpacity style={styles.button_accept}>
<Text style={styles.button_text}>Aceptar</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button_reject}>
<Text style={styles.button_text}>Rechazar</Text>
</TouchableOpacity>
</View>
</View>
}
return (
<FlatList
ListHeaderComponent={<VisitasHeader title={titulo} />}
data={visitas}
keyExtractor={item => item.id}
renderItem={CardFunction}
// renderItem={({item}) => <View><Text>{item.nombre}</Text></View>} WORKS PERFECT WHEN USING THIS
ListEmptyComponent={<Text style={{textAlign:'center',paddingTop:10}}>No tiene visitas por aprobar.</Text>}
/>
)
}
export default VisitasCard
const styles = StyleSheet.create({
button_accept:{
backgroundColor:'green',
// margin:12,
padding:10,
borderRadius:12,
},
button_text:{
color:'white',
fontWeight:'bold',
},
button_reject:{
backgroundColor:'red',
// margin:12,
padding:10,
borderRadius:12,
},
card_bottom:{
height:50,
flexDirection:'row',
alignItems:'center',
justifyContent:'center',
borderWidth:1,
borderColor:'#3959ea',
borderBottomLeftRadius:8,
borderBottomRightRadius:8,
justifyContent:'space-evenly'
},
card_top:{
height:100,
backgroundColor:'#3959ea',
borderTopLeftRadius:8,
borderTopRightRadius:8,
alignItems:'center',
justifyContent:'center',
},
holder:{
flexDirection:'row',
},
icon:{
padding:10,
alignItems:'center',
margin:12,
},
text_cedula:{
color:'white',
fontSize:18,
textTransform:'uppercase',
fontWeight:'600',
},
text_nombre:{
color:'white',
fontSize:24,
textTransform:'capitalize',
fontWeight:'800',
// ellipsizeMode:'head',
// numberOfLines:1,
},
text_fecha:{
color:'white'
},
visitante:{
flex:2,
justifyContent:'center',
alignItems:'flex-start',
}
})

Answer 1

try add { item } and add return
const CardFunction = ({ item }) => {
return (
<View style={{ marginBottom: 10 }}>
<View style={styles.card_top}>
<View style={styles.holder}>
<View style={styles.icon}>
<Ionicons
name="ios-people-circle-sharp"
color="white"
size={48}
/>
</View>
<View style={styles.visitante}>
<Text style={styles.text_nombre}>{item.nombre} </Text>
<Text style={styles.text_cedula}>e-0000001</Text>
<View>
<Text style={styles.text_fecha}>2 de enero de 2022</Text>
</View>
</View>
</View>
</View>
<View style={styles.card_bottom}>
<TouchableOpacity style={styles.button_accept}>
<Text style={styles.button_text}>Aceptar</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button_reject}>
<Text style={styles.button_text}>Rechazar</Text>
</TouchableOpacity>
</View>
</View>
);
};