Skip to main content
Logo Appt Light

Reduced animations on React Native

Content which conveys a sense of motion can be a barrier for users. Certain groups, particularly those with attention deficit disorders, find moving content distracting, making it difficult for them to concentrate on other parts of your app. You should provide functionality to pause, stop or hide content which moves, blinks or scrolls automatically.

In React Native, you can use AccessibilityInfo to check get the value of isReduceMotionEnabled. If the value is true, you could choose to disable (non-essential) animations in your app.

import { AccessibilityInfo } from "react-native";

if (AccessibilityInfo.isReduceMotionEnabled()) {
    // Disable animations
}

Feedback?

Let us know!