Screen jumping to top in react native on clicking into TextInput-CodePudding

I have added some additional within a screen on my react native app. The views are wrapped in a <KeyboardAwareScrollView>. The problem is that when the page is longer than can be displayed on the screen, when a user clicks into a <TextInput> field, the screen jumps to the top of the page. I've tried a variety of things to prevent this from happening - everything from setting preventDefault={true} and scrollEnabled={false} in the <TextInput> to adding contentContainerStyle={styles.scroll} to the <KeyboardAwareScrollView>, but the behavior persists.

My containing <KeyboardAwareScrollView> looks like this:

<KeyboardAwareScrollView contentContainerStyle={styles.scroll}>
  <View
    style={{
      ...styles.layout.container,
      padding: 0,
      paddingBottom: 20,
   }}
  >

And the section with the <TextInput> looks like this:

<View style={{ 
  width: '100%', 
  padding: 20,
  borderBottomColor: '#ccc',
  borderBottomWidth: 1,
 }}>
   <TextInput
    style={{...styles.forms.fieldLabel, width: '100%', 
    marginBottom: 10}} 
    scrollEnabled={false}
    multiline={true}
    editable={false}
    preventDefault={true}
    placeholder="Enter clarifying details pertaining visit 
    maintenance reason."
    value={this.getDescriptionForReasonCode(reason.code)}
   />
   <TextInput
    style={{...styles.forms.textArea}} 
    scrollEnabled={false}
    multiline={true}
    editable={true}
    preventDefault={true}
    placeholder="Enter optional clarifying details"
    onChangeText={(value) => {
      let changeComments = [...this.state.changeComments];
      handleUpdate('visitReasons-freeText', () => {
        changeComments.push(value);
        this.setState({ changeComments: [...changeComments] })
           this.addCommentsToChangeReasons();
        });
       }}
      value={this.state.changeComments[index]}/>
</View>

What can I do to prevent this behavior where the page jumps to the top of the screen whenever the user clicks into a <TextInput> field?

CodePudding user response：

Can you give this a try ?

return (
  <Fragment>
    <SafeAreaView style={styles.safeArea}>
      <KeyboardAwareScrollView keyboardShouldPersistTaps='always'>
        <View style={styles.container}>
          <View style={styles.bodyContainer}>
            <View style={styles.body}>
              <View style={styles.formContainer}>
                <View style={styles.inputContainer}>
                  <TextInput
                    multiline={true}
                    numberOfLines={2}
                    style={[styles.input,{ height:100, textAlignVertical: 'top'}]}
                    editable={true}
                    clearButtonMode='always'
                    placeholder="Enter optional clarifying details"
                    onChangeText={(value) => {
                      let changeComments = [...this.state.changeComments];
                      handleUpdate('visitReasons-freeText', () => {
                        changeComments.push(value);
                        this.setState({ changeComments: [...changeComments] })
                        this.addCommentsToChangeReasons();
                      });
                    }}
                    value={this.state.changeComments[index]}
                  />
                </View>
              </View>
            </View>
          </View>
        </View>
      </KeyboardAwareScrollView>
    </SafeAreaView>
  </Fragment>
);

Styles

const styles = StyleSheet.create({
    safeArea: {
        flex: 1,
    },
    container: {
        flex: 1,
        paddingLeft: 10,
        paddingRight: 10,
    },
    bodyContainer: {
        flex: 1,
    },
    body: {
        flex: 1,
    },
    formContainer: {
        padding: 10,
    },
    inputContainer: {
        borderBottomWidth: 1,
        marginBottom: 5,
    },
})

CodePudding user response：

I know how this can be frustrating!

Just use this library instead: https://github.com/APSL/react-native-keyboard-aware-scroll-view