Actions Through Navigators To/From App.js


I’m still a bit of a learner so I apologize if I don’t have the correct descriptors for my question.

So I’m trying a variety of ways to interact with authentication and web api, and I came across another tutorial ( and successfully created the app with the tutorial the way it was.

However, I was trying to work it together with a focus on navigation, rather than just on screens and came across something I’m not quite sure of.

In the App.js there is a function, as well as related states in the constructor:

    this.state = {
      isLoadingComplete: false,
      isAuthenticationReady: false,
      isAuthenticated: false,
      jwt: '',

    this.newJWT = this.newJWT.bind(this);
    this.deleteJWT = deviceStorage.deleteJWT.bind(this);
    this.loadJWT = deviceStorage.loadJWT.bind(this);

      jwt: jwt

And later on in the render a little lower, I pass it similar to how the tutorial does it:

         <RootNavigation newJWT={this.newJWT}/>

Going to the RootNavigation file it has both a createBottomTabNavigator and a createStackNavigator as below:

const LoginStack = createStackNavigator({
  Login: {
    screen: LoginScreen,
    navigationOptions: () => ({
      title: 'Login',
      headerTintColor: '#ffffff',
        headerStyle: {
            backgroundColor: '#171F33',
            borderBottomColor: 'black',
            borderBottomWidth: 0,
        headerTitleStyle: {
            fontSize: 18,

LoginStack.navigationOptions = {
  tabBarLabel: 'Login',
  tabBarIcon: ({ focused }) => (
        Platform.OS === 'ios'
          ? `ios-home${focused ? '' : ''}`
          : 'md-home'

const RootStackNavigator = createBottomTabNavigator({
}, {
    tabBarOptions: {
        showLabel: true,
        activeTintColor: '#F8F8F8',
        inactiveTintColor: '#586589',
        style: {
            backgroundColor: '#171F33'
        tabStyle: {}

It is here that I am stuck, because I am not sure about the transition point. In the tutorial, they didn’t use navigation through stacks, and given that I don’t see many (if any) one page apps where there are no transition points, I felt as if it wasn’t complete tutorial on my part.

So if we go to the LoginScreen, this is the tripped up part, which is a function:

  loginUser() {
    const { email, password, password_confirmation } = this.state;

    this.setState({ error: '', loading: true });

    const data = {
            grant_type: 'password',
            client_id: 2,
            client_secret: apiConfig.clientId,
            username: email,
            password: password,
            scope: '*',
        }, data)
    .then((response) => {
    .catch((error) => {

The above axios does in fact work, the only part that doesn’t is this line:

Which returns an error in my console:
_this2.props.newJWT is not a function. (In '_this2.props.newJWT(', '_this2.props.newJWT' is undefined)

The original repo is here: but I am working on a snack to allow the full view of my code. If there are any further questions, please feel free to ask, I’d really appreciate anything.

The snack is now located here:

closed #2

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.