Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
react-navigation stack headings
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Text from 'components/Text';
import { View } from 'react-native';
import { Field, reduxForm } from 'redux-form/immutable';
import { NAV_SCREEN_OPTIONS } from 'constants';
import { FIRST_LAST_NAME } from '../../routes';
export class EmailPassword extends Component {
static navigationOptions = ({ screenProps }) => ({
...NAV_SCREEN_OPTIONS,
title: 'Create Account',
headerLeft: <Text style={{ color: '#fff' }} onPress={() => screenProps.parentNav.goBack(screenProps.parentNav.state.key)}>&larr;</Text>
});
render() {
return (
<View>
{/*...*/}
</View>
);
}
}
export default EmailPassword;
import React, { Component } from 'react';
import SignupRoutes from './routes';
export class Signup extends Component {
static navigationOptions = () => ({
header: null
});
render() {
return (
<SignupRoutes parentNav={this.props.navigation} />
);
}
}
export default Signup;
import React from 'react';
import { View, Text } from 'react-native';
import { StackNavigator } from 'react-navigation';
import EmailPassword from './containers/EmailPassword';
import FirstLastName from './containers/FirstLastName';
export const EMAIL_PASSWORD = 'EMAIL_PASSWORD';
export const FIRST_LAST_NAME = 'FIRST_LAST_NAME';
const SignupNav = StackNavigator({
EMAIL_PASSWORD: { screen: EmailPassword },
FIRST_LAST_NAME: { screen: FirstLastName }
}, {
initialRouteName: EMAIL_PASSWORD
});
class Signup extends React.Component {
static navigationOptions = {
title: 'Signup Screen'
}
render() {
return (
<View style={{ flex: 1 }}>
<SignupNav screenProps={{ parentNav: this.props.parentNav }} />
</View>
);
}
}
export default Signup;
import { StackNavigator } from 'react-navigation';
import LaunchScreen from 'containers/LaunchScreen';
import Login from 'containers/Login';
import Signup from 'containers/Signup';
import { LAUNCH_SCREEN } from 'screens';
const PrimaryNav = StackNavigator({
LAUNCH_SCREEN: { screen: LaunchScreen },
LOGIN: { screen: Login },
SIGNUP: { screen: Signup }
}, {
initialRouteName: LAUNCH_SCREEN
});
export default PrimaryNav;
@lucas1richard

This comment has been minimized.

Copy link
Owner Author

@lucas1richard lucas1richard commented Nov 10, 2017

App/routes.js contains the primary application navigation used from the beginning
App/containers/Signup/routes.jsx navigation is to be nested within the primary navigation

Put the nested navigation within a screen accessible to the primary navigation, and set header: null. Pass the primary navigation object down as screenProps and use it in the initialRouteName of the nested navigation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.