After Saving Word Doc It Pops Back Up Again

by Spencer Carli

How to make your React Native app respond gracefully when the keyboard pops up

When you lot're working with React Native apps, a common problem is that the keyboard will pop up and hide text inputs when y'all focus on them. Something similar this:

There are a few ways you lot can avoid this. Some are elementary, some less so. Some can be customized, others can't. Today I'll prove you three different ways you can avoid the keyboard in React Native.

I've put all the source code for this tutorial on Github.

KeyboardAvoidingView

The most simple solution, and the easiest to install, is KeyboardAvoidingView. It's a core component just it's besides pretty simple in what information technology does.

You can take the base lawmaking, which has the keyboard roofing the inputs, and update that so that the inputs are no longer covered. The first matter you have to do is replace the container View with the KeyboardAvoidingView and then add a behavior prop to it. If you look at the documentation you lot'll see that it accepts iii dissimilar values — acme, padding, position. I've plant that padding works in the most predictable manner. So that is what I'll use.

                  import React from 'react'; import { View, TextInput, Epitome, KeyboardAvoidingView } from 'react-native'; import styles from './styles'; import logo from './logo.png';  const Demo = () => {   render (     <KeyboardAvoidingView       style={styles.container}       behavior="padding"     >       <Prototype source={logo} style={styles.logo} />       <TextInput         placeholder="Email"         style={styles.input}       />       <TextInput         placeholder="Username"         way={styles.input}       />       <TextInput         placeholder="Password"         style={styles.input}       />       <TextInput         placeholder="Confirm Password"         mode={styles.input}       />       <View way={{ height: 60 }} />     </KeyboardAvoidingView>   ); };  export default Demo;                

KeyboardAvoidingView.js

This gives united states of america the following result. It's not perfect simply for barely any work, it's quite good.

One matter to note is that on line xxx you'll come across a View that has a height set to 60px. I found that the keyboard avoiding view doesn't quite work with the last element, and setting padding/margin didn't piece of work. So I added a new element to "bump" everything upwards a few pixels.

The epitome at the superlative gets pushed out of the view when using this simple implementation. I'll evidence you lot how you can ready that at the end.

Android users: I've found this to exist the best/only option. By adding android:windowSoftInputMode="adjustResize" to your AndroidManifest.xml the operating system will have care of most of the work for you and the KeyboardAvoidingView will take care of the balance. Case AndroidManifest.xml. The remainder of this commodity likely won't utilise to y'all.

Keyboard Enlightened ScrollView

The next option is the react-native-keyboard-aware-gyre-view which gives you a lot of bang for your buck. Behind the scenes it's using a ScrollView or ListView to handle everything (depending on the component you choose), which makes the scrolling interaction pretty seamless. The other major do good to this package is that information technology will ringlet to the input that is in focus, which gives the user a squeamish experience.

Usage is also very easy — you just need to swap out the container View, once again starting with the base code, and gear up a few options. Here's the code, then I'll describe it.

                  import React from 'react'; import { View, TextInput, Prototype } from 'react-native'; import { KeyboardAwareScrollView } from 'react-native-keyboard-enlightened-scroll-view' import styles from './styles'; import logo from './logo.png';  const Demo = () => {   render (     <KeyboardAwareScrollView       style={{ backgroundColor: '#4c69a5' }}       resetScrollToCoords={{ x: 0, y: 0 }}       contentContainerStyle={styles.container}       scrollEnabled={simulated}     >         <Image source={logo} style={styles.logo} />         <TextInput           placeholder="Email"           style={styles.input}         />         <TextInput           placeholder="Username"           mode={styles.input}         />         <TextInput           placeholder="Password"           manner={styles.input}         />         <TextInput           placeholder="Ostend Password"           manner={styles.input}         />     </KeyboardAwareScrollView>   ); };  export default Demo;                

KeyboardAwareScrollView.js

First off y'all desire to set the backgroundColor of the ScrollView that style (if you were to re-enable scrolling) the backgroundColor is always the same. Next you want to tell the component where the default position is and so that, once the keyboard is airtight, information technology goes back to that spot — by omitting this prop the view could get stuck at the height after endmost the keyboard, like this.

After the resetScrollToCoords prop yous set the contentContainerStyle — this essentially replaces the containing View styles you lot had before. The final thing I'g doing is disabling the scrollview from user interaction. This may not e'er make sense for your UI (such as an interface where a user is editing many profile fields) just for this one information technology does, it doesn't make much sense to allow the user to manually curl considering there is nada to roll to.

Combining these props together yous go the following outcome, which works quite well.

Keyboard Module

This is by far the most manual selection but also gives you the nigh command. You lot'll be using the Animated library to aid give smooth interactions similar you saw before.

The Keyboard module, which isn't documented on the React Native site, allows you lot to listen keyboard events emitted from the device. The events you lot'll use are keyboardWillShow and keyboardWillHide, which return the length of fourth dimension the animation will take and the catastrophe position of the keyboard (among other information).

If you lot're on Android you'll desire to utilise keyboardDidShow and keyboardDidHide instead.

