Can't add multiple childen in react

Question

When I try to add icons inside bottom tab https://icons.expo.fyi/ it shows Tab.Navigator error

This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided.ts(2746)

i try add

children: React.ReactNode;

but got ReactNode error

Property 'ReactNode' does not exist on type 'typeof React'.ts(2339)

Here is index.tsx file

 const Tab = createBottomTabNavigator();

 function BottomTabNavigator() {
   return (
      <Tab.Navigator>
       <Tab.Screen name="Dashboard" component={DashboardScreen} />
       screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;
            if (route.name === 'Dashboard') {
              iconName = focused
                ? 'ios-speedometer'
                : 'ios-speedometers';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list' : 'ios-list-outline';
            }
       <Tab.Screen name="Settings" component={TabTwoScreen} />
     </Tab.Navigator>
   );
 }

https://reactnavigation.org/docs/tab-based-navigation/

https://reactnavigation.org/docs/bottom-tab-navigator/

Answer 1

Check your sample:

1. screenOptions is a property of Navigator
2. Each opening bracket has a closing one

function BottomTabNavigator() {
       return (
          <Tab.Navigator>
           <Tab.Screen name="Dashboard" component={DashboardScreen} />
           screenOptions={({ route }) => ({ // Is property of Navigator
              tabBarIcon: ({ focused, color, size }) => {
                let iconName;
                if (route.name === 'Dashboard') {
                  iconName = focused
                    ? 'ios-speedometer'
                    : 'ios-speedometers';
                } else if (route.name === 'Settings') {
                  iconName = focused ? 'ios-list' : 'ios-list-outline';
                } // closing brackets are missing
           <Tab.Screen name="Settings" component={TabTwoScreen} />
         </Tab.Navigator>
       );
     }

It should look like:

const Tab = createBottomTabNavigator();

function BottomTabNavigator() {
  return (
    <Tab.Navigator
      screenOptions={({route}) => ({
        tabBarIcon: ({focused, color, size}) => {
          let iconName;
          if (route.name === 'Dashboard') {
            iconName = focused ? 'ios-speedometer' : 'ios-speedometers';
          } else if (route.name === 'Settings') {
            iconName = focused ? 'ios-list' : 'ios-list-outline';
          }
        }
      })}
    >
      <Tab.Screen name='Dashboard' component={DashboardScreen} />
      <Tab.Screen name='Settings' component={TabTwoScreen} />
    </Tab.Navigator>
  );
}