[2.0.0-rc.0] withSpring doesn't animate inside of useAnimatedStyle

Description

When I update a style value using withSpring inside of useAnimatedStyle in 2.0.0-rc.0, it doesn’t animate.

Screenshots

Video here.

Notice that when I change the style from withSpring to withTiming, it works fine.

Steps To Reproduce

1. EXPO_BETA=1 expo init bug
2. cd bug && yarn add react-native-reanimated@2.0.0-rc.0
3. Follow reanimated installation steps from the expo docs.
4. Add the repro from below to your index file.

Expected behavior

Clicking the button should cause the box to animate to its next state.

Actual behavior

If you use withSpring inside of useAnimatedStyle, it won’t animate to the next state. Instead, it changes the value without an animation.

Snack or minimal code example

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

export default function AnimatedStyleUpdateExample() {
  const size = useSharedValue(200)

  const style = useAnimatedStyle(() => ({
    width: withTiming(size.value), // this will animate
    height: withSpring(size.value) // this will not
  }))

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, style]} />
      <Button
        title="toggle"
        onPress={() => {
          const randomSize = size.value * (1 + Math.random())

          if (size.value > 200) {
            size.value = 150
          } else {
            size.value = randomSize
          }
        }}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  box: { justifyContent: 'center', backgroundColor: 'blue' },
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'column'
  }
})

If you prefer, you can close this repo, run yarn start, and open Bug.tsx.

(Expo Snack doesn’t support Reanimated v2 – sorry!)

Added context

If I use withSpring when I mutate the value, it works fine.

// ✅ this works
const size = useSharedValue(200)

const style = useAnimatedStyle(() => ({
  width: size.value,
  height: size.value
}))

const onPress = () => {
  const randomSize = size.value * (1 + Math.random())

  if (size.value > 200) {
    size.value = withSpring(150)
  } else {
    size.value = withSpring(randomSize)
  }
}

However, if I mutate the shared value directly, and then apply withSpring inside of useAnimatedStyle, it does not work.

// 🚨 this does not work
const size = useSharedValue(200)

const style = useAnimatedStyle(() => ({
  width: withSpring(size.value),
  height: withSpring(size.value)
}))

const onPress = () => {
  const randomSize = size.value * (1 + Math.random())

  if (size.value > 200) {
    size.value = 150
  } else {
    size.value = randomSize
  }
}

Package versions

package.json

{
  "version": "39.0.0",
  "dependencies": { 
    "expo": "^40.0.0-beta.5",
    "expo-status-bar": "~1.0.3", 
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.0.tar.gz",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-reanimated": "2.0.0-rc.0",
    "react-native-web": "~0.13.12", 
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "@types/lodash.set": "^4.3.6",
    "babel-preset-expo": "8.3.0", 
  },
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo web",
    "eject": "expo eject"
  },
  "private": true
}

app.json

{
  "expo": {
    "experiments": {
      "turboModules": true
    }
  }
}

• React: 16.13.1
• React Native: https://github.com/expo/react-native/archive/sdk-40.0.0.tar.gz
• React Native Reanimated: 2.0.0-rc.0
• NodeJS: v14.2.0

Thank you!

[karol-bisztyga]

This fixed the issue https://github.com/software-mansion/react-native-reanimated/pull/1496 It is going to be included in the next release. You can get a package of the current master built daily here.

[jakub-gonet]

Yeah, seems like I forgot to edit JS interpolation 😅

Below is easier to understand version:

PREV='1.9.0'; CURR='1.13.0'; git diff --name-only "$PREV" "$CURR" | egrep '(android/.*)|(ios/.*)'

You just plug the previous and current version of Reanimated into those variables and everything should work (CURR='HEAD' uses the latest commit from the repo). You just need to run it in the Reanimated repository (git cloned)