When the keyboardWillShow event is emitted you'll set an animated variable to the last peak of the keyboard and accept it animate for the aforementioned duration as the keyboard sliding animation. You lot so use this animated value to set padding on the bottom of the container to bump all of the content up.

I'll show lawmaking in a moment, just doing what I described above leaves us with this experience.

I want to fix that image this fourth dimension. To do so you'll utilise an blithe value to manage the acme of the prototype, which y'all'll arrange when the keyboard is opened. Here'due south the code.

                  import React, { Component } from 'react'; import { View, TextInput, Image, Blithe, Keyboard } from 'react-native'; import styles, { IMAGE_HEIGHT, IMAGE_HEIGHT_SMALL} from './styles'; import logo from './logo.png';  class Demo extends Component {   constructor(props) {     super(props);      this.keyboardHeight = new Animated.Value(0);     this.imageHeight = new Animated.Value(IMAGE_HEIGHT);   }    componentWillMount () {     this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);     this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);   }    componentWillUnmount() {     this.keyboardWillShowSub.remove();     this.keyboardWillHideSub.remove();   }    keyboardWillShow = (consequence) => {     Animated.parallel([       Animated.timing(this.keyboardHeight, {         duration: event.duration,         toValue: event.endCoordinates.height,       }),       Animated.timing(this.imageHeight, {         duration: result.elapsing,         toValue: IMAGE_HEIGHT_SMALL,       }),     ]).first();   };    keyboardWillHide = (outcome) => {     Blithe.parallel([       Animated.timing(this.keyboardHeight, {         duration: consequence.elapsing,         toValue: 0,       }),       Animated.timing(this.imageHeight, {         duration: upshot.duration,         toValue: IMAGE_HEIGHT,       }),     ]).kickoff();   };    return() {     return (       <Animated.View way={[styles.container, { paddingBottom: this.keyboardHeight }]}>         <Animated.Prototype source={logo} style={[styles.logo, { height: this.imageHeight }]} />         <TextInput           placeholder="Electronic mail"           fashion={styles.input}         />         <TextInput           placeholder="Username"           style={styles.input}         />         <TextInput           placeholder="Password"           style={styles.input}         />         <TextInput           placeholder="Confirm Password"           style={styles.input}         />       </Animated.View>     );   } };  export default Demo;                

KeyboardModule.js

At that place's certainly a lot more to it than any of the other solutions. Rather than a normal View or Paradigm yous're using an Animated.View and Animated.Prototype so that the animated values can be leveraged. The fun part is really in the keyboardWillShow and keyboardWillHide functions where the animated values are changing.

What'southward happening at that place is that 2 animated values are changing in parallel which are then being used to drive the UI. That leaves you with this.

It's a fair amount more code but it'southward pretty slick. You lot have a lot of options for what you can do and can really customize the interaction to your hearts content.

Combining Options

If you want to save some code you can combine a few options, which is what I tend to do. For example by combining pick 1 and three you merely have to worry near managing and animating the height of the image.

The lawmaking isn't much less than the source of option three but as a UI grows in complexity it can help you out a bit.

                  import React, { Component } from 'react'; import { View, TextInput, Prototype, Animated, Keyboard, KeyboardAvoidingView } from 'react-native'; import styles, { IMAGE_HEIGHT, IMAGE_HEIGHT_SMALL } from './styles'; import logo from './logo.png';  class Demo extends Component {   constructor(props) {     super(props);      this.imageHeight = new Blithe.Value(IMAGE_HEIGHT);   }    componentWillMount () {     this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);     this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);   }    componentWillUnmount() {     this.keyboardWillShowSub.remove();     this.keyboardWillHideSub.remove();   }    keyboardWillShow = (consequence) => {     Animated.timing(this.imageHeight, {       duration: event.duration,       toValue: IMAGE_HEIGHT_SMALL,     }).start();   };    keyboardWillHide = (event) => {     Blithe.timing(this.imageHeight, {       duration: event.duration,       toValue: IMAGE_HEIGHT,     }).beginning();   };    render() {     return (       <KeyboardAvoidingView         style={styles.container}         behavior="padding"       >           <Blithe.Paradigm source={logo} style={[styles.logo, { tiptop: this.imageHeight }]} />           <TextInput             placeholder="Email"             style={styles.input}           />           <TextInput             placeholder="Username"             fashion={styles.input}           />           <TextInput             placeholder="Password"             style={styles.input}           />           <TextInput             placeholder="Confirm Password"             style={styles.input}           />       </KeyboardAvoidingView>     );   } };  consign default Demo;                

Combo.js

Each implementation has its pros and cons — you'll take to cull the most advisable 1 given the user experience you're aiming for.

Are you interested in learning more virtually using React Native to build high quality mobile apps? Sign up for my gratuitous React Native class!

---

Learn to code for complimentary. freeCodeCamp'due south open source curriculum has helped more than 40,000 people become jobs as developers. Go started

cassellanied1976.blogspot.com

Source: https://www.freecodecamp.org/news/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580/

Share this post