ข้ามไปยังเนื้อหาหลัก

How to handle all Keyboard problems in React-Native with only 5 lines of code

· อ่าน 1 นาที
Kobkrit Viriyayudhakorn
Kobkrit Viriyayudhakorn
CEO, iApp Technology

Easiest way to shift up the screen when keyboard is shown up and hide it when touch other parts.​

6

Can not type password here T_T

Shift up the screen when the keyboard is shown up.​

  1. Use the KeyboardSpacer, $ npm install react-native-keyboard-spacer
  2. Adding the followings into your React component,
**import KeyboardSpacer from 'react-native-keyboard-spacer';** class LoginScreen extends React.Component {  
...render() {  
 ...  
 return (  
        <View style={Styles.container}>  
           <View style={Styles.yourOldContainerView}>  
           </View>  
           **< KeyboardSpacer />**  
        </View>  
 );  
}

Done.

Dismiss the keyboard when user touch somewhere else.​

  1. Use DismissKeyboard, Do not need to install anything. It comes with React-Native.
**import DismissKeyboard from 'dismissKeyboard';** class LoginScreen extends React.Component {  
...render() {  
 ...  
 return (  
     **< TouchableWithoutFeedback onPress={()=>{DismissKeyboard()}}>**        <View style={Styles.container}>  
           <View style={Styles.yourOldContainerView}>  
           </View>  
           <KeyboardSpacer />  
        </View>** </TouchableWithoutFeedback>**  
 );  
}

Done.

Easy right?