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.

Place Holder Not visible when there is text is typed for TextInput

See original GitHub issue

Current behavior

The place holder text is not visible when something is being typed or is already typed in the textInput. Check Screenshots below

Expected behavior

Place Holder should be above the text, as shown here textinput-outlined focused

Code sample

I don’t use expo but my project is open source, still here is the sample code I am using formik if that matters & here is the file in my Github repo, at line 62.

<TextInput
              mode="outlined"
              value={values.firmName}
              error={errors.firmName != undefined}
              placeholder="Firm Name"
              style={{marginHorizontal: 16, marginVertical: 8}}
              numberOfLines={1}
              maxLength={20}
              onBlur={handleBlur('firmName')}
              onChangeText={handleChange('firmName')}
            />

Screenshots (if applicable)

When text is typed Screenshot_20200920-130942_GST_Bill_Generator_2 When it is empty Screenshot_20200920-130917_GST_Bill_Generator_2

What have you tried

I don’t know what’s wrong, new to react-native. Probably because of android 10

Your Environment

software version
ios or android Android 10
react-native 0.63.2
react-native-paper ^4.1.0
react-native-vector-icons ^7.1.0
node v12.18.4
yarn yarn 1.22.5
expo sdk I don’t use it

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
github-actions[bot]commented, Sep 20, 2020

Couldn’t find version numbers for the following packages in the issue:

  • expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

0reactions
being-yash-tcommented, Sep 26, 2020

Sorry, didn’t see the label prop. 😢👀 Closing.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why placeholder text is not showing of textInput field in react ...
I think it's because the textinput has some value in his value property, can you try to use value='' ? <TextInput style={styles.
Read more >
Don't Use The Placeholder Attribute - Smashing Magazine
For someone who has never encountered it before, placeholder text may look like entered content, causing them to skip over the input.
Read more >
:placeholder-shown - CSS: Cascading Style Sheets | MDN
The :placeholder-shown CSS pseudo-class represents any or element that is currently displaying placeholder text.
Read more >
Input placeholder not visible
Hi Gareth, You can change the visibility of the placeholder text, by adding this CSS to your app: The first input, has 'enabled'...
Read more >
HTML input placeholder Attribute - W3Schools
The short hint is displayed in the input field before the user enters a value. Note: The placeholder attribute works with the following...
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