I need to get the focused as true for the selected ones.
Now, when I load my project I would get both 'true' and 'false' from focused value. That, I think it would render 2 times with different values.
This is my code
swipeEnabled
type="replace"
showLabel={false}
{...DefaultProps.tabProps}
>
title={AppConfig.appName.toUpperCase()}
icon={({ selected }) => {
console.log(selected); return (
);
}}
{...DefaultProps.navbarProps}
>
<Stack
key="search"
title="Available Services"
icon={({ focused }) => {
console.log(focused); return (
<Icon name="search" {...DefaultProps.icons} />
);
}}
{...DefaultProps.navbarProps}
>
<Scene key="search" component={SearchContainer} Layout={SearchComponent} />
</Stack>
<Stack
key="profile"
title="PROFILE"
icon={({ selected }) => {
console.log(selected); return (
<Icon name="contact" {...DefaultProps.icons} />
);
}}
{...DefaultProps.navbarProps}
>
<Scene key="profileHome" component={MemberContainer} />
</Stack>
</Tabs>
Result of the code:
true
false
true
false
true
false
true
false
true
false
true
false
When I click on the tabs , this same pattern would reproduce.
I have found out solution by getting props.navigation.isFocused()... Then we would get the correct values.
Most helpful comment
I have found out solution by getting props.navigation.isFocused()... Then we would get the correct values.