score:6

Accepted answer

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:0

give parent view height like this

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

with flex:1 it will wrap up the contents.

score:0

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

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: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}>

score:2

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();
}

score:2

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:3

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}>

score:7

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>

score:16

personally solved this by using flex...

  <keyboardawarescrollview contentcontainerstyle={{flex: 1}}>
    <view style={{flex: 1}}>

Related Query

More Query from same tag