React-native-paper: Error: SelectionColor isn't Working in TextInput Component

[syedabuthahirm]

Current behavior

Selection Color doesn't work on TextInput Component

Code sample

https://snack.expo.io/@syedabuthahirm/selectioncolor---react-native-paper

I found this link trigger this behavior
https://github.com/callstack/react-native-paper/blob/27bc0e67dc0d28ee96401b7d0411cd71102e7a0b/src/components/TextInput.js#L297

[ferrannp]

selectionColor is taken from the primary color of your theme. If you want to change it, you can for example do:

<TextInput
  theme={{ colors: { primary: "red" }}}
  value={this.state.inputValue}
  onChangeText={this._handleTextChange}
  style={{ width: 200, height: 44, padding: 8 }}
/>

[adi23arora]

@ferrannp primaryColor is used as labelColor and bottomLineColor. So, when we are using a dark color as the primaryColor, then text selection highlight color will also be dark, which makes the dark text in the TextInput invisible.
To solve this, we need to set the selectionColor separately or set it to the accentColor.

[adi23arora]

@ferrannp Please reopen this issue. I can send a fix for this if required.

[wack17s]

484

[methodbox]

selectionColor is taken from the primary color of your theme. If you want to change it, you can for example do:

<TextInput
  theme={{ colors: { primary: "red" }}} ///// WTF??
  value={this.state.inputValue}
  onChangeText={this._handleTextChange}
  style={{ width: 200, height: 44, padding: 8 }}
/>

This might be the worst solution to a concept in React I've seen.

Your solution is that I need to wrap my ENTIRE app in your component in order to facilitate the simple modification of a prop on a component like TextInput???

That is basically the definition of the imperative approach.

Unfortunately, while I think you guys have some nifty components, while trying to simply modify something as fundamental as selectionColor I ended up on this issue and this is enough for me to uninstall until you're ready for production.

I'd say I'd like to contribute but if the approach taken was that to modify a single prop you need to apply an app-wide theme I'm not sure I want to go down that rabbit hole.

On a side note, there's nothing in your docs making it clear a theme is required to modify the base color scheme.