Skip to content

[iOS] Entering Animations not triggering when reduced motion is on #6863

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.

Sign up for GitHub

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

Jump to bottom
Closed
mobinni opened this issue Dec 31, 2024 · 1 comment · Fixed by #6864
Closed

[iOS] Entering Animations not triggering when reduced motion is on #6863

mobinni opened this issue Dec 31, 2024 · 1 comment · Fixed by #6864
Assignees
@piaskowyk
Labels
Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snippet of code, snack or repo is provided

Comments

@mobinni
Copy link

mobinni commented Dec 31, 2024 •
edited
Loading

Description

In prior version (3.6.+) of reanimated when you turned on reduced motion on iOS the default behaviour would be to still fire the animation if you did not supply .reduceMotion(ReduceMotion.Never); which would allow the view to render.

In 3.16.3 we're noticing that when you turn on reduced motion the initial entering animation gets completely ignored and subsequently nothing gets rendered.

Steps to reproduce

  1. Turn on reduced motion on iOS
  2. Scan the QR code for the expo snack below
  3. Nothing renders

Turn off reduced motion and do the same and the content renders correctly

Snack or a link to a repository

https://snack.expo.dev/@mobinni/reduced-motion-reanimated-not-triggering

Reanimated version

3.16.3

React Native version

0.76.5

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Release app & production bundle

Device

Real device

Device model

iPhone 13, 14 Pro, 15

Acknowledgements

Yes
@github-actions github-actions bot added Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snippet of code, snack or repo is provided labels Dec 31, 2024
@piaskowyk piaskowyk self-assigned this Jan 2, 2025
@piaskowyk piaskowyk mentioned this issue Jan 2, 2025
Merged
@romainwurtz
Copy link

We are seeing the same issue.

github-merge-queue bot pushed a commit that referenced this issue Jan 9, 2025
@piaskowyk
Fix respecting Reduced Motion Settings in Layout Animations on Fabric (…
21eea19 
…#6864)

## Summary

This PR addresses the issue of respecting reduced motion settings for
Layout Animations on Fabric. In addition it avoids double initialisation
of entering animation for Fabric.

Fixes
#6863

### With Disabled Reduced Motion


https://github.com/user-attachments/assets/af80a2e7-dbac-453a-ba1b-fca3549245fb

### With Enabled Reduced Motion
| before | after |
| --- | --- |
| <video
src="https://github.com/user-attachments/assets/caa7f8f0-4980-43a0-9433-880bf44d8c7d"
/> | <video
src="https://github.com/user-attachments/assets/0a9c04a0-66ab-4430-aa33-0cd305193ffe"
/> |

## Test plan

<details>
<summary>Test Example code</summary>

```js
import { Text, StyleSheet, View, Button } from 'react-native';
import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated';

import React from 'react';

export default function EmptyExample() {
  const [toggle, setToggle] = React.useState(true);
  return (
    <View style={styles.container}>
      <Button title="Toggle" onPress={() => setToggle((prev) => !prev)} />
      {toggle && 
      <Animated.Text 
        entering={FadeIn.duration(2000)} 
        exiting={FadeOut.duration(1000)}
      >
        Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, 
      </Animated.Text> }
      <Animated.Text 
        layout={LinearTransition.duration(1000)}
      >
        Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1
      </Animated.Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

```

</details>
tjzel pushed a commit that referenced this issue Feb 17, 2025
@piaskowyk @tjzel
Fix respecting Reduced Motion Settings in Layout Animations on Fabric (…
69c540e 
…#6864)

## Summary

This PR addresses the issue of respecting reduced motion settings for
Layout Animations on Fabric. In addition it avoids double initialisation
of entering animation for Fabric.

Fixes
#6863

### With Disabled Reduced Motion


https://github.com/user-attachments/assets/af80a2e7-dbac-453a-ba1b-fca3549245fb

### With Enabled Reduced Motion
| before | after |
| --- | --- |
| <video
src="https://github.com/user-attachments/assets/caa7f8f0-4980-43a0-9433-880bf44d8c7d"
/> | <video
src="https://github.com/user-attachments/assets/0a9c04a0-66ab-4430-aa33-0cd305193ffe"
/> |

## Test plan

<details>
<summary>Test Example code</summary>

```js
import { Text, StyleSheet, View, Button } from 'react-native';
import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated';

import React from 'react';

export default function EmptyExample() {
  const [toggle, setToggle] = React.useState(true);
  return (
    <View style={styles.container}>
      <Button title="Toggle" onPress={() => setToggle((prev) => !prev)} />
      {toggle && 
      <Animated.Text 
        entering={FadeIn.duration(2000)} 
        exiting={FadeOut.duration(1000)}
      >
        Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, 
      </Animated.Text> }
      <Animated.Text 
        layout={LinearTransition.duration(1000)}
      >
        Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1
      </Animated.Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

```

</details>
tjzel pushed a commit that referenced this issue Feb 17, 2025
@piaskowyk @tjzel
Fix respecting Reduced Motion Settings in Layout Animations on Fabric (…
aa29fd8 
…#6864)

## Summary

This PR addresses the issue of respecting reduced motion settings for
Layout Animations on Fabric. In addition it avoids double initialisation
of entering animation for Fabric.

Fixes
#6863

### With Disabled Reduced Motion


https://github.com/user-attachments/assets/af80a2e7-dbac-453a-ba1b-fca3549245fb

### With Enabled Reduced Motion
| before | after |
| --- | --- |
| <video
src="https://github.com/user-attachments/assets/caa7f8f0-4980-43a0-9433-880bf44d8c7d"
/> | <video
src="https://github.com/user-attachments/assets/0a9c04a0-66ab-4430-aa33-0cd305193ffe"
/> |

## Test plan

<details>
<summary>Test Example code</summary>

```js
import { Text, StyleSheet, View, Button } from 'react-native';
import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated';

import React from 'react';

export default function EmptyExample() {
  const [toggle, setToggle] = React.useState(true);
  return (
    <View style={styles.container}>
      <Button title="Toggle" onPress={() => setToggle((prev) => !prev)} />
      {toggle && 
      <Animated.Text 
        entering={FadeIn.duration(2000)} 
        exiting={FadeOut.duration(1000)}
      >
        Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, Title 1, 
      </Animated.Text> }
      <Animated.Text 
        layout={LinearTransition.duration(1000)}
      >
        Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1, Paragraph 1
      </Animated.Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

```

</details>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@piaskowyk piaskowyk

Labels
Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snippet of code, snack or repo is provided
Projects
None yet
Milestone
No milestone
3 participants
@romainwurtz @mobinni @piaskowyk