Add red asterisk to TextInput required field

[meliodev]

Hey guys! Is there any way to add asterisk with red color to textInput label (placeholder) to show required field ?

[raajnadar]

NEW UPDATE -

There is a new way to do it from paper 4.11.0 - #2991

We can use custom react element for the text input component. Thanks to @smbadiwe

FOR OLD VERSIONS -

 <TextInput
      label="Email *"
      value={text}
      onChangeText={text => setText(text)}
 />

[irshadpalayadan]

ideally there should be required props as part of the TextInput

[raajnadar]

@irshadpalayadan answer updated

[smbadiwe]

The accepted answer is not really a solution. The requirement is to have a styled (colored) asterisk, not just an asterisk.

The quickest solution is to update this codebase to change the label property type from string | undefined to React.ReactNode | undefined. This will allow developers to customize how they want to indicate to their app users that a field is required.

In plain Javascript, the following example will work (you can try it by modifying this Expo example:

<TextInput
      label={<><span style={{color:'red'}}>*</span> Email</>}
      value={text}
      onChangeText={text => setText(text)}
    />

But it will fail in typescript due to type-checking.

[raajnadar]

You're typescript type is wrong that is why the type check will fail.

[smbadiwe]

You're typescript type is wrong that is why the type check will fail.

Yes, and that's the problem. label prop is defined in the library as of datatype string (See Source Code), which limits customization. If the datatype of label were to be changed to React.ReactNode (which also supports plain strings), then one could pass in any custom component and that'll perfectly solve this problem.

[raajnadar]

The repo is open for PR, you can fix it

[smbadiwe]

@raajnadar PR is up at #2991

[raajnadar]

Thanks for the PR & getting that merged I updated my previous comment.