如何更改 react-native 中的占位符文本大小

Question

In my TextInput I want to change the size of the font of placeHolder , I tried like this:

<TextInput
    style={styles.email}
    value={this.state.email} 
    placeholder="Email"
    placeholderTextColor="red"
    //placeholderTextSize = 20px
    onChange={this.handleEmailChange.bind(this)}
    onBlur={this.onBlur.bind(this)}/>

when I wrote like this color is working for me but size is not working, can any one give me suggestions how to change the size of placeholder Text, any help much appreciated

Answer 1

I am not sure if you can specify only the size of placeholderText. But you can change the fontSize of the input text from your TextInput:

var styles = StyleSheet.create({
 email:     {
    fontSize:   12, <-- Textsize of Input-Text and Placeholder-Text
 },
})

Maybe your solution works without px?! But i don´t think so. If you want to have a different PlaceholderText than the InputText, than you could maybe acces the onChangeText-Method of TextInput and change the fontSize as soon as you type something into the Textfield.

Answer 2

<TextInput 
style={{fontSize:12}} 
placeholder='any text' 
onChangeText={(input)=>this.setState({input: input})}
placeholderTextColor='green'/>

Answer 3

There's no way (as far as I remember) to directly change the font size of only the placeholder, since when you change the fontSize using styles, you're changing both, the input fontSize as well as placeholder fontSize. However, there is a way tho...

const [ text, setText ] = useState<string>('');

and then use the state to check whether the input field is empty or not. If it is empty, then change the fontSize as:

{ fontSize: text ? 18 : 12 }

However, it is important to note that even tho this method works, but the delay caused by the re-render is, of course, noticable.

Answer 4

TextInput component can be created like this.

<TextInput
value={value}
style={value ? styles.input : styles.placeholder}
placeholderTextColor="white"
{...props}/>

Answer 5

Just need to increase the 'fontSize' property of TextInput. Then the placeholder size will automatically get increase

Answer 6

here is your code

<TextInput
    style={styles.email}
    value={this.state.email} 
    placeholder="Email"
    placeholderTextColor="red"
    //placeholderTextSize = 20px <-------it's not working
    onChange={this.handleEmailChange.bind(this)}
    onBlur={this.onBlur.bind(this)}/>

here is your style

const style = StyleSheet.create({
    email: {
        borderColor: 'white',
        width: '100%',
        borderWidth: 1,
        borderRadius: 10,
        padding: 10,
        height: 55,
        width: 378,
        marginLeft: 8.27,
        marginTop: 5,
        fontSize:15,  <------------add this line it's working 
        backgroundColor: 'white'
    },

Answer 7

The font size of the placeholder is same as the font size of text field. This means you could specify the placeholder font size inside the style prop as normal.

<TextField placeholder="email" style={{ fontSize: 20 }} />

If you need to customise the font size of the placeholder and value differently. You could use is check if there is a input value exists and apply style accordingly.