Closed syedabuthahirm closed 5 years ago
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 }}
/>
@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
.
@ferrannp Please reopen this issue. I can send a fix for this if required.
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.
Why did you close this issue? It's still now working
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