CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigation
Pesti
Pesti

Reputation: 1

react native navigate with different files

As a newbie in react-native i'm trying find a way to use react-navigation with different files without a navbar to navigate (for example just click on a button in the login view to enter the main view, clicking on log out button return to login view).

With react-navigation i made a global component 'Nav' and i placed in the main AppRegistry call:

AppRegistry.registerComponent('myApp', () => Nav);

While in the Navigator.js:

export const Nav = StackNavigator({
  Login: { screen: LoginView },
  AddStream: { screen: AddStreamView },
});

When i run react-native run-android i get the first view loaded under a white space (it should be the navigator, that i don't want in my app)

Now how can i remove the Nav from the view and how can i change View onPress a button component in another file?

There is another package that fill better my desire?

Upvotes: 0

Views: 6271

Answers (1)

Michael Cheng
Michael Cheng

Reputation: 10451

From the docs, setting the the headerMode to none should do the trick. This will hide the header on all of the screens defined in that StackNavigator. Example:

const Nav = StackNavigator({
    Login: { screen: LoginView },
    AddStream: { screen: AddStreamView },
},{
    headerMode: 'none',
});

If you want to control the visibility of the header so that it appears on some of the screens but not all of them, then you can set headerMode to screen and for each individual screen set [the navigation prop for header: { visible: false }. See docs here. For example, if you are creating the screen component in another file, it might look like this:

// In the main file:
const Nav = StackNavigator({
    Login: { screen: LoginView },
    AddStream: { screen: AddStreamView },
},{
    headerMode: 'screen',
});

// Hidden for your Login screen:
export default class LoginView extends Component {
    static navigationOptions = {
        header: { visible: false }
    }
    // etc...
}

// Visible for your AddStream screen:
export default class AddStreamView extends Component {
    static navigationOptions = {
        header: { visible: true }
    }
    // etc...
}

Edit: missed the second part of your question.
For navigating to a different screen, you really should go through the Hello World tutorial as it explains it. Specifically, this section. Relevant example code from the tutorial:

render() {
    const { navigate } = this.props.navigation;
    return (
        <View>
            <Text>Hello, Chat App!</Text>
            <Button
             onPress={() => navigate('Chat')}
             title="Chat with Lucy"
            />
       </View>
    );
}

In your case, 'Chat' would be either 'Login' or 'AddStream'.

Upvotes: 1

Related Questions