Help getting started with layout animation doesn't work

[EmilScherdin]

Hello!

I'm trying to upgrade our version of reanimated from 1 to 2 but I'm running into issues getting the layout animation on entering and exit to work properly. I've followed all instructions and removed some other npm packages but it seems like something else is missing. I've managed to get the useAnimationStyle to work but the layout animations don't work.

Code is basically pasted from the example app where it works so I assume some issue with packages interfering but I can't seem to figure out what's happening... Glad to hear any ideas of what I'm doing wrong?

(Tried reinstalling, pod deintegrate, pod install, and cleaning cache..)

Video of what works and doesn't...
First two uses layout animation and doesn't work, the last one is useAnimatedStyle and does work...
https://user-images.githubusercontent.com/6998447/157906580-220e39b6-6fb3-40e2-99c1-5f6b812c16dc.mp4

Code

import Animated, {
Keyframe,
Easing,
FadeIn,
FadeInRight,
FadeInLeft,
useSharedValue, 
useAnimatedStyle,
withTiming,
} from 'react-native-reanimated';


const AnimatedBlock = ({
name,
animatedStyle,
defaultShow,
}) => {
const [show, setShow] = useState(defaultShow);
return (
  <View style={styles.animatedBox}>
    {show ? (
      <TouchableWithoutFeedback onPress={() => setShow(!show)}>
        <Animated.View style={styles.animatedBlock} {...animatedStyle}>
          <Text style={styles.animatedText}>{name}</Text>
        </Animated.View>
      </TouchableWithoutFeedback>
    ) : null}
    {!show ? (
      <Animated.View
        entering={
          'entering' in animatedStyle ? undefined : FadeIn.delay(350)
        }>
        <TouchableOpacity
          style={styles.animatedBlockPlaceholder}
          onPress={() => setShow(!show)}>
          <Text style={styles.animatedTextPlaceholder}>{name}</Text>
        </TouchableOpacity>
      </Animated.View>
    ) : null}
  </View>
);
};

