How to put this.props data into headerRight selector? - react-native

Question

I use react-redux to get my FlatList data and custom my header with react-navigation.
I want to add a selector in headerRight, my problem is I have no idea how to add the data into my headerRight.
Here is my header setting.
const data = [
{ key: 0, section: true, label: 'Title' },
{ key: 1, label: 'Red Apples' },
{ key: 2, label: 'Cherries' },
{ key: 3, label: 'Cranberries', accessibilityLabel: 'Tap here for cranberries' },
{ key: 4, label: 'Vegetable', customKey: 'Not a fruit' }
];
class MovieTimeList extends Component {
static navigationOptions = ({ navigation }) => ({
title: `${navigation.state.params.theaterCn}`,
headerStyle: {
backgroundColor: '#81A3A7',
elevation: null,
},
headerTitleStyle: {
fontWeight: '300',
fontFamily: 'FFF Tusj',
fontSize: 18
},
headerRight:
<ModalSelector
data={data}
initValue="Title"
onChange={(option)=>{ alert(`${option.label} (${option.key}) nom nom nom`) }}
/>,
});
Here is my react-redux mapStateToProps function that action is call an API to get the data:
const mapStateToProps = (state) => {
const timeList = state.listType.timeList;
return { timeList };
};
I can show the movieData in FlatList from react-redux:
render() {
const movieData = this.props.timeList;
return (
<View style={{ flex: 1 }}>
<FlatList
data={movieData}
renderItem={this.renderRow}
horizontal={false}
keyExtractor={(item, index) => index.toString()}
/>
</View>
);
}
I have no idea how to let the const movieData into my headerRight selector.
Any help would be appreciated. Thanks in advance.

Answer 1

You can set param and then use it in your header like this
componentWillReceiveProps(nextProp){
if(!isFetching && listNotUpdated){
this.props.navigation.setParams({ movieList: nextProp.timeList})
}
}
then get it in the header like this
static navigationOptions = ({ navigation }) => {
const { state } = navigation
const { movieList }= navigation.state.params
return {
title: 'Your Title',
headerRight: (
<Button
title={'Button1'}
onPress={() => {
// do something
}}
/>
),
}
}

Answer 2

I am not sure if this code is 100% correct, basically, you can do it by connecting ur reducer to your MovieTimeList class pass necessary prop to your component
class MovieTimeList extends Component {
static navigationOptions = ({ navigation }) => ({
title: `${navigation.state.params.theaterCn}`,
headerStyle: {
backgroundColor: '#81A3A7',
elevation: null,
},
headerTitleStyle: {
fontWeight: '300',
fontFamily: 'FFF Tusj',
fontSize: 18
},
headerRight:
<ModalSelector
data={data}
initValue={this.props.HeaderTitle}
onChange={(option)=>{ alert(`${option.label} (${option.key}) nom nom nom`) }}
/>,
});
const mapStateToProps = (state) => {
let HeaderTitle = state.yourreducer.headerTitle
return HeaderTitle
}
export default connect(mapStateToProps,null)(MovieTimeList)