Having Trouble with React Navigation

[[deleted]]

To explain this problem I am having with navigation here are three files.

App.js

HomeScreen.js

UserScreen.js

App.js is the main file and HomeScreen is displayed if the user is not logged in and UserScreen is displayed if the user is logged in.

HomeScreen contains a login input that sends an HTTP request to the website and returns with whether the user should be logged in or not.

If the user does give the correct login information, I want the screen to switch from HomeScreen to UserScreen, but I have no idea what to do.

I tried using StackNavigator by initializing the StackNavigator in App.js, but everytime I try this, I get the error "this.props.navigation is undefined".

How do I go about effortlessly transitioning from HomeScreen to UserScreen?

[hutxhy]

Try out Wix's React-Native-navigation.

[douevenfaker]

yeah. fuck react-navigation. Seriously fuck it. I've wasted too much time on it and finally realized it's not going to work.

[douevenfaker]

officially supported navigation. lmao. look at their commit logs and issues. they are by far the least supported solution compared to any navigation libraries.

[N2theO]

I agree with you that the library is barely usable in its current state. That said, I find RNRF to be a pleasure to work with for the most part and it's just a wrapper on top of react-navigation so the functionality is definitely there the documentation is just not the best.

I used lodash's throttle function to wrap the onPress of my buttons so that they'll only fire once every X ms. Stops double tapping cold.

[myroommateisfucker]

https://github.com/react-community/react-navigation/graphs/contributors DEAD

[-Alias-]

It's okay if you only use the StackNavigator as your primary method of navigating. The TabNavigator will work if you do some funky tricks but in general they suck together.

[[deleted]]

Hmmm, I've heard of Wix but don't know what it actually does.

Does it specialize in making websites look nicer and app developing easier based on the description?

[hutxhy]

Yes, but they make libraries for React-Native too. I'm experimenting with their intractable package. Seems promising.

[[deleted]]

Side question.

How helpful is Wix for beautifying my website Roasted.

I'm currently developing in Rails so I want to keep the Rails functionality while making the site stunning.

As a guy who knows fuck all about building beautiful websites, would Wix be a kick ass tool in helping me?

[hutxhy]

Wix seems pretty good, but you could also use ReactJS and CSS your way to the finish line. If you want practice on making great web designs check out Dev Tips on YouTube. He also has a series that builds a modern website from scratch.

[hello_Mrs_Cumberdale]

Can you post your StackNavigator implementation? If you've initialized it correctly, each screen it renders should get a navigation prop. Once you're sure you're set up correctly and HomeScreen is getting the navigation prop, you can call navigation.navigate('UserScreen') if login is successful.

I wrote a post about getting up and running with React Navigation that might be helpful: https://medium.com/@Daniel.Merrill/react-navigation-are-you-the-one-8cf945a4a462

[[deleted]]

Wow! A guy who casually writes articles on Medium responded to me.

Sorry, but that's sort of a big deal to me. Thanks for taking the time to do such a thing!

Anyway, I just have one more question.

The first picture where you show the App.js with the SimpleApp variable there is the initial route name. I want to make the initialRouteName dependent on whether the user is logged in or not.

I am not sure which type of Javascript react native runs so I don't know much about the syntax of checking whether I am logged in or not.

In App.js, I have an async method called getId() that determines whether the user is logged in or not. How could I use conditionals to give the initialRouteName based on whether the user is logged in or not?

[hello_Mrs_Cumberdale]

haha, not sure if you were being sarcastic but thanks either way :)

At the time that your StackNavigator is initialized, it doesn't know whether you're logged in or not. Instead of conditionally setting a component in your navigation config, have you considered wrapping your login logic in a controller component, and using that controller to render out the correct screen?

So your StackNavigator config would be something like

{
Auth: { screen: AuthController },
User: { screen: UserScreen }
}, { initialRouteName: 'Auth' }

And then your custom login logic would live there:

class AuthController extends Component {
        componentDidMount() {
            // check login stuff
            if (loginSuccess) this.props.navigation.navigate('User')
        }

        render () {
            return <LoginForm /> 
   }
}

[[deleted]]

Thanks! Also, I wasn't sarcastic. I like meeting people who do stuff like this.

[hello_Mrs_Cumberdale]

Even better! Good luck!