Changes to state not updating animation

[kylegillen]

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

[nandorojo]

Can you see what happens with rc.0?

[kylegillen]

My bad. It does work with rc.0. Thanks.

It looks like they just released 2.0.0 stable though https://github.com/software-mansion/react-native-reanimated/releases/tag/2.0.0

[nandorojo]

Should work with stable.

[antoinefotso]

I just installed reanimated 2.0.0 , i have the same problem , changing state has no effect but it works when i use useAnimationState

[nandorojo]

Hmm, I wonder if reanimated is enforcing a dependency array more strongly in later versions.

[nandorojo]

Does useAnimatedStyle from reanimated 2 work with state changes? Or do you need to use the dependency array?

[turker0]

Does useAnimatedStyle from reanimated 2 work with state changes? Or do you need to use the dependency array? It should. Dependencies here may be: undefined(argument skipped) - worklet will be rebuilt if there is any change in it's body or any values from it's closure(variables from outer scope used in worklet),

[thomijn]

I have the same issue, is there a fix?

[nandorojo]

I can get to this when expo releases SDK 41 with v2 support. If someone using v2 stable could figure out the answer to my question above, it'd make it a lot easier.

My hunch is that there's a dependency array addition, and Moti isn't using the dependency array.

[thomijn]

useAnimatedStyle just instantly crashes the app for me, with or without dependency array.

[nandorojo]

When using reanimated directly, or just with Moti?

[thomijn]

reanimated directly

[nandorojo]

Could you open an issue there and link it to this one?

Are you sure you followed the instructions and have the Babel plugin?

[phamfoo]

I think this https://github.com/software-mansion/react-native-reanimated/pull/1660 is the change that's causing the issue. The shared value will now stay the same even when we pass a new initial value to useSharedValue (this is similar to useState).

[NischayaSharma]

I think this software-mansion/react-native-reanimated#1660 is the change that's causing the issue. The shared value will now stay the same even when we pass a new initial value to useSharedValue (this is similar to useState).

So is there a solve to this yet? Or a way to circumvent it. because i really need animation based on change in state.

[nandorojo]

I'll investigate this.

[nandorojo]

Please try this:

yarn add moti@next

It should install 0.6.2 which has the fix. Please confirm here that it works.

[NischayaSharma]

Yes, it is working now, thanks a bunch ❤️.

On Sat, 13 Mar, 2021, 9:00 pm Fernando Rojo, @.***> wrote:

Please try this:

yarn add @.***

It should install 0.6.2 which has the fix. Please confirm here that it works.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/nandorojo/moti/issues/30#issuecomment-798513647, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKZ2HHZROGEZ74IPV2RTJFTTDNZHPANCNFSM4YT7RRHA .

[thomijn]

Thanks a lot!

[nandorojo]

Published to latest version in 0.6.4: yarn add moti.

[SathishSaminathanOfficial]

Hi @nandorojo background color is notupdating in Moti view

[nandorojo]

This is a reanimated bug. I already opened an issue https://github.com/software-mansion/react-native-reanimated/issues/2751

[SathishSaminathanOfficial]

translateX is working based on the state change but backgroundColor and color properties are not working @nandorojo could you please help

[nandorojo]

I just answered your question.

[SathishSaminathanOfficial]

Thanks @nandorojo