this is my first time to use stackoverflow, I am new to use react native, I have created a tab navigator and using the expo icons package @expo/vector-icons. My problem is that, when the application open on the first time all the tab icons are not rendered which shows a question mark. After I clicked the tabBarIcon, the icon is rendered ? Below that is my history task tab screen, other of my tab screens also use this way to render the tab bar icon.
So I don't know what is the problem. Thanks for answering my question.
History task tab screen
useLayoutEffect(() => {
navigation.setOptions({
title: 'History Task',
tabBarIcon: ({ focused }) => (
<MaterialIcons name="history" size={focused ? 30 : 24} color={focused ? 'rgb(0,122,255)' : 'black'} />
),
});
}, [navigation]);
You're setting the icon in useLayoutEffect inside the screen. This will run only after the screen is rendered.
By default, bottom tab navigator renders screen lazily i.e. screens don't render until you visit them at least once. So the icon doesn't get set until you actually open the screen.
There's no reason to set the icon in an effect in your screen. Move it to options prop on the screen or screenOptions on the navigator. setOptions should only be used if you want to share some state between your component and options.
https://reactnavigation.org/docs/tab-based-navigation/#customizing-the-appearance
