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.

Disabled textinput opacity not changing???

See original GitHub issue

I want to change the opacity of disabled textinput to 1.

import { TextInput } from 'react-native-paper';

 <TextInput
          placeholder="Enter your email"
          mode="outlined"
          label="Enter your email"
          error={!validEmail}
          value={email}
          onChangeText={text => emailChange(text)}
          left={<TextInput.Icon name="email" color={colors.black} />}
          theme={{colors: {primary:colors.appColor,text:"#000000",})}}
      />

Is there anyway to change the opacity when textinput is disabled???

I am using the following versions:

"react-native": "0.67.1",
"react-native-paper": "^4.11.2",
"react-native-vector-icons": "^9.0.0",

Link to the repo:

Click here to check my code

Thanks!

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
lukewalczakcommented, Feb 7, 2022

Hey @zoobibackups, I think it’s not possible when passed disabled prop, however if I remember correctly you can try to use editable={false} instead.

0reactions
zoobibackupscommented, Mar 3, 2022

Hey @zoobibackups, I think it’s not possible when passed disabled prop, however if I remember correctly you can try to use editable={false} instead.

Perfect, we can’t change the opacity of TextInput with property disabled={true} instead we can use editable={false} which allow us to change opacity.

Thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

text field value displays too light after being disabled
By design , when a text box field is disabled , it will apply the default opacity setting for it purposely to have...
Read more >
How to change opacity in disabled state of image in css
So, you should not use :disabled for images. You should to find some other way. The best possibility should be to use an...
Read more >
disabled - CSS: Cascading Style Sheets - MDN Web Docs
The :disabled CSS pseudo-class represents any disabled element. An element is disabled if it can't be activated (selected, clicked on, ...
Read more >
TextInput - React Native
Solutions to avoid this are to either not set height explicitly, in which case the system will take care of displaying the border...
Read more >
How to disable ion-input? - Ionic Forum
I tried disabling the ion-input and it's working, but the opacity of the disabled style is not passed to the child tags, so...
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