How to change styling of TextInput placeholder in React Native?
Improving on Daniel's answer for a more generic solution
class TextInput2 extends Component {
constructor(props) {
super(props);
this.state = { placeholder: props.value.length == 0 }
this.handleChange = this.handleChange.bind(this);
}
handleChange(ev) {
this.setState({ placeholder: ev.nativeEvent.text.length == 0 });
this.props.onChange && this.props.onChange(ev);
}
render() {
const { placeholderStyle, style, onChange, ...rest } = this.props;
return <TextInput
{...rest}
onChange={this.handleChange}
style={this.state.placeholder ? [style, placeholderStyle] : style}
/>
}
}
Usage:
<TextInput2
value={this.state.myText}
style={{ fontFamily: "MyFont" }}
placeholderStyle={{ fontFamily: "AnotherFont", borderColor: 'red' }}
/>
Change React-Native TextInput's placeholder color
Like so:
<TextInput
placeholder="something"
placeholderTextColor="#000"
/>
React Native Custom TextInput Placeholder
I would suggest you to use custom style with the functional component.Create a functional component called RenderInput
for which pass placeholder
as props.
import React, {Component} from 'react';
import {TextInput, View, Text} from 'react-native';
const RenderInput = ({ label , inputvalue,styleLabel, ipOnChangeText, placeholder}) => {
const {inputStyle, labelStyle, containerStyle} = styles;
return(
<View style = {containerStyle}>
<Text style= {styleLabel ? labelStyle : ""} >{label}</Text>
<TextInput
autoCorrect={false}
placeholder={placeholder}
style= {inputStyle}
/>
</View>
);
}
const styles ={
inputStyle:{
color: '#333',
fontSize: 16,
lineHeight: 23,
borderBottomColor: '#333',
borderBottomWidth: 0.5,
fontFamily: 'System',
},
labelStyle:{
fontSize: 18,
color: '#737373',
paddingBottom: 10,
fontFamily: 'System',
position: 'relative',
':after': {
content: '* ',
position: absolute,
left: 5,
top: 0,
color: '#bbb'
}
},
containerStyle:{
flexDirection: 'column',
marginTop: 10,
marginBottom: 10
}
}
export { RenderInput };
Change the color of a TextInput placeholder with Styled Components in React Native
The best way to make this:
export const Input = styled.TextInput.attrs({
placeholderTextColor: "red"
})`
background-color: "#000";
`;
How to Change Font Family for textInput Placeholder in React Native
Try this :
<TextInput
secureTextEntry={(this.state.email.length <= 0 && this.state.emailStatus != 'onFocus') ? true : false}
style={styles.textboxfieldd}
placeholderStyle={styles.textboxfieldd}
onFocus={this.changeStatus.bind(this, 'emailStatus', 'onFocus', '')}
onChangeText={(email) => this.setState({ email })}
value={this.state.email}
placeholder={this.state.emailStatusPH}
placeholderTextColor="#D8D8D8" />
Exactly this line => secureTextEntry={(this.state.email.length<=0 && this.state.emailStatus!='onFocus') ?true:false} solves the problem .
Because if we give secureTextEntry={true} means fontfamily is set to placeholder text but field changed as password , so for that only we wrote like this . secureTextEntry={(this.state.email.length<=0 && this.state.emailStatus!='onFocus') ?true:false}
If that field length is 0 and not focused means it will set true secureTextEntry={true} so the placeholder text is set to mentioned fontfamily
Related Topics
React Native | Failed to Install the App. Please Accept All Necessary Sdk Licenses Using Sdk Manager
Access Ro.Serialno from Native in Android 8
How to Use Python to Execute Adb Commands
Android Studio - Xml Editor Autocomplete Not Working With Support Libraries
How to Make My App Work in All Devices
How to Prevent User Go Back to Protected Page After Logout
Android:Strike Out Text With Bold or Thicker Line Than Default Strike_Thru_Text_Flag
Remove Old and Add New Git in Android Studio
Android: How to Scale a Bitmap to Fit the Screen Size Using Canvas/Draw Bitmap
Videoview to Match Parent Height and Keep Aspect Ratio
How to Install the App Twice Without Interference in Android
Android Navigationview: Reduce Space Between Icon and Text and 'Itembackground' Not Working
Keep Screen Alive and App in Front of Lockscreen
Error "Gradle Sync Failed: Connection Refused: Connect"
How to Lazy Load Images in Listview in Android
Best Practice For Instantiating a New Android Fragment
Programmatically Retrieve Imei Number for Dual Sim in Android