placeholder
- React Native course
- Beginner
- Lesson 27/116
- 5 min
Learn placeholder and keyboardType.
placeholder
placeholder is the hint text that TextInput shows to the user when the field is empty. It is added with placeholder="Your name". When the user starts typing, the hint disappears.
It should not be confused with the real value value; placeholder only shows when empty and is never written to state. Keep hints short and clear: "Email", "Phone", "Full name". Do not put long descriptions in the placeholder; use a separate Text component for user assistance.
placeholderTextColor
By default placeholder appears in a faint gray. To change its color use the placeholderTextColor prop: <TextInput placeholder="Your name" placeholderTextColor="tomato" />.
This is useful when your design needs to highlight the hint or separate it from the background. The value can be a color name (gray, tomato) or a hex code (#999). Once the user starts typing, value is shown with the default text color.
Practice TextInput with placeholder
Import TextInput from react-native. Add a <TextInput> with the placeholder prop set to "Username" and the placeholderTextColor prop set to "gray".
Starter code
// Import TextInput
// Show a TextInput with a placeholder
function App() {
return null;
}Sample solution
import { TextInput, View } from "react-native";
function App() {
return (
<View>
<TextInput placeholder="Username" placeholderTextColor="gray" />
</View>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Writing placeholder
<TextInput ____="Email" /><TextInput placeholder="Email" />Explanation: The placeholder prop shows a hint when empty.
2 What does placeholder do?
<TextInput placeholder="Email" />- Holds the real value
- Shows a hint when empty Correct answer
- Opens the keyboard
- Sets the text color
Explanation: placeholder shows a short hint when the field is empty.
3 Match the placeholder features
| Term | Meaning |
|---|---|
placeholder |
Hint when empty |
placeholderTextColor |
Hint color |
value |
Real value |
When user types |
Hint disappears |