React Native Custom Textinput Placeholder

I know you can dynamically change the Placeholder text and style, but can you create a custom Placeholder view all together? This is what I'm trying to achieve:   Is it possible

Solution 1:

I would suggest you to use custom style with the functional component.Create a functional component called RenderInput for which pass placeholder as props.

importReact, {Component} from'react';
import {TextInput, View, Text} from'react-native';

constRenderInput = ({ label , inputvalue,styleLabel, ipOnChangeText, placeholder}) => {
    const {inputStyle, labelStyle, containerStyle} = styles;
    return(
        <Viewstyle = {containerStyle}><Textstyle= {styleLabel ? labelStyle: ""} >{label}</Text><TextInputautoCorrect={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 };

Solution 2:

Creat a componet with name MyTextInput like this:

classMyTextInputextendsComponent{
  constructor(props) {
    super(props);
    this.state = { placeholder: props.text.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}
      />
  }
}

and use this in another component:

importMyTextInputfrom'.../MyTextInput';

<MyTextInputtext={this.state.myText}style={{fontFamily: "YourFont" }}
  placeholderStyle={{fontFamily: "AnotherFont", borderColor: 'red' }}
/>

you can custom any component you want with this way.

Solution 3:

You can do something like this

<TextInputplaceholder="YOUR TEXT"placeholderTextColor="#555555"
/>

OR of course you can create your own version of the component TextInput something that contains the custom placeholder on top of the TextInput and once the text change you hide the custom placeholder