React-native: [Android] Scroll appears in TextInput with custom fonts and multiline=true

[mxck]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
  OS: macOS High Sierra 10.13.3
  Node: 9.5.0
  Yarn: 1.3.2
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
  react: 16.2.0 => 16.2.0
  react-native: 0.53.3 => 0.53.3

Steps to Reproduce

1. Add custom font to project (added to rnpm and react-native link).
2. Use this font in TextInput with multiline={true}

Expected Behavior

Get multiline input without scroll

Actual Behavior

Multiline input with scroll.

(1. Stardart font, 2-4. Custom fonts)

Reproducible Demo

import React from "react";
import { View, TextInput } from "react-native";

const LOREM =
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco";

export default function App() {
  return (
    <View>
      <TextInput value={LOREM} multiline />
      <TextInput
        style={{ fontFamily: "OpenSans-Bold" }}
        value={LOREM}
        multiline
      />
      <TextInput
        style={{ fontFamily: "Nunito-Regular" }}
        value={LOREM}
        multiline
      />
      <TextInput
        style={{ fontFamily: "DK Sugary Pancake" }}
        value={LOREM}
        multiline
      />
    </View>
  );
}

I also tried to set autoGrow={true} but resultis the same

Full code with fonts (fonts from google fonts, so they are free).
https://github.com/mxck/react-native-TextInput-multiline-bug

[hramos]

@facebook-github-bot label Android

[facebook-github-bot]

Something went wrong executing that command, @hramos could you take a look?

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[rikur]

+1

[bsbechtel]

I had this same issue. Eventually, I figured out a work around by setting height larger or reducing font-size on the TextInput component.

Edit: use min-height if you want your TextInput to expand automatically

[rikur]

What makes it even worse is that scrollEnabled={false} doesn't remove the scroll either.

[mloureiro]

@rikur scrollEnabled is iOS setting only.

[vicnicius]

Also had the same issue. It looks like there's something wrong with the TextInput height calculation when mounting it with content and a custom font. The workaround in my case was to first render it empty and then set it's content.

[xhirazi]

+1

[workray]

Here is my solutions
onContentSizeChange = (event: Object) => {
this.setState({ inputHeight: event.nativeEvent.contentSize.height })
}
...
ref={ref => (this.textInputRef = ref)}
multiline
onContentSizeChange={this.onContentSizeChange}
onChangeText={this.onChangeText}
onSelectionChange={this.onSelectionChange}
value={textFromInput}
autoCorrect
placeholder='Share something...'
underlineColorAndroid='transparent'
placeholderTextColor={colors.black}
style={[
styles.textInput,
{ height: Math.max(44, inputHeight) },
]}
onBlur={this.onBlur}
onFocus={this.onFocus}
scrollEnabled={false}
/>

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[rikur]

Nope, still an issue

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[rikur]

Still an issue.

[vyashole]

+1

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[rikur]

Still a bug

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[rikur]

AFAIK, still a bug in latest RN.

[vyashole]

Still a bug

On Wed, 19 Aug, 2020, 3:54 am Riku Raisanen, [e-mail]
wrote:

AFAIK, still a bug in latest RN.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/18132#issuecomment-675749772,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AGG2TEUHEG635KYI7FGEUSTSBL5SNANCNFSM4ESYS23A
.

[safaiyeh]

@fabriziobertoglio1987 did you have a PR that addressed this?