React Native Bottom tabs navigator. tabBarButton: () => {} option is not working

Question

I have a question. When I use Tab navigator with separate Tab.Screen I should have an option tabBarButton as stated here. But when I try to use it, it throws an error.

Here is the code:

<Tab.Screen
    options={{
      tabBarIcon: ({ focused }) => {
        return (
          <TabIcon
            focused={focused}
            icon={icons.trade}
            isTrade
            label='Trade'
          />
        );
      },
      tabBarButton: (props) => {
        <TouchableOpacity {...props} onPress={() => console.log('wa')}>
          <Text>Touch</Text>
        </TouchableOpacity>;
      },
    }}
    name='Trade'
    component={Home}
  />

and here stack error: enter image description here

The Source that is written useFonts.js is sometimes changing. I don't think this file is causing errors. when I remove tabBarButton option, it functions properly.

By the way, I am using EXPO for this

Answer 1

You have to return the component in the tabBarButton callback. This can be done in two ways:

By adding a return statement:

    tabBarButton: (props) => {
        return <TouchableOpacity {...props} onPress={() => console.log('wa')}>
          <Text>Touch</Text>
        </TouchableOpacity>;
      },

or removing the brackets of the callback and make it an implicit return:

    tabBarButton: (props) => <TouchableOpacity {...props} onPress={() => console.log('wa')}>
          <Text>Touch</Text>
        </TouchableOpacity>,