Skip to content

How to change Textinput placeholder and text color in version 5.0.1 #3526

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
harshps08 opened this issue Dec 14, 2022 · 7 comments
Closed

How to change Textinput placeholder and text color in version 5.0.1 #3526

harshps08 opened this issue Dec 14, 2022 · 7 comments
Labels
question Question related to the library, not an issue TextInput

Comments

@harshps08
Copy link

harshps08 commented Dec 14, 2022

I have tried to implement react native paper textinput in outlined mode, I want to change the color of placeholder and also the text value after input , but I am unable to do so
I have attached the snack link below
(first text input placeholder color and text value)
https://snack.expo.dev/uEaFRaaIl

"react-native-paper":5.0.1,
"react-native": 0.67,

I have mutltiple options like making changes in theme , but nothing seems to work.

@harshps08 harshps08 added the question Question related to the library, not an issue label Dec 14, 2022
@lukewalczak
Copy link
Member

lukewalczak commented Dec 14, 2022

Hey @harshps08, for changing the placeholder color you can override theme.colors.onSurfaceVariant (I will check whether it should be possible also by specifying placeholderTextColor) . For text color you can use textColor prop:

      <TextInput
        mode="outlined"
        label="Remitter Mobile Number"
        theme={{ colors: { onSurfaceVariant: 'white'} }}
        style={{ backgroundColor: '#626262' }}
        activeOutlineColor="white"
        placeholder="placeholder"
        outlineColor="white"
        textColor="white"
        onChangeText={(text) => setValue(text)}
        autoCapitalize="none"
        blurOnSubmit={false}
        keyboardType="number-pad"
        returnKeyType="done"
        maxLength={10}
        value={Value}
      />

@sguidotti
Copy link

Thank you I have been looking for this answer forever!

@chrised123
Copy link

@lukewalczak Its not possible to override it using placeholderTextColor right?

@dhatrishdixit
Copy link

textColor prop is removed or some thing ?? is there any other way

@Stefan98167
Copy link

How to change the text size?

@Harikaran99
Copy link

@Stefan98167
you can use contentStyle prop like this
`<Input
contentStyle={{
fontFamily: 'Nunito-Light',
fontSize: 23,
paddingLeft: 20,
}}
/> this will change the placeholder font size and actual size. i hope this is help for you 😊

@Stefan98167
Copy link

Thank you, I will look into it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Question related to the library, not an issue TextInput
Projects
None yet
Development

No branches or pull requests

7 participants