Add native module for reading high contrast

[ztefanie]

Short description

Introduced a native module to use the Android function to read if high contrast is set.

Proposed changes

• Added the Native module
• Use this Android function
• React native rejected the issue to add this function to the native modules here

This is just one solution, we can discuss if this PR is even what we want. Not tested for ios / No handling for ios yet. No tests or cleanup. Will do if we decide, we want to do it this way.

[steffenkleinle]

@ztefanie thank you for the proposal. Seems to work as expected. I think we should discuss this in a dedicated meeting (perhaps at the next conference).

Not tested yet. But if it works and there is an iOS/web equivalent I think we could do something like

• the system setting decides whether we automatically enable the high contrast mode in the app
• there is a toggle in the setting to override that (should be easy to implement and we would not need a design/change the UI anywhere)
• for web we would probably still need a toggle/UI change

On web there seems to be a CSS media query:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast
I also found this blog post: https://www.scottohara.me/blog/2021/10/01/detect-high-contrast-and-dark-modes.html

Notes:

• The android setting is only for "high contrast text", not for a high contrast mode in general. So while this is an indication the user would like to use high contrast mode in general, this is not necessarily the case.
• Do we now since what Android version this setting exists? I did not find any concrete information here, but first mentions on google seem to be from two years ago which would be Android 12 probably. So this only works for a subgroup of users. Seems like this exists in an experimental version for a while since Android 5.
• It seems like there is an iOS equivalent, right?