Android full CPU usage with simple repeat animation

[kristian-nst]

Description

iOS is fine, no CPU spike.
Adding this component to a screen jumps the CPU from a normal/stable ~20% emulator cpu usage. As soon as I add this to, it jumps to 100% (no other code changes)
(Macbook Pro - M4 Max)

Screenshots

vs

Info

• RN 0.76.3
• Expo 52.0.17
• Android Studio Ladybug | 2024.2.1 Patch 2
• Android Emulator with Android 15 (API 35) - arm64
• openjdk version "22.0.2" - Corretto 64bit
• reanimated 3.16.1

Currently using newArchitecture=false

Steps to reproduce

// @refresh reset
import React, { memo, type ReactElement } from 'react'
import { StyleSheet, View } from 'react-native'
import Animated, {
  Easing,
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
} from 'react-native-reanimated'

import { Icon } from '~/components/atoms/Icon'

type TSpinnerProps = {
  size?: 'small' | 'large'
  variant?: 'primary' | 'secondary' | 'tertiary'
}

export const Spinner = memo(
  ({ size = 'small', variant = 'primary' }: TSpinnerProps): ReactElement => {
    const isSmall = size === 'small'

    const variantColors: Record<string, string> = {
      primary: '#C32000',
      secondary: '#FFFFFF',
      tertiary: '#344450',
    }

    const rotation = useSharedValue(0)

    rotation.value = withRepeat(
      withTiming(360, {
        duration: 600,
        easing: Easing.linear,
      }),
      -1,
    )

    const animatedStyle = useAnimatedStyle(() => {
      return {
        transform: [{ rotate: `${rotation.value}deg` }],
      }
    })

    return (
      <View style={[styles.container, isSmall ? styles.small : styles.large]}>
        <Animated.View style={[styles.spinner, animatedStyle]}>
          <Icon
            name="spinner"
            size={isSmall ? 24 : 64}
            fill={variantColors[variant]}
          />
        </Animated.View>
      </View>
    )
  },
)

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  small: {
    height: 24,
    width: 24,
  },
  large: {
    height: 64,
    width: 64,
  },
  spinner: {
    position: 'absolute',
  },
})

Snack or a link to a repository

https://snack.expo.dev/@kristian-nst/repeat-animation-cpu?platform=android

Reanimated version

3.16.1

React Native version

0.76.3

Platforms

Android

JavaScript runtime

Hermes

Workflow

None

Architecture

Paper (Old Architecture)

Build type

Debug app & dev bundle

Device

Android emulator

Device model

Pixel 8 Pro

Acknowledgements

Yes

[hirbod]

Likely unrelated, but you should not read or write .value in render.
Move to useEffect. https://snack.expo.dev/@hirbod/repeat-animation-cpu?platform=android

Just a side note, likely not gonna change your findings, but maybe worth a try.