Get #Amazon #Prime for this #holiday #amazonprime #christmas #2019

on

#ReactNative Keyboard vs Map flicker

on
ReactNative Keyboard
ReactNative Keyboard

How to prevent Map view flicker transitioning from keyboard hide?
I noticed that going from a view that has a TextInput to a Map view would cause screen to flicker when the keyboard was hiding. To prevent this, you can make sure that soft keyboard is dismissed before the app navigates to a Map view.

Check out Keyboard document.


import { Keyboard } from 'react-native'

class Form extends Component {
  componentWillMount() {
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
  }

  componentWillUnmount() {
    this.keyboardDidHideListener.remove();
  }

  _keyboardDidHide() {
    // navigate to Map View
  }
  
  _dismissKeyboard() {
    Keyboard.dismiss()
  }

  render() {
    return(
      <View>
        <TextInput/>
      </View>
    )
  }
}

We can probably prevent the flicker via Animations too. I will give it a try next time.

Thank you for reading!

Jun