ReactNative/Redux: conditional component based on the value derived in componentWillReceiveProps - react-native

Question

On pressing 'Add' button in the Scene, navigation bar should be set to hidden and the component in 'renderAddCategory' need to be set to visible.
When Add button is pressed, Actions.refresh({hideNavbar:true}) will set the navigation bar to hidden. This inturn calls componentWillReceiveProps, where the flag showAddCategory is set. Based on the value set in 'showAddCategory' flag, the component in 'renderAddCategory' need to show/hide the component.
Kindly assist what should i need to replace in "<<< showAddCategory >>>>>" to achieve the requirement.
<Scene key="CategoryContainer" component={CategoryContainer} title="Category" initial
rightTitle="Add" onRight={() => Actions.refresh({hideNavBar: true})}/>
Component:
componentWillReceiveProps(nextProps){
if(nextProps.hasOwnProperty('hideNavBar') && nextProps.hideNavBar){
if(!nextProps.showAddCategory){
nextProps.onCategoryAddMenu();
console.log(nextProps.showAddCategory); // returns new value: true
console.log(this.props.showAddCategory); // returns old value: false
}
}
}
render() {
return (
<View style={styles.container}>
{this.renderAddCategory()}
</View>
);}
renderAddCategory(){
if(<<< showAddCategory >>>>>){
return (
<View>
<TextInput/>
<TouchableHighlight>
<Text>Add</Text>
</TouchableHighlight>
</View>
);
}
}
const mapStateToProps = (state) => {
return {
showAddCategory: state.categoryReducer.showAddCategory,
};
}
Action:
export function categoryAddMenu(){
return {
type: "CATEGORY_ADD_MENU",
};
}
Reducer:
const initialState = {
showAddCategory:false,
}
export default function categoryReducer (state = initialState, action) {
case "CATEGORY_ADD_MENU":
return Object.assign({}, state, {
showAddCategory: true
});
}

Answer 1

I am not sure if what your are doing is the right approach. But I think your issue can be solved using the local state. Do you really need to use redux for storing showAddCategory?
componentWillReceiveProps(nextProps){
if(nextProps.hasOwnProperty('hideNavBar')){
this.setState({ showAddCategory: nextProps.hideNavBar });
}
}
then you should be able to replace <<< showAddCategory >>>>> with this.state.showAddCategory
renderAddCategory(){
if(this.state.showAddCategory) {
return (
<View>
<TextInput/>
<TouchableHighlight>
<Text>Add</Text>
</TouchableHighlight>
</View>
);
}
}
You might also need to bind parent "this" to renderAddCategory function in your constructor.
constructor(props) {
super(props);
this._renderPage = this._renderPage.bind(this);
}