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

CodePudding user response：

You're rendering an object inside TextView. Refactor your code as below:

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.name}
            </Text>

            <Text
              style={styles.card2}
              //onPress={() => navigation.navigate('Mapa')}
            >
              {itemz.lati}
            </Text>

            <Text
              style={styles.card2}
              //onPress={() => navigation.navigate('Mapa')}
            >
              {itemz.long}
            </Text>
          </>
        ))}
        {nazvy.map((item) => (
          <Text
            style={styles.card}
            //onPress={() => navigation.navigate('Mapa')}
          >
            {item}
          </Text>
        ))}
      </View>
    </ScrollView>
  );
}

CodePudding user response：

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>

CodePudding user response：

You are mapping on ‘itemz’ that is a object {name: ´´, lati: ´´, long: ´´ }. If you only need to display the name => itemz.name

Thanks @J.dev for your answer!