Carousel not working while motion is disabled on the device

[BrodaNoel]

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 #604 and #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 the computedRealIndexWithAutoFillData 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.

[dosubot]

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!

[BrodaNoel]

Seems like there are some "1 line" fixes here: https://docs.swmansion.com/react-native-reanimated/docs/guides/accessibility/

[nmassey]

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.

[dosubot]

To address the issue with react-native-reanimated-carousel not functioning correctly when "Reduce Motion" is enabled on iOS devices, consider the following steps:

1. 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.

2. 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.

3. 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.

4. 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".

5. 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.

6. 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.

Details

Sources

• src/hooks/useOnProgressChange.ts
• src/utils/computed-with-auto-fill-data.ts
• src/utils/deal-with-animation.ts
• src/hooks/useCarouselController.tsx
• src/components/BaseLayout.tsx

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.