moti: Changes to state not updating animation

Hi. I’m following along with the documentation, and there’s an example that reads:

<View animate={{ opacity: isLoading ? 1 : 0 }} />

I’ve got the following code which has a button that toggles a piece of state, and a box that should fade in / out — the state is changing but the animation is not, neither on simulator nor device.

Am I doing this the correct way?

• Bare Expo Workflow
• “moti”: “^0.5.7”,
• “react-native-reanimated”: “^2.0.0-rc.3”

import React, { useState, useEffect } from 'react'
import { Text, Button } from 'react-native'
import styled from 'styled-components/native'
import tw from 'tailwind-rn'
import { View as MotiView } from 'moti'

import { SCREEN } from '@/utils/constants'

interface Props {
  isOpen: boolean
}

const VideoPlayer = (props: Props) => {
  const [isOpen, setOpen] = useState(false)

  return (
    <Container>
      <MotiView
        style={{
          height: 200,
          width: 200,
          backgroundColor: 'red',
          justifyContent: 'center',
          alignItems: 'center',
        }}
        animate={{ opacity: isOpen ? 0 : 1 }}
        transition={{
          delay: 100,
          type: 'timing',
          duration: 350,
        }}
      >
        <Text>Video Player</Text>
      </MotiView>
      <Button title="Animate Me" onPress={() => setOpen(true)} />
    </Container>
  )
}

const Container = styled(MotiView)`
  ${tw(`absolute bg-blue-100 justify-center items-center`)};
  width: ${SCREEN.W}px;
  height: ${SCREEN.H}px;
`

export default VideoPlayer