I created a custom renderItem using the React Native documentation as example and it is not working, however when using a simple component (commented in the scrip), it is working perfectly. I have tried to change somethings 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 renderItem 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',
    }
})

CodePudding user response：

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