react-native-keyboard-aware-scroll-view : Page scrolls down when I start typing

Viewed 712

Until typing everything is ok. However after starting typing page scrolls down(shifting). I am not able to solve this whatever i do...

<ImageBackground
          source={bgSrc}
          style={styles.background}
          resizeMode="cover">

         <StatusBar hidden={true} />

          <KeyboardAwareScrollView
            showsVerticalScrollIndicator={false}
            enableOnAndroid
          >

            {screenToShow}

          </KeyboardAwareScrollView>

</ImageBackground>

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: height,
    backgroundColor: '#555',
  },
  background: {
    flex: 1,
    width: null,
    height: null,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

before typing, it's looking perfect

After typing in the password field page moves down as u see:

after typing, it scroll down

1 Answers

I have seen your question on github as well, and its been a long time since that is in open state there.

I have the above problem resolved using KeyboardAvoidingView from react-native

import {KeyboardAvoidingView} from 'react-native'

I have replaced KeyboardAwareScrollView with KeyboardAvoidingView and this is working as needed.

Here is an app link that does this. You can download and see it's login page.

Related