Add Icons in createMaterialTopTabNavigator ReactNavigation 5

Question

Since React Navigation passed from Version 4 to 5 I can't find how to show Icons instead labels. I used things like here but I get

Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API with React Navigation 5

I can't find how to pass tabBarIcon for each of my screen..

My simplified code is attached, can somebody help me ?

import React, { useState } from 'react'
import { Icon } from 'react-native-elements'
import { NavigationContainer } from '@react-navigation/native'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'

import OverViewComponent from '..'
import MatosComponent from '..'
import PhotographerComponent from '..'

const Tab = createMaterialTopTabNavigator()

export default function App() {
  const [start, setstart] = useState(
    new Date(xxxxx)
  )
  const [end, setend] = useState(xxxx)
  const [changed, setchange] = useState(xxxx)

  const setNewDate = (value) => {xxxx
  }

  return (
    <NavigationContainer>
      <Tab.Navigator
        tabBarOptions={{
          activeTintColor: 'black',
          inactiveTintColor: '#525252',
          activeBackgroundColor: 'green',
          showIcon: true,
          showLabel: false,
          iconStyle: {
            width: 'auto',
            height: 20,
          },
          tabStyle: {
            backgroundColor: '#a8a4b4',
            margin: 0.2,
            borderRadius: 2,
          },
        }}
      >
        <Tab.Screen
          name="Résumé"
          component={OverViewComponent}
          numberOfLines={1}
          initialParams={{
            startdate: start,
            enddate: end,
            haschange: changed,
            onChange: { setNewDate },
          }}
        />

        <Tab.Screen
          name="Matos"
          numberOfLines={1}
          component={MatosComponent}
          initialParams={{
            startdate: start,
            enddate: end,
            haschange: changed,
            onChange: { setNewDate },
          }}
        />

        <Tab.Screen
          name="Gens"
          numberOfLines={1}
          component={PhotographerComponent}
          initialParams={{
            startdate: start,
            enddate: end,
            haschange: changed,
            onChange: { setNewDate },
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  )
}

Answer 1

You can do it that way:

<Tab.Screen
  name="Home"
  component={Home}
  options={{
    tabBarIcon: () => <Image source={iconHome} />,
  }}
/>

You can also take some properties and do this:

<Tab.Screen
  name="Home"
  component={Home}
  options={{
    tabBarLabel: 'Homescreen',
    tabBarIcon: ({ focused }) =>
      focused ? (
        <Image source={iconHomeActive} />
      ) : (
        <Image source={iconHomeInactive} />
      ),
  }}
/>