How to style RN password={true}?

Question

There are many issues with how RN/Android handle a secure password input.

Here are 3 problems off the bat:

1. You can't style the color (It's always #000)
2. You can't change the font (it's always monospace... ugh)
3. The bullet points jitter depending if the input is focused or not. Here is an issue that explains it with a great photo.

Overall all 3 of these problems make password inputs in my app absolutely hideous, and basically unusable (the background of my app inputs are black).

It seems all the workarounds are long and involved, so I was thinking of doing a pseudo version of the input which simply uses callbacks, regular expressions and the change event to replace the values with ●

Does anyone have any ideas how I can achieve this? The part that seems tricky is because the value of the input must come from the value of value={}, then when they type another key it's going to include a bunch of bullets. I've pondered this for quite awhile now and I'm stumped...

It would be solvable easily I think if onKeyPress worked for both iOS and Android, because then you can just capture the key and modify the state before onChangeText gets called.

The other tricky part is if they use the selection to edit somewhere in the middle

'use strict';

import React, {
  TextInput
} from 'react-native';

export default class PasswordInput extends React.Component {
  state = {
    value: null,
    maskedValue: null
  };

  static propTypes = {
    onChange: React.PropTypes.func.isRequired
  };

  _handleChange = (text) => {
    this.setState({
      value: text,
      maskedValue: text
    }, () => {
      this.props.onChange(text);
    });
  };

  render() {
    return (
      <TextInput
        {...this.props}
        value={this.state.maskedValue}
        onChangeText={(text) => this._handleChange(text)}
      />
    );
  };
}