[Android] Scroll appears in TextInput with custom fonts and multiline=true
See original GitHub issueIs 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
- Add custom font to project (added to rnpm and
react-native link
). - 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
Issue Analytics
- State:
- Created 6 years ago
- Reactions:5
- Comments:29 (2 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
+1
Still a bug