javascript - React Native Custom TextInput Placeholder - Stack Overflow

admin管理员组

文章数量:1356914

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

Share Improve this question Follow asked Aug 9, 2018 at 8:09 Dror BarDror Bar 71822 gold badges1111 silver badges1919 bronze badges 4

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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

本文标签： javascriptReact Native Custom TextInput PlaceholderStack Overflow