question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TextInput does not scroll on Android with multiline on and editable off

See original GitHub issue

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
      Memory: 328.79 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.11.2 - ~/.nvm/versions/node/v8.11.2/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 5.6.0 - ~/.nvm/versions/node/v8.11.2/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 17, 21, 23, 25, 26, 27
        Build Tools: 23.0.1, 23.0.3, 24.0.1, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.1, 27.0.3, 28.0.2, 28.0.3
        System Images: android-25 | Google APIs Intel x86 Atom_64
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3
      react-native: 0.57.8 => 0.57.8

in https://github.com/facebook/react-native/issues/18601 issue is happened on version 0.54.3, but that issue is closed.

in #14856 issue is happened on version 0.46, but that issue is closed.

Steps to Reproduce

Set a part Props of “TextInput” as follows.

multiline={true}
editable={false}

Set more lines text contents in this “TextInput” while For example, if this “TextInput” can display up to max 5 lines in one times, Set 6 or more lines text in it.

Expected Behavior

I think that contents of contents should be able to be displayed by scrolling, regardless of whether it can be input to “TextInput” or not.

Actual Behavior

At present, the current code is working perfectly on iOS. In Android, the text is shown but if the text is too large it is impossible to scroll inside the textInput.

I tried adding some others props to the textInput in order to make sure the scroll was activated but nothing did the trick :

          autogrow
          multiline
          scrollEnabled
          editable={false}

As soon as I remove the editable the scroll works normally.

Thanks 👍

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
ishigamiicommented, Jan 23, 2019

A solution is to change the warper style depending on what you want to do. For me it was only to show a long text that was never gonna be editable so I changed it to :

        <ScrollView contentContainerStyle={{ flexGrow: 1, padding: 8 }}>
          <Text style={{ color: Colors.black }}>{text}</Text>
        </ScrollView>
0reactions
stale[bot]commented, Aug 9, 2019

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React-Native multiline TextInput component: how to allow ...
Making the text input to scroll in react native, you have to add numberOflines to it, this is the property which takes the...
Read more >
react-native-textinput-scroll - Expo Snack
Try this project on your phone! Use Expo's online editor to make changes and save your own copy.
Read more >
TextInput - React Native
Determines the types of data converted to clickable URLs in the text input. Only valid if multiline={true} and editable={false} . By default no...
Read more >
Text Field - Text goes below the IME [192043120]
This simple code is working unless your text field has too much height because it does not scroll to bring the text field...
Read more >
EditText - Android Developers
When you define an edit text widget, you must specify the R.styleable. ... FOCUS_DOWN If the reference refers to a view that does...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found