Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

withPause cause crashing #477

Open
yuhh8899 opened this issue Dec 12, 2021 · 11 comments
Open

withPause cause crashing #477

yuhh8899 opened this issue Dec 12, 2021 · 11 comments

Comments

@yuhh8899
Copy link

yuhh8899 commented Dec 12, 2021

I am currently using react-native 0.66.3, reanimated 2.3.0-beta.3 and redash 16.2.2.
I followed your tutorial on start-react-native.dev (the high-order animations video) and my program just crash with error: Cannot read property '__nodeId' of undefined, here are the code:
image

I am a newbie in reanimated so i can't know where the problem was
I am running on android 12 emulator

@yuhh8899
Copy link
Author

Even with the code on the github it still crash
image

@branaust
Copy link

+1

1 similar comment
@tsdmrfth
Copy link

+1

@andrewdang17
Copy link

andrewdang17 commented May 29, 2022

+1 with the latest release 16.3.0

@wcandillon
Copy link
Owner

it should be fixed part of 16.3.0, could you send me an example to reproduce the issue?

@andrewdang17
Copy link

andrewdang17 commented May 29, 2022

it should be fixed part of 16.3.0, could you send me an example to reproduce the issue?

@wcandillon here is how I am using it. I am also on reanimated 2.8.0 and it crashes without any stacktrace in the console.

import React, { useEffect } from 'react'
import { StyleSheet, View } from 'react-native'
import { colors } from 'app/theme'
import { withPause } from "react-native-redash"
import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'
import { SCREEN_WIDTH } from 'app/constants'

const ProgressBar = ({ loading }) => {
  const paused = useSharedValue(true)
  const progressWidth = useSharedValue(0)
  const progressStyle = useAnimatedStyle(() => {
    return {
      width: withTiming(progressWidth.value, {
        duration: 10000,
        easing: Easing.linear
      })
    }
  })

  useEffect(() => {
    if (loading) {
      progressWidth.value = withPause(SCREEN_WIDTH, paused)
    } else {
      paused.value = true
    }
  }, [loading])

  return (
    <View style={[styles.base]}>
      <Animated.View style={[progressStyle, styles.base, styles.progress]} />
    </View>
  )
}

export default ProgressBar

@andrewdang17
Copy link

andrewdang17 commented May 29, 2022

@wcandillon I might be using it wrong cause when I wrap the value with withTiming() as shown in the docs it doesn't crash but the animation doesn't work.

withPause(withTiming(SCREEN_WIDTH, paused))

@wcandillon
Copy link
Owner

shouldn't it be:

withPause(withTiming(SCREEN_WIDTH), paused)

@andrewdang17
Copy link

andrewdang17 commented May 29, 2022

@wcandillon nevermind I figured it out! I forgot to set paused.value to false 🤦 . It does crash still though if not used with withTiming on my end.

@wcandillon
Copy link
Owner

wcandillon commented May 30, 2022

Which other function other than withTiming would you like to use it for? I use it with withRepeat for instance.

@andrewdang17
Copy link

@wcandillon I don't need it with any other function, withTiming works perfectly for my case. I was just putting withTiming in the useAnimatedStyle instead of where the new shared value is being set

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants