Actions Through Navigators To/From App.js

Expo SDK
1

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 (https://medium.com/@njwest/building-a-react-native-jwt-client-api-requests-and-asyncstorage-d1a20ab60cf4) 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:

  constructor(props){
    super(props);
    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);
}

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

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

 return(
         <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 }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-home${focused ? '' : ''}`
          : 'md-home'
      }
    />
  ),
};



const RootStackNavigator = createBottomTabNavigator({
  LoginStack,
}, {
    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: '*',
        }

  axios.post(apiConfig.oauthURL, data)
    .then((response) => {
      deviceStorage.saveKey("id_token", response.data.access_token);
      this.props.newJWT(response.data.access_token);       
    })
    .catch((error) => {
      console.log(error);
      this.onLoginFail();
    });
}

The above axios does in fact work, the only part that doesn’t is this line:
this.props.newJWT(response.data.access_token);

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

The original repo is here: https://github.com/njwest/React-Native-JWT-Client 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: rude peach - Snack

2

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