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.

[Android] Scroll appears in TextInput with custom fonts and multiline=true

See original GitHub issue

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. screnshot (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

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:5
  • Comments:29 (2 by maintainers)

github_iconTop GitHub Comments

11reactions
rikurcommented, Jul 13, 2018

+1

7reactions
rikurcommented, May 14, 2020

Still a bug

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to scroll to the beginning of a text in TextInput Expo ...
Run it on IOS emulator and you'll see how it's supposed to run, then on an Android emulator and you'll see what the...
Read more >
TextInput - React Native
A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, ...
Read more >
react-admin textinput required doestn work - You.com
facebook/react-native[Android] Scroll appears in TextInput with custom fonts and multiline=true#18132. Created almost 5 years ago.
Read more >
Widgets | Litho
VerticalScroll#. Component that wraps another component, allowing it to be vertically scrollable. It's analogous to Android's ScrollView . Required Props ...
Read more >
TextField - Adobe ActionScript® 3 (AS3 ) API Reference
A Boolean value that indicates whether Flash Player automatically scrolls multiline text fields when the user clicks a text field and rolls the...
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