react-native-keyboard-aware-scroll-view not working properly

Question

I am trying to use the react-native-keyboard-aware-scroll-view so the keyboard doesn't cover my inputs.

For some reason it always thinks there is a keyboard active I guess because it always compresses everything.

Attached is a picture of what is happening as well as the code. Any chance anyone has any idea whats happening here? I've been playing around with it for awhile and have had no luck. I'm running react-native v 0.33 and react-native-keyboard-aware-scroll-view v 0.2.1.

https://www.npmjs.com/package/react-native-keyboard-aware-scroll-view

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


class LoginIOS extends Component{

  constructor(props) {
    super(props);
    this.login = this.login.bind(this);
    this.renderScene = this.renderScene.bind(this);
    this.state={
      username: '',
      password: ''
    };
  }

  render() {
    return (
      <Navigator
          renderScene={this.renderScene}
          navigator={this.props.navigator}
          navigationBar={
            <Navigator.NavigationBar style={{backgroundColor: 'transparent'}}
                routeMapper={NavigationBarRouteMapper} />
          } />
    );
  }

  renderScene() {
    return (
    <KeyboardAwareScrollView>
      <View style={styles.container}>
        <Spinner visible={this.state.visible} />
        <StatusBar barStyle="light-content" hidden={true}/>
        <View style={styles.topContainer}>
          <View style={styles.bannerContainer}>
            <View style={{flexDirection: 'column', flex: 1, justifyContent: 'center', alignItems: 'center'}}>
              <Image style={styles.mark} source={require('***')} />
            </View>
          </View>
          <View style={styles.credentialContainer}>
                <View style={styles.inputContainer}>
                  <Icon style={styles.inputPassword} name="person" size={28} color="#FFCD00" />
                      <View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}>
                        <TextInput
                            style={styles.input}
                            placeholder="Username"
                            autoCorrect={false}
                            autoCapitalize="none"
                            returnKeyType="next"
                            placeholderTextColor="#e0e0e0"
                            onChangeText={(text) => this.setState({username: text})}
                            value={this.state.username}

                            >

                        </TextInput>
                      </View>
                </View>

                <View style={styles.inputContainer}>
                  <Icon style={styles.inputPassword} name="lock" size={28} color="#FFCD00" />
                      <View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}>
                        <TextInput
                            style={styles.input}
                            placeholder="Password"
                            returnKeyType="done"
                            autoCorrect={false}
                            secureTextEntry={true}
                            placeholderTextColor="#e0e0e0"
                            onChangeText={(text) => this.setState({password: text})}
                            value={this.state.password}
                            onSubmitEditing={(event)=> {
                              this.login();
                            }}
                            >
                        </TextInput>
                      </View>
                </View>
                <TouchableOpacity style={styles.forgotContainer}>
                </TouchableOpacity>
            </View>

        </View>

        <TouchableHighlight
          underlayColor="#D6AB00"
          onPress={this.login}
          style={styles.signInButtonContainer}>
          <Text style={styles.signInText}>Sign In</Text>
        </TouchableHighlight>

      </View>
    </KeyboardAwareScrollView>

    );
  }

score 20 · Answer 1 · answered Sep 11 '17 at 08:34

20

Personally solved this by using flex...

  <KeyboardAwareScrollView contentContainerStyle={{flex: 1}}>
    <View style={{flex: 1}}>

answered Sep 11 '17 at 08:34

Dan Cork

209
2
2

instead of `flex: 1` in `contentContainerStyle`, `flexGrow: 1` worked for me – Prasad Kavinda Jun 13 '23 at 09:02

score 16 · Answer 2 · answered Sep 29 '19 at 17:08

16

To make it working in android with expo I had to add a few more things, hope this will help

<KeyboardAwareScrollView extraScrollHeight={100} enableOnAndroid={true} 
   keyboardShouldPersistTaps='handled'>
       <ScrollView>
      </ScrollView>
</KeyboardAwareScrollView>

answered Sep 29 '19 at 17:08

Furquan

1,542
16
20

1

You have saved few hours from my life ) – Mher May 27 '23 at 12:33

score 6 · Accepted Answer · answered Nov 03 '16 at 20:44

I solved this problem by using another lib. Not sure why the react-native-keyboard-aware-scroll-view doesn't work but if you implement the react-native-keyboard-aware-view you shouldn't have any problems.

https://www.npmjs.com/package/react-native-keyboard-aware-view

score 4 · Answer 4 · edited Jun 21 '20 at 12:46

4

If anyone is still struggling with this issue. What worked for me was ensuring enableOnAndroid = true and setting a marginBottom inside the keyboardAwareScrollView.

<KeyboardAwareScrollView style={{width: "90%",marginBottom:150}} enableOnAndroid={true}>

edited Jun 21 '20 at 12:46

answered Jun 21 '20 at 11:40

Solly

798
3
7

Wouldn't this fail if the keyboard is not exactly 150px? – Lazerbeak12345 Aug 31 '20 at 14:34
@Lazerbeak12345 it's not the greatest solution but it worked for the app I was working on. Implementing extraScrollHeight is a better option and one suggested by the documentation I believe. Try extraScrollHeight={150} – Solly Sep 01 '20 at 15:07

score 2 · Answer 5 · answered Jul 10 '17 at 10:42

