Skip to content

Keyboard popup view auto-scroll not working for TextInput with multilineΒ #20996

Closed
@SupriyaKalghatgi

Description

@SupriyaKalghatgi

Environment

React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.4
      CPU: x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
      Memory: 28.78 MB / 8.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.11.3 - /usr/local/bin/node
      Yarn: 1.7.0 - /usr/local/bin/yarn
      npm: 5.6.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
      Android SDK:
        Build Tools: 22.0.1, 23.0.1, 25.0.3, 26.0.1, 26.0.3
        API Levels: 23, 25, 26
    IDEs:
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.4.1 => 16.4.1
      react-native: 0.56.0 => 0.56.0
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1

Description

Keyboard popup view does not scroll to the focussed TextInput with multiline prop

Reproducible Demo

<TextInput placeholder="1" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }} />
<TextInput placeholder="2" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }} />
<TextInput placeholder="3" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }} />
<TextInput placeholder="4" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }} />
<TextInput placeholder="5" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }} />
<TextInput placeholder="6" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }} />
<TextInput placeholder="7" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }} />
<TextInput placeholder="8" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }} />
<TextInput placeholder="9" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }}
multiline={true} />
<TextInput placeholder="10" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }} />
<TextInput placeholder="11" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }} />
<TextInput placeholder="12" style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 5 }} />

Output

textarea

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions