Opacity transition on animated state on react-native-web

[bennettfrazier]

I am running into an issue with opacity on react-native-web, starting with this example:
https://github.com/expo/examples/tree/master/with-moti

...and then swapping the code from the animate presence on the docs example page.

import React, { useReducer } from "react";
import { StyleSheet, Pressable } from "react-native";

import { MotiView, AnimatePresence } from "moti";

function Shape() {
  return (
    <MotiView
      from={{
        opacity: 0.001,
        scale: 0.001,
      }}
      animate={{
        opacity: 1,
        scale: 1,
      }}
      exit={{
        opacity: 0.002,
        scale: 0.002,
      }}
      style={styles.shape}
    />
  );
}

export default function Presence() {
  const [visible, toggle] = useReducer((s) => !s, true);

  return (
    <Pressable onPress={toggle} style={styles.container}>
      <AnimatePresence>{visible && <Shape />}</AnimatePresence>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  shape: {
    justifyContent: "center",
    height: 250,
    width: 250,
    borderRadius: 25,
    marginRight: 10,
    backgroundColor: "white",
  },
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "row",
    backgroundColor: "#9c1aff",
  },
});

I altered the from / exit to see what value it was landing on when animated in view should be opacity & scale = 1, but it looks like the opacity state is being set back to the 0.001 value in the from state.

See video of my encounter on react-native-web: https://www.loom.com/share/56d4029cbbb64bcaab21dcdfccd095c5

I also tried the useAnimationState fix with no luck there either. The above code works fine on iOS with expo go.

New issue request reference comment:
#85 (comment)

Originally posted by @bennettfrazier in #85 (comment)

[nandorojo]

I believe this is the known issue documented here: https://moti.fyi/web#spring-animations

[bennettfrazier]

@nandorojo thanks! Tested and this works.

The overshootClamping: false on it's own does not resolve based on the above code, but type:timing on its own does do the trick (at least based on the original code example). 🎊

[nandorojo]

Yeah, seems like RNW + Reanimated have this issue in general :/

I think if you force install RNW 0.15.3 it might be fixed.

[bennettfrazier]

@nandorojo yes, the force install to RNW 0.15.3 worked. No longer need overshootClamping or adjusting the type, thanks for the help!

[nandorojo]

Sounds good, maybe we can add that to the docs

[bennettfrazier]

Just made a fork to add to docs, although as I updated to the latest RNW version (0.17.1), the issue is re-introduced again. Not sure where between 0.15.3 and 0.17.1 it happens at though or what was reverted?

[nandorojo]

Yeah see the issue I linked to. RNW reverted it back, which is why the force install is needed. Or you could patch the change, it’s a one liner.