feat: Add support for "Prefer Cross-Fade Transitions" into AccessibilityInfo #34406

gabrieldonadel · 2022-08-13T21:20:00Z

Summary

This PR adds prefersCrossFadeTransitions() to AccessibilityInfo in order to add support for "Prefer Cross-Fade Transitions", exposing the iOS settings option as proposed here react-native-community/discussions-and-proposals#452.
I believe this would be especially helpful for solving #31484

Closes react-native-community/discussions-and-proposals#452

TODO

Submit react-native-web PR updating AccessibilityInfo documentation. (feat: Add prefersCrossFadeTransitions to AccessibilityInfo docs react-native-website#3279)

Changelog

[iOS] [Added] - Add support for "Prefer Cross-Fade Transitions" into AccessibilityInfo

Test Plan

On iOS 14+

Access Settings > "General" > "Accessibility" > "Reduce Motion", enable "Reduce Motion" then enable "Prefer Cross-Fade Transitions".
Open the RNTester app and navigate to the Accessibility page

Screen.Recording.2022-02-17.at.20.23.42.mov

analysis-bot · 2022-08-13T21:45:10Z

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	7,615,477	+241
android	hermes	armeabi-v7a	7,030,367	+148
android	hermes	x86	7,915,854	+141
android	hermes	x86_64	7,889,742	+54
android	jsc	arm64-v8a	9,494,477	+223
android	jsc	armeabi-v7a	8,272,246	+132
android	jsc	x86	9,432,442	+125
android	jsc	x86_64	10,025,444	+50

Base commit: e0a71fc
Branch: main

analysis-bot · 2022-08-13T22:28:32Z

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: e0a71fc
Branch: main

facebook-github-bot · 2022-08-15T17:38:53Z

@makovkastar has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

gabrieldonadel · 2022-08-16T18:50:18Z

Hi @cortinico I see that the Facebook Internal - Linter action raised 1 warning, do you mind checking if there is something I need to update/change?

cortinico · 2022-08-17T10:18:41Z

Hi @cortinico I see that the Facebook Internal - Linter action raised 1 warning, do you mind checking if there is something I need to update/change?

@makovkastar is taking care of this PR and will get back to you in the near future. We might need to some adjustments to make this check green.

makovkastar · 2022-08-19T20:24:14Z

packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js

+        <DisplayOptionStatusExample
+          optionName={'Prefer Cross-Fade Transitions'}
+          optionChecker={AccessibilityInfo.prefersCrossFadeTransitions}
+          notification={'prefersCrossFadeTransitionsChanged'}


Do we need to add prefersCrossFadeTransitionsChanged to AccessibilityEventDefinitionsIOS inside AccessibilityInfo.js?

@makovkastar I'm not sure, UIKit has this bug that causes UIAccessibilityPrefersCrossFadeTransitionsStatusDidChangeNotification to not get triggered when Prefers Cross-Fade Transitions changes, I reported this bug on Apple Developer Forums a couple months ago but they haven't fixed this yet, that's also the reason why I've removed support for this here -> 71632b4.

AccessibilityInfo.prefersCrossFadeTransitions should be enough to fix #31484 though, at least while apple doesn't fix this bug on UIKit

makovkastar · 2022-08-19T21:24:01Z

Hi @gabrieldonadel, thanks for your patience here. In order to make the internal Linter happy, we need to make the getCurrentPrefersCrossFadeTransitionsState() method optional in NativeAccessibilityManager.js. Then add a null check in AccessibilityInfo.js to make sure that the method exists before calling it.

gabrieldonadel · 2022-08-19T22:44:54Z

Hi @gabrieldonadel, thanks for your patience here. In order to make the internal Linter happy, we need to make the getCurrentPrefersCrossFadeTransitionsState() method optional in NativeAccessibilityManager.js. Then add a null check in AccessibilityInfo.js to make sure that the method exists before calling it.

Got it, thanks for reviewing this @makovkastar, I've just pushed a commit making getCurrentPrefersCrossFadeTransitionsState optional

facebook-github-bot · 2022-08-19T22:47:53Z

@makovkastar has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

makovkastar · 2022-08-20T00:09:10Z

Libraries/Components/AccessibilityInfo/AccessibilityInfo.js

+   *
+   * See https://reactnative.dev/docs/accessibilityinfo#prefersCrossFadeTransitions
+   */
+  prefersCrossFadeTransitions(): Promise<boolean> {


AccessibilityInfo is typed with AccessibilityInfoType that is defined here: https://github.com/facebook/react-native/blob/main/Libraries/Components/AccessibilityInfo/AccessibilityInfo.flow.js.

@gabrieldonadel you need to add this method to the interface, otherwise Flow is complaining about the missing property.

Ohh I see, seems that this file was recently added and my branch was out of date, I've just added this AccessibilityInfo.flow.js.

…geNotification selector

… optional

facebook-github-bot · 2022-08-22T15:07:32Z

@makovkastar has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

gabrieldonadel · 2022-08-23T12:44:46Z

@makovkastar has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@makovkastar seems that the linter check failed again, do you mind checking what is causing it?

makovkastar · 2022-08-24T09:18:35Z

@makovkastar has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@makovkastar seems that the linter check failed again, do you mind checking what is causing it?

There was an unrelated internal breakage, I'm rebasing this PR past the fix.

react-native-bot · 2022-08-25T17:50:04Z

This pull request was successfully merged by @gabrieldonadel in be7c50f.

^{When will my fix make it into a release? | Upcoming Releases}

Summary: While working on a fix for #29974 (I have a draft for that already (gabrieldonadel#16), just waiting for #34406 to get merged) I noticed that the `KeyboardAvoidingView` tests on RNTester on iOS were not working with Fabric enabled because the `ModalHostView` component was still not implemented. Upon some more investigation, I found this code suggestion from Milker90 (#33652 (comment)) that enables the Modal component on iOS when Fabric is enabled. Closes #33652 ## Changelog [iOS] [Added] - Add support for Modal on iOS when Fabric is enabled Pull Request resolved: #34487 Test Plan: 1. With Fabric enabled open the RNTester app and navigate to the Modal page 2. Test the `Modal` component through the sections changing props https://user-images.githubusercontent.com/11707729/186289099-5223907d-b300-46bf-bfde-73259c29d544.mov Reviewed By: christophpurrer Differential Revision: D38981895 Pulled By: cipolleschi fbshipit-source-id: cd493a8d2035900da2576323bc112e2565df4834

…4487) Summary: While working on a fix for facebook#29974 (I have a draft for that already (gabrieldonadel#16), just waiting for facebook#34406 to get merged) I noticed that the `KeyboardAvoidingView` tests on RNTester on iOS were not working with Fabric enabled because the `ModalHostView` component was still not implemented. Upon some more investigation, I found this code suggestion from Milker90 (facebook#33652 (comment)) that enables the Modal component on iOS when Fabric is enabled. Closes facebook#33652 ## Changelog [iOS] [Added] - Add support for Modal on iOS when Fabric is enabled Pull Request resolved: facebook#34487 Test Plan: 1. With Fabric enabled open the RNTester app and navigate to the Modal page 2. Test the `Modal` component through the sections changing props https://user-images.githubusercontent.com/11707729/186289099-5223907d-b300-46bf-bfde-73259c29d544.mov Reviewed By: christophpurrer Differential Revision: D38981895 Pulled By: cipolleschi fbshipit-source-id: cd493a8d2035900da2576323bc112e2565df4834

…ityInfo (#34406) Summary: This PR adds `prefersCrossFadeTransitions()` to AccessibilityInfo in order to add support for "Prefer Cross-Fade Transitions", exposing the iOS settings option as proposed here react-native-community/discussions-and-proposals#452. I believe this would be especially helpful for solving #31484 #### TODO - [ ] Submit react-native-web PR updating AccessibilityInfo documentation. ## Changelog [iOS] [Added] - Add support for "Prefer Cross-Fade Transitions" into AccessibilityInfo Pull Request resolved: #34406 Test Plan: **On iOS 14+** 1. Access Settings > "General" > "Accessibility" > "Reduce Motion", enable "Reduce Motion" then enable "Prefer Cross-Fade Transitions". 2. Open the RNTester app and navigate to the Accessibility page https://user-images.githubusercontent.com/11707729/154588402-7d050858-3c2d-4d86-9585-928b8c66941b.mov Reviewed By: cipolleschi Differential Revision: D38711316 Pulled By: makovkastar fbshipit-source-id: b9965cd4285f1aa0f1fa927080370a22329c2f62

facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Aug 13, 2022

react-native-bot added Platform: iOS iOS applications. Type: Enhancement A new feature or enhancement of an existing feature. labels Aug 13, 2022

makovkastar reviewed Aug 19, 2022

View reviewed changes

gabrieldonadel requested a review from makovkastar August 19, 2022 20:57

makovkastar reviewed Aug 20, 2022

View reviewed changes

gabrieldonadel added 3 commits August 20, 2022 15:53

feat: Exposes iOS prefersCrossFadeTransitions

b7d7981

chore: remove UIAccessibilityPrefersCrossFadeTransitionsStatusDidChan…

b81a489

…geNotification selector

chore: Update getCurrentPrefersCrossFadeTransitionsState method to be…

d289d8f

… optional

gabrieldonadel force-pushed the feat/add-prefer-crossfade-transitions branch from 4ee496c to ff3802d Compare August 20, 2022 19:07

feat: Add prefersCrossFadeTransitions to flow

5c81481

gabrieldonadel force-pushed the feat/add-prefer-crossfade-transitions branch from ff3802d to 5c81481 Compare August 20, 2022 19:14

gabrieldonadel requested a review from makovkastar August 21, 2022 15:03

gabrieldonadel mentioned this pull request Aug 24, 2022

feat: Add support for Modal on iOS when Fabric is enabled #34487

Closed

facebook-github-bot closed this in be7c50f Aug 25, 2022

react-native-bot added the Merged This PR has been merged. label Aug 25, 2022

gabrieldonadel mentioned this pull request Aug 25, 2022

feat: Add prefersCrossFadeTransitions to AccessibilityInfo docs facebook/react-native-website#3279

Merged

NOUIY mentioned this pull request Oct 25, 2022

[Snyk] Upgrade react-native from 0.63.3 to 0.70.2 NOUIY/react-native-macos#857

Open

NOUIY mentioned this pull request Nov 3, 2022

[Snyk] Upgrade react-native from 0.63.3 to 0.70.3 NOUIY/react-native-macos#887

Open

NOUIY mentioned this pull request Nov 16, 2022

[Snyk] Upgrade react-native from 0.63.3 to 0.70.4 NOUIY/react-native-macos#917

Open

snyk-bot mentioned this pull request Nov 28, 2022

[Snyk] Upgrade react-native from 0.63.3 to 0.70.5 NOUIY/react-native-macos#924

Open

cipolleschi mentioned this pull request Nov 1, 2023

[RN][CI]Update node installation on debian (0.70) #41278

Closed

cipolleschi mentioned this pull request Jan 8, 2024

[0.70][RN][General] Migrate boost download url away from JFrog #42178

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add support for "Prefer Cross-Fade Transitions" into AccessibilityInfo #34406

feat: Add support for "Prefer Cross-Fade Transitions" into AccessibilityInfo #34406

gabrieldonadel commented Aug 13, 2022 •

edited

Loading

analysis-bot commented Aug 13, 2022 •

edited

Loading

analysis-bot commented Aug 13, 2022 •

edited

Loading

facebook-github-bot commented Aug 15, 2022

gabrieldonadel commented Aug 16, 2022

cortinico commented Aug 17, 2022

makovkastar Aug 19, 2022

gabrieldonadel Aug 19, 2022

makovkastar commented Aug 19, 2022 •

edited

Loading

gabrieldonadel commented Aug 19, 2022

facebook-github-bot commented Aug 19, 2022

makovkastar Aug 20, 2022

gabrieldonadel Aug 20, 2022

facebook-github-bot commented Aug 22, 2022

gabrieldonadel commented Aug 23, 2022

makovkastar commented Aug 24, 2022

react-native-bot commented Aug 25, 2022

feat: Add support for "Prefer Cross-Fade Transitions" into AccessibilityInfo #34406

feat: Add support for "Prefer Cross-Fade Transitions" into AccessibilityInfo #34406

Conversation

gabrieldonadel commented Aug 13, 2022 • edited Loading

Summary

TODO

Changelog

Test Plan

analysis-bot commented Aug 13, 2022 • edited Loading

analysis-bot commented Aug 13, 2022 • edited Loading

facebook-github-bot commented Aug 15, 2022

gabrieldonadel commented Aug 16, 2022

cortinico commented Aug 17, 2022

makovkastar Aug 19, 2022

Choose a reason for hiding this comment

gabrieldonadel Aug 19, 2022

Choose a reason for hiding this comment

makovkastar commented Aug 19, 2022 • edited Loading

gabrieldonadel commented Aug 19, 2022

facebook-github-bot commented Aug 19, 2022

makovkastar Aug 20, 2022

Choose a reason for hiding this comment

gabrieldonadel Aug 20, 2022

Choose a reason for hiding this comment

facebook-github-bot commented Aug 22, 2022

gabrieldonadel commented Aug 23, 2022

makovkastar commented Aug 24, 2022

react-native-bot commented Aug 25, 2022

gabrieldonadel commented Aug 13, 2022 •

edited

Loading

analysis-bot commented Aug 13, 2022 •

edited

Loading

analysis-bot commented Aug 13, 2022 •

edited

Loading

makovkastar commented Aug 19, 2022 •

edited

Loading