CODEWITHSUNDEEP
javascriptnode.jsreact-native
Alp4ga
Alp4ga

Reputation: 125

KeyboardAvoidingView "Padding" not working properly

I got a problem with KeyboardAvoidingView I have 3 TextInput and when I want to write something on the last one this one is steal hidden by my keyboard.

export default class App extends React.Component {
  render() {
    return (
      <LinearGradient colors={['#72afd3', '#37ecba']} style={styles.container}>
        <KeyboardAvoidingView behavior='padding' enabled>
          <TextInput placeholder='Hello World'/>
          <View style={{height: 200}}/>
          <TextInput placeholder='Hello World'/>
          <View style={{height: 200}}/>
          <TextInput placeholder='Hello World'/>
        </KeyboardAvoidingView>
      </LinearGradient>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
})

Upvotes: 1

Views: 15815

Answers (4)

Yossi
Yossi

Reputation: 6027

I am using react-native-keyboard-aware-scroll-view.

This will probably work:

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

<KeyboardAwareScrollView enableOnAndroid extraScrollHeight={pixels[50]}>
   <LinearGradient colors={['#72afd3', '#37ecba']} style={styles.container}>
          <TextInput placeholder='Hello World'/>
          <View style={{height: 200}}/>
          <TextInput placeholder='Hello World'/>
          <View style={{height: 200}}/>
          <TextInput placeholder='Hello World'/>
    </LinearGradient>
</KeyboardAwareScrollView>

Upvotes: 3

displayname
displayname

Reputation: 1074

Use keyboardVerticalOffset so that the textInput won't be hidden behind the keyboard

<KeyboardAvoidingView
   style={{ flex: 1 }}
   behavior={(Platform.OS === 'ios') ? "padding" : null} enabled
   keyboardVerticalOffset={Platform.select({ios: 80, android: 500})}>

And to anyone who is having trouble with a position:'absolute' View keep being pushed by the keyboard, put the View inside KeyboardAvoidingView

    <KeyboardAvoidingView
       style={{ flex: 1 }}
       behavior={(Platform.OS === 'ios') ? "padding" : null} enabled>

      //content here


     <Button  title="Login" style={{position:'absolute', bottom:20}}/>

   </KeyboardAvoidingView>

Upvotes: 6

eemmrrkk
eemmrrkk

Reputation: 1700

I used @Emma's answer but fixed offsets with keyboardVerticalOffset. I used below one.

<KeyboardAvoidingView
        style={styles.keyboardAvoidContainer}
        enabled
        behavior={"padding"} // you can change that by using Platform
        keyboardVerticalOffset={Platform.select({ ios: 60, android: 78 })}
      >

I give 60 to VerticalOffset of ios and tested because fully fitted to several of simulators which is contains iPhone X, iPhone 8 and iPhone 6. Then in Android Nexus Emulator, it's fitted with value of 78.

Upvotes: 1

Sean Wang
Sean Wang

Reputation: 780

Usually, on Android, your desired result will be better with no behavior prop given. Whereas on iOS padding may be the right answer. See note on https://facebook.github.io/react-native/docs/keyboardavoidingview#behavior

I usually write something like this:

<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined}>
    // ...
</KeyboardAvoidingView>

Upvotes: 1

Related Questions