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

Implement prefersReducedMotion on native #4039

Merged
merged 3 commits into from
May 16, 2024
Merged

Conversation

mozzius
Copy link
Member

@mozzius mozzius commented May 16, 2024

Currently, we only get the prefersReducedMotion value on web. Luckily, Reanimated has a useReducedMotion hook, but we need the value not in a hook. This PR uses the (internal) isReducedMotion function from Reanimated since it does exactly the same thing on web, and gets the value as it is at app startup on native. Check the simple implementation here

https://github.com/software-mansion/react-native-reanimated/blob/44d55dd3b6b92759fa820538d4f7c420bc8c2fa0/src/reanimated2/PlatformChecker.ts#L49

Note that the implementation of useReducedMotion is ultra simple and we could just call it here as not to rely on internal functions, but I think it's probably unsafe to break the rule of hooks here in case they change the implementation.

https://github.com/software-mansion/react-native-reanimated/blob/44d55dd3b6b92759fa820538d4f7c420bc8c2fa0/src/reanimated2/hook/useReducedMotion.ts#L4

Copy link

render bot commented May 16, 2024

Copy link

github-actions bot commented May 16, 2024

Old size New size Diff
6.85 MB 6.85 MB -58 B (-0.00%)

Copy link

The Pull Request introduced fingerprint changes against the base commit: 3674c8a

Fingerprint diff
[{"type":"dir","filePath":"node_modules/react-native-reanimated","reasons":["bareRncliAutolinking"],"hash":"edca9b4d869ae5a07b1b4af99e1bc2df6d0cec32"},{"type":"dir","filePath":"patches","reasons":["patchPackage"],"hash":"cbf4d74939a85a1082b8fc1888c43d2319fbeca2"}]

Generated by PR labeler 🤖

@haileyok
Copy link
Contributor

Oh holy shit, was wanting to do this before but realized it wasn't available in the RN function. This is great.

@haileyok
Copy link
Contributor

haileyok commented May 16, 2024

This is actually a global on native too, so if you wanted to you could drop the patch and access it directly through global._REANIMATED_IS_REDUCED_MOTION the same way that _IS_FABRIC is accessible that way.

https://github.com/software-mansion/react-native-reanimated/blob/44d55dd3b6b92759fa820538d4f7c420bc8c2fa0/Common/cpp/ReanimatedRuntime/RNRuntimeDecorator.cpp#L41
https://github.com/software-mansion/react-native-reanimated/blob/44d55dd3b6b92759fa820538d4f7c420bc8c2fa0/src/reanimated2/globals.d.ts#L24

With that said though, they actually used to get the value this way for useReducedMotion(), but that changed here:
software-mansion/react-native-reanimated@d4c4084#diff-a871fd108ad80ac4a67f3bd6f0cb7c79cc07755ef257cbfcef83e179004f2e50

Could be meaningless, could mean they intend to change it. The patch at least will tell us if it ever does change so that seems fine!

@mozzius
Copy link
Member Author

mozzius commented May 16, 2024

Yep, I think the patch is a good canary for if their internal implementation changes

@mozzius mozzius merged commit aded49f into main May 16, 2024
6 checks passed
@mozzius mozzius deleted the samuel/native-reduced-motion branch May 16, 2024 11:01
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