Place Holder Not visible when there is text is typed for TextInput
See original GitHub issueCurrent 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
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 When it is empty
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:
- Created 3 years ago
- Comments:8 (1 by maintainers)
Top 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 >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 FreeTop 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
Top GitHub Comments
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.
Sorry, didn’t see the label prop. 😢👀 Closing.