function KeyframeAnimation() {
const [show, setShow] = useState(false);
const enteringAnimation = new Keyframe({
  from: {
    originX: 50,
    transform: [{ rotate: '45deg' }, { scale: 0.5 }],
  },
  30: {
    transform: [{ rotate: '-90deg' }, { scale: 2 }],
  },
  50: {
    originX: 70,
  },
  100: {
    originX: 0,
    transform: [{ rotate: '0deg' }, { scale: 1 }],
    easing: Easing.quad,
  },
})
  .duration(2000)
  .withCallback((finished) => {
    'worklet';
    if (finished) {
      console.log('callback');
    }
  });
const exitingAnimation = new Keyframe({
  0: {
    opacity: 1,
    originX: 0,
  },
  30: {
    originX: -50,
    easing: Easing.exp,
  },
  to: {
    opacity: 0,
    originX: 500,
  },
}).duration(2000);
return (
  <View style={{ marginTop: 40, backgroundColor: '#f3f3f3' }}>
    <Button
      title="animate"
      onPress={() => {
        setShow((last) => !last);
      }}
    />
    <View
      style={{ height: 200, alignItems: 'center', justifyContent: 'center' }}>
      {show && (
        <Animated.View
          entering={enteringAnimation}
          exiting={exitingAnimation}
          style={{
            height: 50,
            width: 100,
            backgroundColor: 'blue',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        />
      )}
    </View>
  </View>
);
}

function AnimatedStyleUpdateExample() {
const randomWidth = useSharedValue(10);

const config = {
  duration: 500,
  easing: Easing.bezierFn(0.5, 0.01, 0, 1),
};

const style = useAnimatedStyle(() => {
  return {
    width: withTiming(randomWidth.value, config),
  };
});

return (
  <View
    style={{
      flex: 1,
      flexDirection: 'column',
    }}>
    <Animated.View
      style={[
        { width: 100, height: 80, backgroundColor: 'black', margin: 30 },
        style,
      ]}
    />
    <Button
      title="toggle"
      onPress={() => {
        randomWidth.value = Math.random() * 350;
      }}
    />
  </View>
);
}

const AnimatedApp = () => {
BootSplash.hide();
return (
  <View style={{flex: 1, backgroundColor: 'white', paddingTop: 50}}>
     <AnimatedBlock
        name="FadeInRight"
        animatedStyle={{ entering: FadeInRight }}
      />
      <AnimatedBlock
        name="FadeInLeft"
        animatedStyle={{ entering: FadeInLeft }}
      />
      <KeyframeAnimation />
      <AnimatedStyleUpdateExample />
  </View>
)
}

const styles = StyleSheet.create({

groupText: {
  fontSize: 20,
  paddingTop: 5,
  paddingLeft: 5,
  paddingBottom: 5,
},
animatedBlock: {
  height: 60,
  width: 300,
  borderWidth: 3,
  borderColor: '#001a72',
  backgroundColor: '#001a72',
  alignItems: 'center',
  justifyContent: 'center',
},
animatedTextPlaceholder: {
  color: '#001a72',
  fontSize: 20,
},
animatedBlockPlaceholder: {
  height: 60,
  width: 300,
  borderWidth: 3,
  borderColor: '#001a72',
  alignItems: 'center',
  justifyContent: 'center',
  borderStyle: 'dashed',
},
animatedText: {
  color: '#ffffff',
  fontSize: 20,
},
animatedBox: {
  padding: 5,
  alignItems: 'center',
},
});

export default AnimatedApp;

Packages

  "@babel/plugin-transform-react-jsx": "^7.17.3",
  "@bugsnag/plugin-react-navigation": "^7.10.0",
  "@bugsnag/react-native": "^7.10.0",
  "@expo/react-native-action-sheet": "^3.8.0",
  "@invertase/react-native-apple-authentication": "^1.1.1",
  "@notifee/react-native": "^3.0.1",
  "@react-native-clipboard/clipboard": "^1.8.5",
  "@react-native-community/async-storage": "^1.4.0",
  "@react-native-community/cameraroll": "^4.0.4",
  "@react-native-community/datetimepicker": "^3.5.2",
  "@react-native-community/google-signin": "^5.0.0",
  "@react-native-community/masked-view": "^0.1.10",
  "@react-native-community/netinfo": "^5.9.7",
  "@react-native-firebase/app": "^12.7.3",
  "@react-native-firebase/messaging": "^12.7.3",
  "@react-native-picker/picker": "^2.2.1",
  "@react-navigation/bottom-tabs": "^5.11.7",
  "@react-navigation/native": "^5.9.2",
  "@react-navigation/stack": "^5.14.2",
  "@segment/analytics-react-native": "^1.4.4",
  "axios": "0.21.1",
  "babel-plugin-transform-remove-console": "^6.8.5",
  "base-64": "^0.1.0",
  "countries-and-timezones": "^2.3.1",
  "country-data": "^0.0.31",
  "crypto-js": "^3.1.9-1",
  "currency-formatter": "^1.5.3",
  "date-fns": "^2.28.0",
  "delay": "^4.3.0",
  "email-validator": "^2.0.4",
  "google-libphonenumber": "^3.2.13",
  "graphql": "^15.5.3",
  "iban": "^0.0.14",
  "interpolate": "0.1.0",
  "lodash": "^4.17.21",
  "lottie-react-native": "^4.0.2",
  "node-gettext-json": "1.1.0",
  "prop-types": "^15.7.2",
  "punycode": "^2.1.1",
  "react": "17.0.2",
  "react-native": "0.66.4",
  "react-native-adjust": "^4.29.4",
  "react-native-background-downloader": "^2.3.4",
  "react-native-bootsplash": "^3.2.0",
  "react-native-permissions": "^2.0.2",
  "react-native-reanimated": "^2.4.1",
  "react-native-screens": "^3.13.1",
  "react-native-encrypted-storage": "^4.0.2",
  "react-native-image-gallery": "^2.1.5",
  "react-query": "2.26.4",
  "react-native-parsed-text": "^0.0.21",
  "react-native-gesture-handler": "^2.3.1",
  "react-redux": "7.1.1",
  "redux": "4.1.2",
  "redux-actions": "2.6.5",
  "react-native-keychain": "^7.0.0",
  "redux-devtools-extension": "^2.13.8",
  "redux-storage": "^4.1.2",
  "redux-storage-decorator-debounce": "^1.1.3",
  "redux-storage-decorator-filter": "^1.1.8",
  "redux-thunk": "2.3.0",
  "reselect": "^4.0.0",
  "rn-fetch-blob": "0.12.0",
  "route-parser": "0.0.5",
  "subscriptions-transport-ws": "^0.9.18",
  "react-native-vector-icons": "6.6.0",
  "tipsi-stripe": "^9.1.4",
  "typographic-apostrophes": "^1.1.1",
  "typographic-apostrophes-for-possessive-plurals": "^1.0.5",
  "typographic-ellipses": "^1.0.11",
  "typographic-em-dashes": "^1.0.2",
  "typographic-en-dashes": "^1.0.1",
  "typographic-quotes": "^2.0.1",
  "typographic-single-spaces": "^1.0.2",
  "uuid": "3.4.0",
  "zustand": "^3.2.0"

Babel config

  production: {
    plugins: [
      'transform-remove-console',
      'react-native-reanimated/plugin',
    ],
  },
},

Any help or ideas on what to do would be very helpful!

[EmilScherdin]

Found it. I missed that you can have the remote chrome debugging active with the animation; it worked perfectly once I turned that off.