How to create a placeholder in input field in React Native? Code Example

A placeholder text helps to provide information about the input field. Like what the field is for – first name, address, write your message.. etc.

These placeholder text are not the values of input fields. Else they only show the message.

To create placeholder in TextInput component of React Native, use placeholder prop and set it to the string message.

Code Example

import React from "react";
import { SafeAreaView, StyleSheet, TextInput, View, Text } from "react-native";

const PlaceholderTextInput = () => {
  const [number, onChangeNumber] = React.useState(null);

  return (
    <SafeAreaView>
      <View style={styles.container}>
        <Text>placeholer = 'This is placeholder text'</Text>
        <TextInput
          style={styles.input}
          onChangeText={onChangeNumber}
          value={number}
          placeholder={'This is placeholder text'}
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 40
  },
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default PlaceholderTextInput;

Output –

From the image you can see how the placeholder text looks like in both iOS and Android phones. The text is not part of value. So, if you submit the field, it will be empty.

In the code we are setting placeholder='This is placeholder text' in line 15.

Live Demo

Conclusion

In React Native the placeholder can be added in TextInput fields using placeholder prop by setting it to a string value.