react-navigation

Perviously when I wanted to make some actions when screen is opened I put them inside componentDidMount. For example I can fetch some data. like this. componentDidMount() { this.updateData(); } But with react-navigation componentDidMount occurs only one time when user open screen first time, and if later user open this page again it will not trigger componentDidMount. What is proper way to detect when page(screen) is activated and do actions? With react-navigation , you can do that. Add listeners in componentDidMount or componentWillMount this.subs = [ this.props.navigation.addListener(

How do you handle cases when you have, say, a form component, and you need to submit a part of the component's state using button in navigation bar? const navBtn = (iconName, onPress) => ( <TouchableOpacity onPress={onPress} style={styles.iconWrapper} > <Icon name={iconName} size={cs.iconSize} style={styles.icon} /> </TouchableOpacity> ) class ComponentName extends Component { static navigationOptions = { header: (props) => ({ tintColor: 'white', style: { backgroundColor: cs.primaryColor }, left: navBtn('clear', () => props.goBack()), right: navBtn('done', () => this.submitForm()), // error:

I'm using react navigation in a react native project and I want to customize the header with an image. For a color I can use simple styling, but since react native doesn't support background images I need a different solution. Update: Since v2 of the library there's an special option for setting the header background, namely headerBackground . This option accepts a React component, so when set to an Image component, it will use that. For example: export default createStackNavigator({ Home: { screen: HomeScreen }, }, { navigationOptions: { headerBackground: ( <Image style={StyleSheet

I am using React-Navigation in my app and the app consists of StackNavigator with multiple screens, some screens of which have TextInput with autoFocus={true} Problem: on these screens when the component renders, the height of the screen is being set in the constructor: constructor(props) { super(props); this.state = { height: Dimensions.get('window').height, }; } But, since the autoFocus of TextInput is true , the keyboard on this screen pops-up on the screen almost instantly after the render , causing the component to re-render due to the eventListener that is added to Keyboard in

I'm using react native navigation (react-navigation) StackNavigator. it starts from the Login page throughout the whole lifecycle of the app. I don't want to have a back option, returning to the Login screen. Does anyone know how it can be hidden on the screen after the login screen? BTW, I'm also hiding it in the login screen by using: const MainStack = StackNavigator({ Login: { screen: Login, navigationOptions: { title: "Login", header: { visible: false, }, }, }, // ... other screens here }) For react-navigation version v2 or newer to make the back button disappear: navigationOptions: {

Hi i want to create a component by using a createDrawerNavigator , and want to add it all screens could you help me. In the below example don't copy all the syntax understand the concept from my explanation I have configured redux and many other imports you may not need so configure and include content in below files as you need. File name - BurgerMenu.js import React, { Component } from "react"; import SideBar from "./SideBar.js"; import News from "../../Containers/News"; // import your screens instead import Copyright from '../../Containers/Gallery' // import your screens instead import {