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 to do something like this?

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 to do something like this?

• javascript
• reactjs
• react-native

• You can create your own custom TextInput ponent – Harrison Commented Aug 9, 2018 at 8:11
• Could you perhaps post a small example how to do it? – Dror Bar Commented Aug 9, 2018 at 8:46
• Does this answer your question? How to change styling of TextInput placeholder in React Native? – cnps Commented Jun 23, 2020 at 13:00
• @cnps Doubt it, that answers how to style it, but in the screen shot I added you can see there are two different colors, and it doesn't cover that. – Dror Bar Commented Jun 25, 2020 at 11:06

2 Answers 2

I would suggest you to use custom style with the functional ponent.Create a functional ponent 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 };

You can do something like this

<TextInput 
  placeholder="YOUR TEXT"
  placeholderTextColor="#555555"
/>

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