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 not visible when it's height greater than some value

See original GitHub issue

Description

Text input becomes invincible when it’s height is a bigger value (mostly >= window.hiegth ). Tested in Android. It’s working normal for lower values.

Code to reproduce the issue

import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import React from 'react';
import {
    SafeAreaView,
    ScrollView,
    Dimensions,
    TextInput,
} from 'react-native';

const App = () => (
    <SafeAreaView>
        <ScrollView contentInsetAdjustmentBehavior="automatic">
            <TextInput
                style={{
                    backgroundColor: "red",
                    width: Dimensions.get('window').width,
                    height: 2 * Dimensions.get('window').height,
                }}
            />
        </ScrollView>
    </SafeAreaView>
);

AppRegistry.registerComponent(appName, () => App);

React Native version:

react": "16.11.0",
react-native": "0.62.2"

Steps To Reproduce

  1. react-native init <project-name>
  2. update above code and run

Expected Results

TextInput should not hide when it reaches to some limit

Issue Analytics

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

github_iconTop GitHub Comments

3reactions
vonovakcommented, Apr 23, 2020

Let me just add that this is not reproducible on all devices / versions. I cannot reproduce it on my android 10 device but can reproduce on android 8 device and emulator.

Here’s a snack where you can observe the problem: https://snack.expo.io/@vonovak/rn-28701

  • note that the textinput is still mounted, you can interact with it, just not see it
  • the issue is present with multiline textinput too (if you fill it up with enough text), where this indeed is a problem
  • the trouble seems to be in wrapping the textinput in ScrollView. Without ScrollView the issue is not there, so perhaps this is a ScrollView problem, not a TextInput one. However, if I just change TextInput to View, it works; so some interplay between TextInput and ScrollView is causing this
  • I can also reproduce this on master, I tried it with RNTester on bf5f3c6a79fba839225576da889d3b7f835a19f6
0reactions
Caundycommented, Dec 15, 2020

Can verify this issue is present on RN 61.2 when running on an android 8 device. Setting TextInput’s maxHeight to screen height or less seems to “fix” it

Read more comments on GitHub >

github_iconTop Results From Across the Web

How would I grow <TextInput> height upon text wrapping?
When the text grows beyond one line, a scroll view is created within the text input field and scrolls automatically to the bottom....
Read more >
TextInput QML Type | Qt Quick 6.4.1
TextInput does not have vertical alignment, as the natural height is exactly the height of the single line of text. If you set...
Read more >
dcc.Input - Dash for Python Documentation - Dash Plotly
If this attribute is not set to any, the control accepts only values at multiples of the step value greater than the minimum....
Read more >
Text input control in Power Apps - Microsoft Learn
Format – Whether the user input is restricted to numbers only or can be any text. Height – The distance between a control's...
Read more >
How to Make a PowerApps Multiline Text Input Control ...
This will make the text input box be at least 70 pixels high. If the label's height is currently at zero because there...
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