View model properties not updating on a settled State Machine

[zispidd]

When I do const { value: color, setValue: setColor, error } = useRiveColor('color') value is undefined. Error property is null. And if i do instance.colorProperty('color') - I have a value

But when i do setColor - I receive this value on "error" property. Error: Cannot set value for property "color" because it was not found. Your view model instance may be undefined, or the path may be incorrect.

[zispidd]

This code is just not working for me. useRiveColor and useRiveNumber is not working properly for me. When i'm doing setValue - nothing changes, most values is undefined, for example, i don't have any errors for this state: const { setValue: setRiveState } = useRiveNumber('state', instance), but when i use this function - nothing changes. but if i try const value = instance?.numberProperty('state') - i see a new value here, but the animation does not react to this new value

import { RiveFile, RiveView, useRive, useRiveColor, useRiveFile, useRiveNumber, ViewModelInstance } from '@rive-app/react-native'
import { captureException } from '@sentry/react-native'
import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react'
import { View } from 'react-native'
import { useCSSVariable } from 'uniwind'

export enum LikeState {
  NotLiked = 0,
  Like = 1,
  Liked = 2,
  Unlike = 3
}

interface IProps {
  isLiked: boolean
  size?: number
  strokeWidth?: number
}

export interface LikeIconRef {
  setLiked: (liked: boolean) => void
}

const LikeIcon = forwardRef<LikeIconRef, IProps>(({
  size = 24,
  strokeWidth = 2,
  isLiked
}, ref) => {
  const { riveFile } = useRiveFile('heart')

  const viewModel = useMemo(() => riveFile?.defaultArtboardViewModel(), [riveFile])
  const instance = useMemo(() => viewModel?.createDefaultInstance(), [viewModel])

  const [state, setInternalState] = useState<LikeState>(LikeState.NotLiked)

  const setLiked = (liked: boolean) => {
    const newState = liked ? LikeState.Like : LikeState.Unlike
    if (newState === state) return
    setInternalState(newState)
  }

  useImperativeHandle(ref, () => ({
    setLiked
  }))

  if (!riveFile || !instance) return

  return (
    <Rive
      file={riveFile}
      instance={instance}
      size={size}
      strokeWidth={strokeWidth}
      isLiked={isLiked}
      state={state}
    />
  )
})

interface IRiveProps {
  file: RiveFile
  instance: ViewModelInstance
  size: number
  strokeWidth: number
  isLiked: boolean
  state: LikeState
}

const Rive: React.FC<IRiveProps> = ({
  file,
  instance,
  size,
  strokeWidth,
  isLiked,
  state
}) => {
  const { riveViewRef, setHybridRef } = useRive()

  const color = useCSSVariable('--color-danger')

  const style = useMemo(() => ({
    width: size,
    height: size
  }), [size])

  const riveStyle = useMemo(() => ({
    width: '100%',
    height: '100%'
  } as const), [])

  const { setValue: setColor1 } = useRiveColor('color_1', instance)
  const { setValue: setColor2 } = useRiveColor('color_2', instance)
  const { setValue: setStroke } = useRiveNumber('size', instance)
  const { setValue: setRiveState } = useRiveNumber('state', instance)

  const setState = useCallback((state: LikeState) => {
    setRiveState(state)
  }, [instance, setRiveState])

  useEffect(() => {
    if (riveViewRef) {
      setState(state)
    }
  }, [riveViewRef, state, setState])

  useEffect(() => {
    if (riveViewRef) {
      setDefaultLiked(isLiked)
    }
  }, [riveViewRef, isLiked])

  useEffect(() => {
    if (riveViewRef && color) {
      setColor1(color as string)
      setColor2(color as string)
    }
  }, [riveViewRef, color])

  useEffect(() => {
    if (riveViewRef) {
      setStrokeWidth(strokeWidth)
    }
  }, [riveViewRef, strokeWidth])

  const setStrokeWidth = (width: number) => {
    setStroke(width)
  }

  const setDefaultLiked = useCallback((liked: boolean) => {
    const state = liked ? LikeState.Liked : LikeState.NotLiked
    setState(state)
  }, [setState])

  return (
    <View
      style={style}
      pointerEvents='none'
    >
      <RiveView
        file={file}
        style={riveStyle}
        onError={captureException}
        hybridRef={setHybridRef}
        dataBind={instance}
      />
    </View>
  )
}

export default LikeIcon

[zispidd]

I don't fully understand how this works. If I change something in the rendered component and a hot reload occurs, useRiveNumber and useRiveColor start working.

[HayesGordon]

@zispidd I think you're running into a known issue with our Android and iOS runtimes that require you to force update/draw a frame if the graphic is in a settled state (the state machine is no longer advancing because all animations are finished).

Data binding can be completely decoupled from the view, and at the moment native Android and iOS aren't making these automatic affordances. @mfazekas we need to investigate if we can automatically do this for React Native.

To step around this for now, you can just call riveViewRef.play(); after setting a property, where riveRef is the view reference. This is only needed if you know (suspect) that your graphic is settled.

const { riveViewRef, setHybridRef } = useRive();

<RiveView
  style={styles.rive}
  autoPlay={true}
  fit={Fit.Contain}
  file={riveFile}
  hybridRef={setHybridRef}
/>

[zispidd]

@zispidd I think you're running into a known issue with our Android and iOS runtimes that require you to force update/draw a frame if the graphic is in a settled state (the state machine is no longer advancing because all animations are finished).

Data binding can be completely decoupled from the view, and at the moment native Android and iOS aren't making these automatic affordances. @mfazekas we need to investigate if we can automatically do this for React Native.

To step around this for now, you can just call riveViewRef.play(); after setting a property, where riveRef is the view reference. This is only needed if you know (suspect) that your graphic is settled.

const { riveViewRef, setHybridRef } = useRive();

Seems to be working for me. Thanks!

[mfazekas]

See also #64 it introduces a playIfNeeded method just for this purpose. It's not async and checks if a play is needed before issuing one.