Delay in keyboard dismiss react-native

Question

I am building a react native app and I am fairly new to this. I am using React navigation for moving from one page to another. Currently, I am using stack navigator.

I have two screens, A and B. In screen B I have a search input that uses the keyboard. When the back button in the header is pressed whilst the keyboard is open I navigate to screen A but there is a significant delay before the keyboard dismisses. I have put Keyboard.dismiss(); in componentWillUnmount in Screen B and componentWillMount in screen A. Unsure as to how or wether or not it's possible to add an onClick event to the back button as I believe it's 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();
  }

Any one had this issue before?

Answer 1

While defining the StackNavigator try to pass in this option:

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

StackNavigator(RouteConfigs, StackNavigatorConfig)

Answer 2

You can just add

onTransitionStart: () => Keyboard.dismiss(),

at your stacknavigator definition and don't need to modify each backbutton.

For example:

const mainScreen = createStackNavigator(
  {
    MainScreen: {
      screen: MainScreen,
    }
  },
  {
    onTransitionStart: () => Keyboard.dismiss(),
    initialRouteName: 'MainScreen'
  }
);