CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Vivid Naz
Vivid Naz

Reputation: 3

Passing a parameter from a screen in SwitchNavigator to another in a TabNavigator

I have been having some problems passing parameters from a screen in a switchNavigator to another in a TabNavigator

setvalue(response){
    this.setState({profile :response})
    
    console.warn(this.state.profile);
    this.state.navigate('Navigators',{profile: profile})
   
  }

The profile contains a JSON object of profile details. The navigation sends the date to the 'Navigators' screen which is just a TabNavigator

const Navigators = createAppContainer(Userstack);

export default RootStack = createSwitchNavigator(
  {
    Home: {
      screen: Login
    },
    Register: {
      screen: Registration
    },
   Navigators: {
      screen: Navigators
    },
  },
  {
    initialRouteName: 'Home'
  }

);

How the TabNavigator is created. 

export default Userstack = createBottomTabNavigator(
  {
    User: {
      screen: Profile
    },
    Discovery: {
      screen: DiscoveryNavigator
    },
  },
  {
      defaultNavigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ tintColor }) => {
          const { routeName } = navigation.state;
          let IconComponent = Ionicons;
          let iconName;
          if (routeName === 'User') {
            iconName = `md-contact`;
            
            IconComponent = HomeIconWithBadge;
          } else if (routeName === 'Discovery') {
            iconName = `md-search`;
          }
          return <IconComponent name={iconName} size={27} color={tintColor} />;
        },
      }),
      tabBarOptions: {
        activeTintColor: '#00FA9A',
        inactiveTintColor: 'black',
      },
    }

);

The screen I wish to access the profile information is 

export default class Profile extends Component {
  constructor(props){
    super(props);
    console.warn(props)
    this.State = {
      profile: this.props.navigation.params.profile
    }
    
  }

Upvotes: 0

Views: 493

Answers (1)

Subhendu Kundu
Subhendu Kundu

Reputation: 3856

Did you try this.props.navigation.state.params?

According to Reference: https://reactnavigation.org/docs/params.html,

You can also directly access the params object with this.props.navigation.state.params. This may be null if no params were supplied, and so it's usually easier to just use getParam so you don't have to deal with that case.

Upvotes: 1

Related Questions