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)}>←</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; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
App/routes.js
contains the primary application navigation used from the beginningApp/containers/Signup/routes.jsx
navigation is to be nested within the primary navigationPut the nested navigation within a screen accessible to the primary navigation, and set
header: null
. Pass the primary navigation object down asscreenProps
and use it in theinitialRouteName
of the nested navigation