Input selectionCursor doesn't work

[trevorallred]

Description

Input.selectionCursor should change the color of the blinking cursor and selected text. This is really important in dark mode since the default cursor is too dark to see.

CodeSandbox/Snack link

https://snack.expo.dev/@trevorallred/jealous-macaroni-and-cheese?platform=ios

Steps to reproduce

I'm trying this code, which should change the blinking cursor to red.

<Input selectionColor="#F00" />

I verified the React Native TextInput component works as expected and the Native Base code looks like it's all there in components/primitives/Input/InputBase.tsx.

NativeBase Version

3.4.25

Platform

• [ ] Android
• [ ] CRA
• [X] Expo
• [X] iOS
• [ ] Next

Other Platform

No response

Additional Information

I also tried passing in debug:

<Input debug={true} selectionColor="#F00" />

Output

 LOG  Input
 LOG  usePropsResolution
 LOG   incomingProps:  {"debug": true, "isDisabled": undefined, "isInvalid": undefined, "isReadOnly": undefined, "isRequired": undefined, "selectionColor": "#F00"}
 LOG   state:  {"isDisabled": undefined, "isFocused": false, "isHovered": false, "isInvalid": undefined, "isReadOnly": undefined}
 LOG   componentTheme:  {"baseStyle": [Function baseStyle], "defaultProps": {"size": "sm", "variant": "outline"}, "sizes": {"2xl": {"fontSize": "xl"}, "lg": {"fontSize": "md"}, "md": {"fontSize": "sm"}, "sm": {"fontSize": "xs"}, "xl": {"fontSize": "lg"}, "xs": {"fontSize": "2xs"}}, "variants": {"filled": [Function filledStyle], "outline": [Function outlineStyle], "rounded": [Function roundedStyle], "underlined": [Function underlinedStyle], "unstyled": [Function unstyledStyle]}}
 LOG  Flattening incoming and Default
 LOG   size updated as simple prop
 LOG   variant updated as simple prop
 LOG   debug updated as simple prop
 LOG   selectionColor updated as simple prop
 LOG  Flattening baseStyle
 LOG   fontFamily updated as simple prop
 LOG   py updated as simple prop
 LOG   px updated as simple prop
 LOG   borderRadius updated as simple prop
 LOG   overflow updated as simple prop
 LOG   _disabled deleted
 LOG   _input updated as internal prop with higher specificity
 LOG   placeholderTextColor updated as simple prop
 LOG   color updated as simple prop
 LOG   borderColor updated as simple prop
 LOG   _stack updated as internal prop with higher specificity
 LOG   _hover deleted
 LOG   _focus deleted
 LOG   debug ignored
 LOG  Flattening variantStyle
 LOG   borderWidth updated as simple prop
 LOG   _focus deleted
 LOG   debug ignored
 LOG  Flattening sizeStyle
 LOG   fontSize updated as simple prop
 LOG   debug ignored
 LOG   resolvedProps:  {"_input": {"bg": "transparent", "flex": 1, "h": "100%", "w": "100%"}, "_stack": {"alignItems": "center", "flexDirection": "row", "overflow": "hidden"}, "borderColor": "muted.300", "borderRadius": "sm", "borderWidth": "1", "color": "text.900", "debug": true, "fontFamily": "body", "fontSize": "xs", "overflow": "hidden", "paddingBottom": "2", "paddingLeft": "3", "paddingRight": "3", "paddingTop": "2", "placeholderTextColor": "text.400", "selectionColor": "#F00"}
 LOG  styleSystem
 LOG   props:  {"accessibilityDescribedBy": undefined, "accessibilityInvalid": undefined, "accessibilityLabel": undefined, "accessibilityReadOnly": undefined, "accessibilityRequired": undefined, "accessible": true, "bg": "transparent", "color": "text.900", "disabled": undefined, "editable": true, "flex": 1, "fontFamily": undefined, "fontSize": "xs", "fontStyle": "normal", "fontWeight": 400, "h": "100%", "nativeID": undefined, "onBlur": [Function onBlur], "onFocus": [Function onFocus], "onKeyPress": [Function onKeyPress], "paddingBottom": "2", "paddingLeft": "3", "paddingRight": "3", "paddingTop": "2", "placeholderTextColor": "#a3a3a3", "readOnly": undefined, "required": undefined, "secureTextEntry": false, "selectionColor": "#F00", "underlineColorAndroid": undefined, "w": "100%"}
 LOG   style:  {"backgroundColor": "transparent", "color": "#171717", "flex": 1, "fontFamily": undefined, "fontSize": 12, "fontStyle": "normal", "fontWeight": "400", "height": "100%", "paddingBottom": 8, "paddingLeft": 12, "paddingRight": 12, "paddingTop": 8, "width": "100%"}
 LOG   restProps:  {"accessibilityDescribedBy": undefined, "accessibilityInvalid": undefined, "accessibilityLabel": undefined, "accessibilityReadOnly": undefined, "accessibilityRequired": undefined, "accessible": true, "dataSet": {}, "disabled": undefined, "editable": true, "nativeID": undefined, "onBlur": [Function onBlur], "onFocus": [Function onFocus], "onKeyPress": [Function onKeyPress], "placeholderTextColor": "#a3a3a3", "readOnly": undefined, "required": undefined, "secureTextEntry": false, "selectionColor": "#F00", "underlineColorAndroid": undefined}

[bnussman]

I think this could be related to my open issue https://github.com/GeekyAnts/NativeBase/issues/5557.

This needs to be fixed NOW but I'm starting to think Nativebase is dead. ☹️

[qd-wl]

https://snack.expo.dev/@zenolee/nb-input-selection-color <Input _focus={{ _ios: { selectionColor: '#F00' }, _android: { selectionColor: '#F00' }, }} placeholder="Native Base <Input />" />