Render conditionally header in react native - react-native

Question

Hi I'm trying to render the header based on a state. If the state is equals to true I'm showing an avatar image and if it's false I'm rendering a default logo. I've tried doing this based on a ternary operator but it's not working. Here is the code :
static navigationOptions = ({navigation}) => {
const { params } = navigation.state;
return {
headerTitle: () => (
<View style ={{alignItems: 'center', justifyContent: 'center',flex:1, flexDirection:'column', overflow:'visible'}}>
{this.state.Loaded == false ?
<View style ={{alignItems: 'center', justifyContent: 'center',flex:1, flexDirection:'column', overflow:'visible'}}>
<Text style={{marginBottom:15,fontSize:20,fontWeight:"900", color:'#000' }}>Pseudo</Text>
<Image
style = {styles.avatar}
source = {require('../../../Assets/avatar.jpg')} />
</View>
:
<View style={[styles.bandeauHeader, { } ]}>
<Text style={styles.textHeader}>Aide</Text>
<Image source={GlobalInclude.LogoIconRose} style={styles.logoBandeauHeader} />
</View>
}
</View>
)
};
};

Answer 1

You should consider updating the Navigation to newer version.
First the state is not available inside the static function so you will have to use the navigation params to update the header.
The code should be something like below which you can adopt in your solution.
class DetailsScreen extends React.Component {
state = {
flag: true,
};
static navigationOptions = ({ navigation }) => {
return {
headerTitle: navigation.getParam('flag') ? (
<Text>12323231321</Text>
) : (
<Text>67676777</Text>
),
};
};
render() {
const { navigation } = this.props;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Button
title="Update the title"
onPress={() =>
this.setState({ flag: !this.state.flag }, () =>
this.props.navigation.setParams({ flag: this.state.flag })
)
}
/>
</View>
);
}
}