moti: Some bug reports

I tried to create a snack but It gave errors about reanimated 2 when I added moti.

import {AnimatePresence} from "moti";
import React, {useState} from "react";
import {Button, Text, TouchableOpacity} from "react-native";

const test = () => {
  const [presence, toggle] = React.useReducer((s) => !s, true)
  return (
         <>
            <AnimatePresence>
                {presence && (
                    <MotiView
                        from={{
                            translateY: -50,
                            rotateX: "-90deg",
                        }}
                        animate={{
                            translateY: 0,
                            rotateX: "0deg",
                        }}
                        exit={{
                            rotateX: "90deg",
                            translateY: -50,
                        }}
                        transition={{
                            type: "timing",
                            duration: 2000,
                        }}
                    >
                        <Text style={{fontSize: 50, color: "red"}}>213</Text>
                    </MotiView>
                )}
            </AnimatePresence> 
            <Button title="press-me" onPress={toggle} />
          </>
)
}
export default test;

using these :

    "moti": "^0.10.1-alpha.1",
    "react-native-reanimated": "~2.1.0",
...
expo sdk 41

If I remove translate here the rotate works and if I remove rotate the translate works, but they don’t both work at the same time and I get a glitch effect instead.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 1
  • Comments: 15 (7 by maintainers)

Commits related to this issue

Most upvoted comments

Fixed in 0.12.0

yarn add moti

Closing for #76

I’ll track this at #76, thanks for letting me know