You can also use animated view as scroll view cannot have absolute views or fixed components. so listening to the keyboard event and making the adjustment would work fine.

onKeyboarDidShow(e) {
  //LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
  Animated.timing(this.relativeBottom, {
    duration: e.duration,
    toValue: Dimensions.get('window').height-em(64)-e.endCoordinates.height
  }).start()
}

onKeyboardWillHide(e) {
  //LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
  Animated.timing(this.relativeBottom, {
    duration: e.duration,
    toValue: Dimensions.get('window').height-em(64)
  }).start()
}

componentWillMount() {
    this._didShowListener = Keyboard.addListener('keyboardWillShow', this.onKeyboarDidShow.bind(this));
    this._willHideListener = Keyboard.addListener('keyboardWillHide', this.onKeyboardWillHide.bind(this));
}

componentWillUnmount() {
    this._didShowListener.remove();
    this._willHideListener.remove();
}

its a function which recalibrates height and width according to the screen size. — Adarsh Kumar, Apr 20 '18 at 12:57

score 2 · Answer 6 · answered Apr 19 '21 at 20:16

Settings that worked for me

    bounces={false}
    showsVerticalScrollIndicator={false}
    style={{marginBottom:150}}
    enableOnAndroid={true}
    scrollEnabled={true}
    extraScrollHeight={100}
    keyboardShouldPersistTaps='handled'
    scrollToOverflowEnabled={true}
    enableAutomaticScroll={true}

score 1 · Answer 7 · answered Apr 11 '19 at 15:22

1

I upgrade react-native version to 0.59.4 and the KeyboardAwareScrollView stop working as usual. Apparently this props are now mandatory:

<KeyboardAwareScrollView
scrollEnabled={true}
enableAutomaticScroll={true}>

answered Apr 11 '19 at 15:22

nrm97

77
2

Sunday David · Answer 8 · 2022-12-08T03:29:56.553

1

I was experiencing this issue on only ios but I was able to solve using

<KeyboardAwareScrollView
extrScrollHeight={-100}>
....your code
</KeyboardAwareScrollView>

Hope it helps!

edited Dec 08 '22 at 03:29

answered Dec 08 '22 at 02:51

Sunday David

105
5

score 1 · Answer 9 · answered Dec 08 '22 at 04:42

 showsVerticalScrollIndicator={false}
bounces={false}
behavior={'padding'}
keyboardShouldPersistTaps="handled"
enableOnAndroid={true}
extraHeight={150}
extraScrollHeight={20}
alwaysBounceVertical={false}
keyboardOpeningTime={Number.MAX_SAFE_INTEGER}
scrollEnabled={props.scrollEnabled}
enableAutomaticScroll={true}
contentContainerStyle={props?.style}
style={{backgroundColor: Colors.background.primary}}

score 0 · Answer 10 · edited Apr 02 '21 at 10:02

0

Give parent view height like this

height:Dimensions.get('window').height

With flex:1 it will wrap up the contents.

edited Apr 02 '21 at 10:02

Syscall

19,327
10
37
52

answered Apr 02 '21 at 09:56

Antier Solutions

1,326
7
10

score 0 · Answer 11 · answered Apr 13 '21 at 12:26

Just add the resetScrollToCoords, contentContainerStyle ( The stylesheet doesn't need to be named container ) and scrollEnabled ( you can set it to true I find it more useful like this ). It's going to work properly and fit well !

import React from 'react';
import { View, TextInput, Image } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import styles from './styles';
import logo from './logo.png';

const Demo = () => {
  return (
    <KeyboardAwareScrollView
      style={{  }}
      resetScrollToCoords={{ x: 0, y: 0 }}
      contentContainerStyle={styles.container}
      scrollEnabled={false}
    >
        <Image source={logo} style={styles.logo} />
        <TextInput
          placeholder="Email"
          style={styles.input}
        />
        <TextInput
          placeholder="Username"
          style={styles.input}
        />
        <TextInput
          placeholder="Password"
          style={styles.input}
        />
        <TextInput
          placeholder="Confirm Password"
          style={styles.input}
        />
    </KeyboardAwareScrollView>
  );
};


let styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "column"
    },
}),

export default Demo;

score 0 · Answer 12 · answered Mar 03 '22 at 09:55

With this it works. Also make sure that you have added the other necessary configuration as mentioned in the package.

_scrollToInput = (reactNode: any) => {
this.scroll._internalFiberInstanceHandleDEV.memoizedProps.scrollToFocusedInput(
  reactNode,
);

};

score 0 · Answer 13 · answered Sep 11 '22 at 22:10

All these posts are outdated or do not work for me.

react-native-aware-scroll-view has lots of issues and is pretty much unmaintained.

I already answered this question here with what worked for me (might be a duplicate): https://stackoverflow.com/a/73678502/14056591

score 0 · Answer 14 · edited May 15 '23 at 22:51

0

What fixed it for me was removing flex: 1 from my styles and replacing it with flexGrow: 1.

edited May 15 '23 at 22:51

brettinternet

546
7
21

answered May 15 '23 at 14:49

Samuel Dittmann

1

Can you please also give a brief explanation on the lines of: - how the 2 attributes differ from each other? - Why flexGrow works instead of flex? – NSaran May 17 '23 at 18:01

react-native-keyboard-aware-scroll-view not working properly

14 Answers14

Linked