callstack / callstack/react-native-paper

How to have a label and a placeholder on a textinput at the same time

Open
#4,352 1 comment 0 reactions 0 assignees View on GitHub
question
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

### Ask your Question

If you have both a `label` and a `placeholder` prop at the same time, then on initial render, the label will show but then the placeholder doesnt show until the input is focused like so:

https://github.com/callstack/react-native-paper/assets/56619430/7a23d59d-b705-461f-ab4a-43636b12b904

is there a way to have both the label and the placeholder exist at the same time even when the input isnt focused. in other words, is there a way to make the text input always look like this with the label at the top?
![Screen Shot 2024-03-21 at 11 02 34 PM](https://github.com/callstack/react-native-paper/assets/56619430/83599277-fb28-4f00-af5f-4dfa992d5ce6)

Contributor guide

Open the contributing guide

Research direction

Start with the TextInput component entry point and its handling of the label and placeholder props. Reproduce the initial unfocused state described in the issue, then check existing tests or documentation for TextInput behavior. Done means the label remains at the top and the placeholder is also visible before focus, with the expected behavior covered by a test.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
frontend, mobile
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.