Objects are not valid as a React child React Native

Question

I'm getting Render Error Objects are not valid as a React child (found:object with keys {name, lati, long}). If you meant to render a collection of children, use an array instead.

I need to send the prop "name" from const mesta using Tab.Screen children, but keep getting the error.

My code:

MainContainer.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';

// Screens
import Primary from './Screens/Primary';
import Secondary from './Screens/Secondary';
import Map_map from './Screens/Map_map';

// Locations
const mesta = [
  {name: 'Praha', lati: '', long: ''},
  {name: 'České Budějovice', lati: '', long: ''},
  {name: 'Plzeň', lati: '', long: ''},
  {name: 'Karlovy Vary', lati: '', long: ''},
  {name: 'Ústí nad Labem', lati: '', long: ''},
  {name: 'Liberec', lati: '', long: ''},
  {name: 'Hradec Králové', lati: '', long: ''},
  {name: 'Pardubice', lati: '', long: ''},
  {name: 'Jihlava', lati: '', long: ''},
  {name: 'Brno', lati: '', long: ''},
  {name: 'Olomouc', lati: '', long: ''},
  {name: 'Ostrava', lati: '', long: ''},
  {name: 'Zlín', lati: '', long: ''},
]

//Screen names
const lokace = "Lokace";
const mapa = "Mapa";
const mapa_det = "Mapa_det";

const Tab = createBottomTabNavigator();

function MainContainer() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        initialRouteName={lokace}
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;
            let rn = route.name;

            if (rn === lokace) {
              iconName = focused ? 'home' : 'home-outline';

            } else if (rn === mapa) {
              iconName = focused ? 'map' : 'map-outline';
            }
            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: '#007aff',
          inactiveTintColor: 'grey',
          labelStyle: { paddingBottom: 10, fontSize: 10 },
          style: { padding: 10, height: 70}
        }}>

        <Tab.Screen name={lokace} children={() => <Primary mesta={mesta}/>}/>
        {/* <Tab.Screen name={mapa} children={() => <Secondary towns={mesta}/>}/>
        <Tab.Screen name={mapa_det} component={Map_map}/> */}

      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default MainContainer;

Primary.js

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',]


export default function Primary(props)
{
    return(
        <ScrollView style=
            {{ 
                flex: 1,
            }}>
            <View>
                {props.mesta.map(itemz => (
                    <Text 
                    style={styles.card2} 
                    //onPress={() => navigation.navigate('Mapa')}
                    >
                        {itemz}
                    </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'
    },
    card2:{
        backgroundColor: "#FF3300",
        borderRadius: 50,
        alignItems: 'center',
        margin: 5,
        padding: 10,
        color: 'white',
        fontWeight: 'bold'
    },
  });

Answer 1

You can show complete object as string in Text view like

<View>
  {props.mesta.map((itemz) => (
    <Text
      style={styles.card2}
      //onPress={() => navigation.navigate('Mapa')}
    >
      {JSON.stringify(itemz)} // here it is
    </Text>
  ))}
</View>