React Native change from circle to star symbol when TextInput secureTextEntry is set to true

Question

Currently when I set the secureTextEntry to true, all the password symbols become circles:

What I want to achieve is to show stars instead of circles. Here is an example:

*notice the stars in the second image

Thank you mates in advance!

Answer 1

We cannot override that dot we see in the TextInput field. But we can try a workaround.

You can handle the input value using the onKeyPress prop that TextInput provides.

Below is the onKeyPress function that you can use. Note: setPassword is a state updating function.

const onKeyPress = (data: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
  if (data.nativeEvent.key === 'Backspace') {
    setPassword(password.slice(0, -1));
    return;
  }

  if (data.nativeEvent.key === 'Enter') {
    // On Enter handle here
    return;
  }

  if (data.nativeEvent.key === ' ') {
    setPassword(password + ' ');
    return;
  }

  if (data.nativeEvent.key === 'Tab') {
    // On Tab handle here
    return;
  }

  setPassword(password + data.nativeEvent.key);
};

And in the TextInput component, you can use it like this

<TextInput
  style={styles.textInput}
  placeholder="Password"
  value={'*'.repeat(password.length)} // This is important.
  onKeyPress={onKeyPress}
/>

Here is an Expo Snack that you can refer to. It has a working implementation. It has been tested for Android and iOS only.