How to change right component or title of header depending on component state or props? about react-navigation

[kennydee]

Edit :
This seems a much better solution

I think using a React Component for "right" is better :)

right: could be a react component, which will handle himself his own props :)

For exemple my UserLogOutButtonComponent :

import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import {
  Button,
  Icon,
} from 'native-base';

import { userLogOut } from '../loginActions';

export const UserLogOutButtonComponent = (props) => {
  const {
    actions,
  } = props;
  return (
    <Button transparent onPress={actions.userLogOut}>
      <Icon name="ios-power" />
    </Button>
  );
};

UserLogOutButtonComponent.propTypes = {
  actions: PropTypes.shape({
    userLogOut: PropTypes.func,
  }).isRequired,
};

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators({ userLogOut }, dispatch) };
}

export default connect(
  null,
  mapDispatchToProps,
)(UserLogOutButtonComponent);

And in my navigationOptions :

CurrentScreen.navigationOptions = {
  title: 'Welcome',
  header: {
    right: (<UserLogOutButton />),
  },
};

[artembloom]

I found only this solution.
It works for my case, but I'm not sure this is correct for the others

componentWillUpdate(nextProps) {
  if (this.props !== nextProps) {
    if (nextProps.someProp) {
      const right = (
        <Button
          onPress={() => nextProps.navigation.navigate('SomeScreen')}
          title="SomeScreen"
        />
      )
      nextProps.navigation.setParams({ right })
    }
  }
}

CurrentScreen.navigationOptions = {
  title: 'CurrentScreen',
  header: ({ state }) => {
    if (state.params) {
      return { right: state.params.right }
    }
    return null
  }
}

[temafedorov]

+1

[artembloom]

Answer #147

[housseindjirdeh]

@chimon2000 that is correct. You can run the tests using webpagetest.org/easy for both Faster 3G and EM settings with the Lighthouse Audit checked. Once you're test completes, you can click the Lighthouse score to navigate to its associated report with which First Interactive is the time that we use for all of the implementations on the site.

[b-asaf]

#2638 My Question and Solution for: react component inside non-react component for header button

[moahmed123]

headerLeft: <Icon name='arrow-left' type='SimpleLineIcons' style={{color: '#16a085', fontSize: 18,paddingLift: 10}}/>