Extra Scroll with "done" button on numpad

[chasebish]

Version: 0.4.4

Problem

Upon opening a text field with phone-pad or numeric keyboard type with a "done" button, the screen scrolls an extra few pixels in a different animation. It seems like this happens because the "done" button for numeric keyboards decreases the size of the screen that is visible to the user. It also seems like the extra scroll distance is the same as the height as the extra tab above the num-pad.

Gif

The interaction can be seen when the user goes from the zip-code input box to the phone number input box

[bugs181]

Would you be willing to provide some example code that reproduces this issue? I may try to dig into this issue and provide a PR. I have this same requirement for a future project and want to ensure this works.

[chasebish]

Something like this should work. I tested it out on my own and the extra scroll isn't as noticeable as it is in the gif, but it's definitely still there.

Code

  render = () => {

    return (
      <KeyboardAwareScrollView
        contentContainerStyle={{ flexGrow: 1, backgroundColor: 'white',
                                 marginVertical: 50 }}
        keyboardShouldPersistTaps={'handled'}
        enableResetScrollToCoords={false}
      >

        <View style={[{ backgroundColor: 'white', justifyContent: 'center',
                        marginBottom: 5 }]}>
          <TextInput
            style={this.exampleStyle}
            editable={true}
            maxLength={50}
            returnKeyType="next"
            onSubmitEditing={() => { this.secondTextInput.focus(); }}
          />

          <TextInput
            ref={(input) => { this.secondTextInput = input; }}
            style={this.exampleStyle}
            editable={true}
            maxLength={50}
            returnKeyType="done"
            keyboardType="phone-pad"
          />
        </View>

      </KeyboardAwareScrollView>
    );
  }

  exampleStyle = {
    height: 50,
    marginHorizontal: 12,
    paddingHorizontal: 6,
    paddingVertical: 4,
    borderRadius: 3,
    borderWidth: 2,
  }

Let me know if that doesn't work for you, @bugs181

[chasebish]

This is still an issue

[serfgy]

Same, still experiencing it, as long as the TextInput has prop keyboardType = 'numeric'