React-native-router-flux: React Native router flux not getting correct focused value on icon render

Created on 2 Nov 2018  路  1Comment  路  Source: aksonov/react-native-router-flux

Version

  • react-native-router-flux v4.0.1
  • react v16.3.1
  • react-native v0.55.4

Expected behaviour

I need to get the focused as true for the selected ones.

Actual behaviour

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
key="tabbar"
swipeEnabled
type="replace"
showLabel={false}
{...DefaultProps.tabProps}
>
key="home"
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.

Most helpful comment

I have found out solution by getting props.navigation.isFocused()... Then we would get the correct values.

>All comments

I have found out solution by getting props.navigation.isFocused()... Then we would get the correct values.

Was this page helpful?
0 / 5 - 0 ratings