React native header button event inside datepicker - react-native

Question

I have tried to bind the event inside header of datepicker. But its not working.
and the another problem is could n't access the function inside of header part.
Here is my code:
static navigationOptions = ({ navigation }) => {
const { state } = navigation;
var isNavigate = true;
var searchStartDate = "";
return {
title: "Tracking" ,
headerRight: (
<View style={[styles.right, { flexDirection: 'row' }]}>
<DatePicker
cancelBtnText='Cancel'
confirmBtnText='Done'
hideText='true'
mode="date"
customStyles={{
dateIcon: {
position: 'absolute',
right: 0,
top: 4,
marginBottom: 5,
marginLeft: 0,
flex: 1
},
}}
onDateChange={() => params.Tracking()} />
</View>
)
}
};
Tracking() {
}
constructor(props) {
super(props);
this.state = {
loading: false,
showCalendar: false
}
}

Answer 1

Try to add simple component in headerRight, if it works then you can add DatePicker or any other component. consider following example:
class Home extends Component {
static navigationOptions = ({ navigation }) => ({
title: 'Title',
headerRight: (
<Button
title='Button'
onPress={Home.instance.onButtonPress}
/>
)
});
constructor(props) {
super(props);
Home.instance = this;
}
onButtonPress = () => {
alert('I am pressed')
}
}