Keyboard Delay

Question

I am creating a responsive application and I am pretty new to this. I use React navigation to go from one page to another. I am currently using a stack navigator.

I have two screens: A and B. On screen B, I have a search input that uses a keyboard. When the back button in the header is pressed while the keyboard is open, I go to screen A, but there is a significant delay before closing the keyboard. I put Keyboard.dismiss (); in the WillUnmount component on screen B and the WillMount component on screen A. I'm not sure how much or not it is possible to add the onClick event to the back button, since I think this is inside the header component.

  export default class Locations extends Component {
   static navigationOptions = {
     title: 'Search Location',
   } 

  renderHeader = () => {
    return <SearchBar onChangeText={(text) =>this.handleSearch(text)} 
      placeholder="Type Here..." lightTheme round />;
  }
  componentWillUnmount(){
    Keyboard.dismiss();
  }

Has anyone had this problem before?

Answer 1

StackNavigator :

const StackNavigatorConfig = {
  navigationOptions: {
    header: ({ goBack }) => {
      const goBackAndDismissKeyboard = (ev) => {
          Keyboard.dismiss()
          return goBack(ev)
      } 
      return { left: <Left onPress={goBackAndDismissKeyboard} />}
    },
  }
}

StackNavigator(RouteConfigs, StackNavigatorConfig)