Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add cursorColor support to TextInput #1787

Merged
merged 3 commits into from
Apr 13, 2023
Merged

Conversation

dlitsman
Copy link

@dlitsman dlitsman commented Apr 12, 2023

Please select one of the following

  • I am removing an existing difference between facebook/react-native and microsoft/react-native-macos 👍
  • I am cherry-picking a change from Facebook's react-native into microsoft/react-native-macos 👍
  • I am making a fix / change for the macOS implementation of react-native
  • I am making a change required for Microsoft usage of react-native

Summary

In the current implementation of TextInput, there is no reliable way to specify cursorColor (caret color).

This prop is already supported in Android and documented in the main doc https://reactnative.dev/docs/textinput#cursorcolor-android This pull request adds support to macOS as well.

To demonstrate, here cursor is actually rendered, but you cannot see it as it is black on black.

Screen.Recording.2023-04-12.at.12.01.33.mov

TextInput implementation seems to be different between MacOS and iOS, so creating a pull request here.

Changelog

[MACOS] [ADDED] - Added support for cursorColor prop in TextInput

Test Plan

Run RNTester-macOS as explained in the guide https://github.com/microsoft/react-native-macos/tree/main/packages/rn-tester#running-on-ios

Screen.Recording.2023-04-12.at.12.08.20.mov

@dlitsman dlitsman requested a review from a team as a code owner April 12, 2023 11:26
@dlitsman
Copy link
Author

@microsoft-github-policy-service agree company="Meta"

@dlitsman
Copy link
Author

Thanks for the review! 👍 Addressed comments

@Saadnajmi Saadnajmi enabled auto-merge (squash) April 13, 2023 20:44
@Saadnajmi Saadnajmi merged commit 3e66909 into microsoft:main Apr 13, 2023
jonthysell pushed a commit to microsoft/react-native-windows that referenced this pull request Apr 21, 2023
## Description

I've added the support for the `cursorColor` property to the macOS repo already. This PR will help to keep parity between platforms microsoft/react-native-macos#1787 

### Type of Change
- New feature (non-breaking change which adds functionality)

### Why
For our needs, we need to have more control over cursor/caret color. The `cusrorColor` property is already available on macOS after microsoft/react-native-macos#1787 and documented in the docs https://reactnative.dev/docs/textinput#cursorcolor-android. However, there is currently no way to update the cursor/caret color on Windows.

### What
- I've extended `HideCaretIfNeeded` logic to support the custom color of a caret. This function is already, in a sense, changing the color of a caret; however, it always sets it to be transparent. Now, we allow custom colors as well
- Updated demo textinput page to have test cases for it

## Screenshots

https://user-images.githubusercontent.com/963490/232445282-96c509e8-801d-4009-bbfd-c061340f53e8.mp4
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants