Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

How to pass a state through tabnavigator react-native

$
0
0

I've been trying to implement an authentification system for my app using JWT. However when I can't figure out how can I pass my state through a navigator? This state will contain the token for the user. What I did is a easy system that check if the user has a token or not if he does not have one it will be redirected to the login page where he can either log in or register. If he choses to login I give him a token and then he's redirected to my homescreen using the Tab navigator I created. I know how to pass function through props using the navigator however I don't know when it comes to state. Here are some parts of code This is the logic of authentification part

newJWT(jwt){
    this.setState({
      jwt:jwt
    });
  }

  render(){
    if(this.state.isLoading){
      return(
        <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
          <Loading size={'large'} />
        </View>
      );
    }
      else if(!this.state.jwt){
      return(
        <Auth newJWT={this.newJWT}
        />
      )
    }
    else if (this.state.jwt){
      return(
        <Navigator

          deleteJWT={this.deleteJWT}
        />
      )
    }

  }
}
const TabNavigator = createBottomTabNavigator(
    {
    Home: {screen : HomeScreen,
    navigationOptions :{

        tabBarIcon : ({tintColor}) => (
            <Icon
                name='star'
                type='material'
                size={22}
                color={tintColor}
            />
        )

        }
    },
    Profile: {screen : ProfileScreen,
            navigationOptions :{
            tabBarIcon : ({tintColor}) => (
                <Icon
                    name='pencil-outline'
                    type='material-community'
                    size={22}
                    color={tintColor}
                />
            )
        }
    }
    },

    }


);
const Nav = createAppContainer(TabNavigator)

export default class Navigator extends React.Component{
    render(){
        return <Nav

            screenProps={{deleteJWT : this.props.deleteJWT}}
            />
    }
}

Here I am I tried to pass it as a props but it does not work... I don't really know what to do here. I know that if I pass it through a direct component such as my homescreen it works but I would lose my navigator.

Thanks in advance


Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>