Animations do not run smoothly

[CodeWhisperer]

Description

I created a new React native project, and followed Reanimated's guide to create a simple animation, and the animations are not running smoothly, they are running in fits and starts.

App.tsx:

import React from 'react';
import {Button, StyleSheet, View} from 'react-native';
import Animated, {useSharedValue, withSpring} from 'react-native-reanimated';

export default function App() {
  const width = useSharedValue(100);

  const handlePress = () => {
    width.value = withSpring(width.value + 50);
  };

  return (
    <View style={styles.container}>
      <Animated.View style={{...styles.box, width}} />
      <Button onPress={handlePress} title="Click me" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
  box: {
    height: 100,
    backgroundColor: '#b58df1',
    borderRadius: 20,
    marginVertical: 64,
  },
});

babel.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

Expected performance in: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/your-first-animation#using-an-animation-function

Error:

Steps to reproduce

1. Start React Native App with: npx react-native@latest init AwesomeProject
2. Install reanimated: npm install react-native-reanimated
3. Add react-native-reanimated/plugin plugin to babel.config.js.
4. Add the code in app.js indicated above
5. Start App with npm start -- --reset-cache

Snack or a link to a repository

None

Reanimated version

3.5.4

React Native version

0.72.4

Platforms

Android

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[m-bert]

Hi @CodeWhisperer! I've just created two new apps, one with RN 0.72.5 and second with 0.72.4 (since that's the version you specified). Both work as expected. Could you please provide more details? Maybe you have enabled reduced motion in your device settings?

[CodeWhisperer]

@m-bert You were right, by default my device's motion was disabled.

I was using a Pixel 5 emulator with android API 33.

To solve it I have followed the following steps:

I have opened "Settings" on my Android device.

I scrolled down and looked for the section called "Accessibility" or "Accessibility and Usability."

Within the Accessibility section, I have looked for an option that relates to "movement" or "animations". This option may vary depending on the version of Android and the customization layer of your device. Some examples of motion-related option names might be "Reduce Motion" or "Reduce Animations." Tap this option.

And I had an option activated, by deactivating it, closing the emulator and running the application again, it worked correctly for me. Thank you so much!

[m-bert]

I'm glad I could help 😄