Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Animation issue (some delay appears)

See original GitHub issue

Is there an existing issue for this?

I have searched the existing issues

Current Behavior

Some animations have bigger delay than expected

Expected Behavior

No animation delay

Steps To Reproduce

import { View as AnimationView } from 'moti'

const showBlock = () => {
    const [isExpanded, setIsExpanded] = useState(false)

<Pressable
				onPress={() => {
					setIsExpanded(!isExpanded)
				}}
			>
				<Box>
					<Text>External Block</Text>
				</Box>
				{isExpanded && (
					<AnimationView
						from={{ opacity: 0 }}
						animate={{ opacity: 1 }}
						transition={{ type: 'timing', duration: 180 }}
					>
						<Box>
							<Text>Internal Block</Text>
						</Box>
					</AnimationView>
				)}
			</Pressable>
}

Versions

- Moti: 0.20
- Reanimated: 2.9.1
- React Native: 0.69.6

Screenshots

https://user-images.githubusercontent.com/26281760/197521394-7878f201-c3e3-407b-941f-494e5482087e.mov

Reproduction

Reproducible very often

Issue Analytics

State:
Created a year ago
Comments:6 (2 by maintainers)

Top GitHub Comments

2reactions

pochampagnecommented, Nov 17, 2022

Any update on this ?

I’m having a similar issue. I created a simple component to reproduce. As seen on the video, sometime when I toggle my state to switch the visible component, the animation isn’t trigger, so the AnimatesView component remain in the “from” state, so with an opacity of 0.

const AnimatedView = ({ children }) => (
  <MotiView
    from={{
      opacity: 0,
      translateY: 20,
    }}
    animate={{
      opacity: 1,
      translateY: 0,
    }}
    exit={{
      opacity: 0,
      translateY: 20,
    }}
    transition={{
      type: 'timing',
      duration: 200,
    }}
  >
    {children}
  </MotiView>
)

export default () => {
  const [isOn, setIsOn] = React.useState<boolean>(true)

  const toggle = () => setIsOn((on) => !on)

  return (
    <View>
      <Pressable onPress={toggle}>
        <Text>Click me to toggle</Text>
      </Pressable>
      <AnimatePresence exitBeforeEnter>
        {isOn && (
          <>
            <Text>Toggle on outside MotiView</Text>
            <AnimatedView key="on">
              <Text>Toggle is on baby</Text>
            </AnimatedView>
          </>
        )}
        {!isOn && (
          <>
            <Text>Toggle off outside MotiView</Text>
            <AnimatedView key="off">
              <Text>Toggle is off sadly</Text>
            </AnimatedView>
          </>
        )}
      </AnimatePresence>
    </View>
  )
}