CODEWITHSUNDEEP
javascriptreactjsreact-native
Dror Bar
Dror Bar

Reputation: 718

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:

enter image description here  

Is it possible to do something like this?

Upvotes: 5

Views: 13105

Answers (2)

ayman salah
ayman salah

Reputation: 17

You can do something like this

<TextInput 
  placeholder="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

Upvotes: -2

CodeZombie
CodeZombie

Reputation: 2087

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 };

Upvotes: 6

Related Questions