[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]

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.

[vini-btc]

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 its content.

[xhirazi]

+1

[stale]

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]

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, ***@***.***> wrote: AFAIK, still a bug in latest RN. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#18132 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGG2TEUHEG635KYI7FGEUSTSBL5SNANCNFSM4ESYS23A> .

[safaiyeh]

@fabriziobertoglio1987 did you have a PR that addressed this?

[stale]

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.

[fabOnReact]

thanks @safaiyeh , I think you refer to my pr #29025

fixes a bug causing ScrollView to not detect scroll gesture when including a TextInput with textAlign center.

while here I don't see a ScrollView, the issue should be investigated in the TextInput.js functionalities and ReactAndroid TextInput API

Hopefully I'll have time in this days to take a look.. Thanks a lot!

[KyawSoeHein]

I faced the similar problem but my problem was I accentially set the height of textinput. So, it becomes scrollable with extra spaces, the problem was solved once I removed the height.

[jacdx]

Still broken on React Native 0.64. This is a pretty big issue. No solution worked for me other than removing the custom font.

[MarwaKhaledMohamed]

I'm still facing the same problem( I'm using a custom font ). the issue happening when the text input has font size style when I removed the font size the scroll disappeared so I think the problem is related to the text input height which affected by the font size. I hope you can fix this issue soon.

[sajith198]

I guess its due to the default Vertical padding present in the component . I just manually added a paddingVertical and it solved my issue !!. (try a lower value like 1 or 2 )

[stale]

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.

[MuhammadRafeh]

I am facing same exact issue

[Reykjavik151]

still the same - RN hasn't an opportunity to disable visibility for TextInput multiline scroll

[TommysG]

Any solution for this? This also creates a problem. If you have several textinput with custom font inside a scrollview, you can't scroll on the screen by touching on them (due to the internal TextInput scroll). Any workaround? The only thing that worked was removing custom font from TextInput.

[galaxykhh]

still a bug on RN 0.72.6

[ng-ha]

style={{includeFontPadding: false}} works for me

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.