Getting Error when i am trying to use props in Navigation

Question

I am trying to customize react native navigation, facing some issue when using props options

this is my app.js code

    import { NavigationContainer } from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Home from './Screens/home';
import Orders from './Screens/orders';
import Account from './Screens/account';
import TabComponent from './components/Tab'


const Tab = createBottomTabNavigator()

export default function App() {
  return (
   
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen  name="Home" component={Home} options={{
            tabBarButton: (props) => <TabComponent label="home" {...props} />,
          }} />
          <Tab.Screen  name="My Orders" component={Orders} />
          <Tab.Screen  name="Account" component={Account} />
        </Tab.Navigator>
      </NavigationContainer>
   
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
   
  },
});

this is my tabs.js code

import React from 'react';
import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
import styled from 'styled-components/native';
import Images from '../images';

const  Container = styled.TouchableWithoutFeedback``;
const Background = styled.View``;
const Icon = styled.Image``;
const Label = styled.Text``;




function Tab(label, accessibilityState ){
    const active = accessibilityState.selected;
    const icon = !active ? Images.icons[label] : Images.icons[ `${label}Active` ];
    return(
        <Container>
            <Background>
                <Icon source={icon}/>
                <Label>{label}</Label>
            </Background>
        </Container>
    );
}

export default Tab;

This is the error i am facing.

Error: Objects are not valid as a React child (found: object with keys {label, to, onPress, onLongPress, testID, accessibilityLabel, accessibilityRole, accessibilityState, accessibilityStates, style, children}). If you meant to render a collection of children, use an array instead. in div (created by Text) in Text (created by Context.Consumer) in StyledNativeComponent (created by Styled(Text)) in Styled(Text) (at Tab.js:21) in div (created by View) in View (created by Context.Consumer) in StyledNativeComponent (created by Styled(View)) in Styled(View) (at Tab.js:19) in ForwardRef(TouchableWithoutFeedback) in ForwardRef(TouchableWithoutFeedback) (created by Context.Consumer) in StyledNativeComponent (created by Styled(TouchableWithoutFeedback)) in Styled(TouchableWithoutFeedback) (at Tab.js:18) in Tab (at App.js:20) in BottomTabBarItem (created by BottomTabBar)

and I think error is in this part in app.js code but I don't know what it is and how resolve it.

options={{
            tabBarButton: (props) => <TabComponent label="home" {...props} />,
          }}

Thank you

Answer 1

You are retreiving props incorrectly on your tab component,

here is the below code to help you understand on how to pass props. You can either destructure your props and pass it inside the jsx or get the props directly and use props.label(etc.)

function Tab({label, accessibilityState} ) //<== Destructed props.
{
        const active = accessibilityState.selected;
        const icon = !active ? Images.icons[label] : Images.icons[ `${label}Active` ];
        return(
            <Container>
                <Background>
                    <Icon source={icon}/>
                    <Label>{label}</Label>
                </Background>
            </Container>
        );
    }
    
    export default Tab;

Props is a single object where you can pass all your properties inside.

Alternative would be,

function Tab(props ) //<== props.
{
        const active = props.accessibilityState.selected;
        const icon = !active ? Images.icons[label] : Images.icons[ `${props.label}Active` ];
        return(
            <Container>
                <Background>
                    <Icon source={icon}/>
                    <Label>{props.label}</Label>
                </Background>
            </Container>
        );
    }

    export default Tab;