CODEWITHSUNDEEP
react-native
Ardy Febriansyah
Ardy Febriansyah

Reputation: 768

How to change disabled <TextInput/> color

React native changing text color when passing props editable=false. screenshot of text input

How i can change that color of text input ?, i have read the documentation https://reactnative.dev/docs/textinput but not getting helped

Upvotes: 5

Views: 5897

Answers (2)

Jeremias Lima
Jeremias Lima

Reputation: 1

do not use editable={false}.

Place your input inside a simple view and use the props pointerEvents="none", so your input won't be touched.

<S. onPress={handleOpenModalFuel}>
            <View pointerEvents="none">
              <S.LabelInput>Fuel</S.LabelInput>
              <MyInput
                placeholder="Fuel"
                value={selectFuel.value}
                defaultValue={formatFuel(vehicle?.fuel_type_id)}
              />
            </View>
</S.ContainerInputSelect>

Upvotes: 0

Simon
Simon

Reputation: 6533

If you are changing the text input color you can update the style based on the prop:

<TextInput style={{ color: editable ? 'red' : 'blue' }} ... />

If you are trying to change the place holder color, you can do it in a similar manner but with the placeHolderTextColor prop instead:

<TextInput placeHolderTextColor={ editable ? 'red' : 'blue' } ... />

Upvotes: 8

Related Questions