Scroll snapping to top on iOS

[d7laungani]

My code is:

<KeyboardAwareScrollView
             scrollEnabled={true}
             style={styles.container}
         >

const styles = StyleSheet.create({
    container: {
      marginTop: 30,
        flex: 1,

    },

Thanks!

[amritsub]

having the same issue as well, the text input at the bottom of my view has some space between it and the keyboard but when I scroll down, it will stay snapped to the textinput

[Swordsman-Inaction]

I don't understand this issue. Can you provide more codes to reproduce the issue? And a screenshot would be better.

[amritsub]

@Swordsman-Inaction

import React from 'react';
import { StyleSheet,
        Text,
        TextInput,
        Button,
        FlatList,
        View,
        Dimensions } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

export default class Chat extends React.Component {

  render() {
    return (
      <View style={{flex: 1}}>
      <KeyboardAwareScrollView
        resetScrollToCoords={{ x: 0, y: 0 }}
        contentContainerStyle={styles.containerStyle}>
      <FlatList
        style={styles.messages}
        data={[{key: 'a'}, {key: 'b'}]}
        renderItem={({item}) => <Text>{item.key}</Text>}
        />
      <View>
      <TextInput style={styles.input} placeholder="Enter a message" />
      </View>
      </KeyboardAwareScrollView>
      </View>
    );
  }
};

const styles = StyleSheet.create({
  containerStyle: {
    flex: 1,
    justifyContent: 'flex-end'
  },
  input: {
    height: 50,
    width: Dimensions.get('window').width,
    borderColor: 'red',
    borderWidth: 1,
  },
  messages: {
    flex: 1,
    width: Dimensions.get('window').width,
    borderWidth: 1,
    borderColor: 'green'
  }
});

here is the output when the app is first opened:

as you can see, there is a space between the keyboard and the TextInput since the view has snapped to the top of the screen. however after manually scrolling the view once with the keyboard open, it snaps back to the keyboard as expected:

i've been able to temporarily combat this with adding a negative extraScrollHeight but I believe this is a bug and needs to be fixed.

[Swordsman-Inaction]

@amritsub In fact, it's a feature, not a bug 😝 . There is a default value for extraHeight which is 75(actually I don't know why @alvaromb ). If you don't want it, simply add extraHeight={0} to clean the default value.

[amritsub]

@Swordsman-Inaction setting extraHeight to 0 in the FlatList above causes the bottom TextInput to not show up at all, so it made matters worse. I would like the TextInput to appear right above the Keyboard.

[Swordsman-Inaction]

@amritsub After I set extraHeight={0} to KeyboardAwareScrollView, everything works great. Also you mentioned that you added a negative extraScrollHeight, don't forget to remove that.

[amritsub]

@Swordsman-Inaction you're right, I was actually using react-navigation which provided a nav bar at the top of the screen, which was messing up the layout. After removing the navigation, the example works like the screenshot you posted. I'll have to fiddle with react-navigation to get it to play nicely with this library. Thanks so much for your help!

[Swordsman-Inaction]

My pleasure 😄