can anyone tell me what I'm doing wrong? I was following a tutorial, but I can't get it to work. It always says "undefined is not an object (evaluating 'props.name')".
Maybe I missed something important but it look like the code in tutorial (https://reactnative.dev/docs/props).

    import * as React from 'react';
import { StyleSheet, ScrollView, View, Text, Image } from 'react-native';

var nazvy = ['Praha','České Budějovice','Plzeň','Karlovy Vary','Ústí nad Labem','Liberec','Hradec Králové','Pardubice','Jihlava','Brno','Olomouc','Ostrava','Zlín',]

function Mesta() {
    return(
        <View>
            <Primary name= "Praha" lati="2" long= "2"/>,
            <Primary name= "České Budějovice" lati="2" long= "2"/>,
            <Primary name= "Plzeň" lati="2" long= "2"/>,
            <Primary name= "Karlovy Vary" lati="2" long= "2"/>,
            <Primary name= "Ústí nad Labem" lati="2" long= "2"/>,
            <Primary name= "Liberec" lati="2" long= "2"/>,
            <Primary name= "Hradec Králové" lati="2" long= "2"/>,
            <Primary name= "Pardubice" lati="2" long= "2"/>,
            <Primary name= "Jihlava" lati="2" long= "2"/>,
            <Primary name= "Brno" lati="2" long= "2"/>,
            <Primary name= "Olomouc" lati="2" long= "2"/>,
            <Primary name= "Ostrava" lati="2" long= "2"/>,
            <Primary name= "Zlín" lati="2" long= "2"/>
        </View>
    )
}
//var data = [{name:'Jhon', age:28, city:'HO'},
//{name:'Onhj', age:82, city:'HN'},
//{name:'Nohj', age:41, city:'IT'}
//];


export default function Primary({ props, navigation })
{
    return(
        <ScrollView style=
            {{ 
                flex: 1,
            }}>
            <View>
            <Text>{props.name}</Text>
                    {nazvy.map(item => (
                        <Text 
                        style={styles.card} 
                        //onPress={() => navigation.navigate('Mapa')}
                        >
                            {item}
                        </Text>
                    ))}
            </View>
            </ScrollView>
    );
}

const styles = StyleSheet.create({
    card:{
        backgroundColor: "#007aff",
        borderRadius: 50,
        alignItems: 'center',
        margin: 5,
        padding: 10,
        color: 'white',
        fontWeight: 'bold'
    },
    
  });

CodePudding user response：

You need to add navigation prop here

CodePudding user response：

You can use like this :

export default function Primary({ name, navigation })

Or you can use like this :

export default function Primary( props )
const { name, navigation } = props;