React Native searchbar with react-navigation

I would like to add a searchbar in my header. I am using react-navigation, and want to create an effect like in the below 2 pictures. When you press the search icon, the hamburger icon becomes a arrow-back icon, the header title becomes a search field. I have tried to accomplish this with the navigationOptions but the problem is that it is static and it cannot be updated when an action happens on the header itself. So for experimenting what I want to accomplish is that when the search icon is pressed, the hamburger icon becomes a arrow-back icon. Thank you!

var search = false;const menuButton = navData => (<HeaderButtons HeaderButtonComponent={HeaderButton}><Item             title="Menu"            iconName="ios-menu"            onPress={() => {                navData.navigation.toggleDrawer();            }}        /></HeaderButtons>);const goBackButton = navData => (<HeaderButtons HeaderButtonComponent={HeaderButton}><Item             title="Menu"            iconName="ios-arrow-back"            onPress={() => {                search=false            }}        /></HeaderButtons>);MyScreen.navigationOptions = navData => {    return {        headerTitle: 'My title',        headerLeft: search ? goBackButton : menuButton(navData),        headerRight: (<BorderlessButton            onPress={() => search=true}            style={{ marginRight: 15 }}><Ionicons                name="md-search"                size={Platform.OS === 'ios' ? 22 : 25}            /></BorderlessButton>        )    }};