Opacity transition on animated state on react-native-web
See original GitHub issueI 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: https://github.com/nandorojo/moti/issues/85#issuecomment-907274095
_Originally posted by @bennettfrazier in https://github.com/nandorojo/moti/issues/85#issuecomment-907272999_
Issue Analytics
- State:
- Created 2 years ago
- Comments:7 (7 by maintainers)
Top GitHub Comments
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.
I believe this is the known issue documented here: https://moti.fyi/web#spring-animations