Open BrodaNoel opened 1 month ago
Hey @BrodaNoel! Nice to see you back and diving into the depths of animations with us. 🎢 I remember our last adventure here. I'll be taking a look at this motion-related conundrum you've unearthed and will circle back with a full answer shortly. Hang tight!
Seems like there are some "1 line" fixes here: https://docs.swmansion.com/react-native-reanimated/docs/guides/accessibility/
Good find!
It seems that standard iOS carousels still function as animated (sliding) carousels even with "Reduce motion" enabled. (For example, swiping between home screens of icons still animates; swiping between photos in the standard Photos app still animates.)
IMO, to follow this paradigm, react-native-reanimated-carousel should also still function as normal-- even with "Reduce motion" enabled.
To address the issue with react-native-reanimated-carousel
not functioning correctly when "Reduce Motion" is enabled on iOS devices, consider the following steps:
Detect "Reduce Motion" Setting: Use the AccessibilityInfo
API in React Native to check if the user has enabled "Reduce Motion". Adjust your application's behavior based on this setting to ensure a smooth user experience.
Adjust Carousel Behavior: If "Reduce Motion" is detected, modify the carousel's behavior. This might involve changing how animations are handled or how indexes are computed to ensure the carousel functions correctly without relying on full animations.
Implement Non-Animated Fallbacks: For users with "Reduce Motion" enabled, provide a fallback experience that does not depend on animations. This could mean instant transitions or a different method of indicating carousel progress.
Ensure Compatibility and Update: Make sure you're using the latest versions of react-native-reanimated
and react-native-reanimated-carousel
that are compatible with SDK 51. Newer versions may offer better support for handling "Reduce Motion".
Test Thoroughly: Test your application with "Reduce Motion" enabled to ensure all functionalities, especially the carousel, work as intended. Pay close attention to how the carousel behaves and ensure it computes the correct values.
Consult Documentation and Community: Look into the official documentation and community forums for any guidance on handling "Reduce Motion" with react-native-reanimated
and react-native-reanimated-carousel
.
By following these steps, you can enhance the accessibility and user experience of your application for users who have "Reduce Motion" enabled, ensuring that the carousel functions correctly and animations do not end prematurely.
To continue the conversation, mention @dosu.
Today I upgraded to SDK 51 and I got a Warning from
[Reanimate]
who says: "Some animations may be disabled because your phone disabled animations"Well... In my iPhone, I went to
Settings > Accesibility > Motion
, and I've found that I disabled it in order to avoid wasting battery.I enabled animations, and most of the issues dissapeared, like https://github.com/dohooo/react-native-reanimated-carousel/issues/604 and https://github.com/dohooo/react-native-reanimated-carousel/issues/590 (and probably A LOT of other issues).
So, what happens, is that when the iPhone has motion disabled, the animations ends automatically, so, some times, they move from "20%" (animation progress) to "100%", which will end up breaking the
computedRealIndexWithAutoFillData
function, because thecomputedRealIndexWithAutoFillData
gets called before it realized that the animation reached "100%", thus, we get a wrong value.Consider taking a look at this condition, because it may be the reason of a lot of bugs.