react-native-paper icon indicating copy to clipboard operation
react-native-paper copied to clipboard

Published 20 hours ago • verified publisher icon callstack

Stacktrace when using animation with progressbar

Open alpa-odoo opened this issue 2 years ago • 10 comments

Hi guys, does this seem ok to you ? https://snack.expo.dev/@flaze9/progressbar?name=ProgressBar&description=https%3A%2F%2Fcallstack.github.io%2Freact-native-paper%2F4.0%2Fprogress-bar.html&code=import%20*%20as%20React%20from%20%27react%27%3B%0Aimport%20%7B%20ProgressBar%2C%20Colors%20%7D%20from%20%27react-native-paper%27%3B%0A%0Aconst%20MyComponent%20%3D%20()%20%3D%3E%20(%0A%20%20%3CProgressBar%20progress%3D%7B0.5%7D%20color%3D%7BColors.red800%7D%20%2F%3E%0A)%3B%0A%0Aexport%20default%20MyComponent%3B&dependencies=react-native-paper

Because i have issues making it work in my code, the above snack is a minimal example

Screenshot 2022-09-13 at 21 58 46

This is what I get in local Would greatly appreciated some help

alpa-odoo avatar Sep 13 '22 19:09 alpa-odoo

Couldn't find version numbers for the following packages in the issue:

  • react-native
  • react-native-paper
  • react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

github-actions[bot] avatar Sep 13 '22 19:09 github-actions[bot]

Hey @alpa-odoo, could you please describe what exactly doesn't work, what is the issue you're facing?

lukewalczak avatar Sep 14 '22 11:09 lukewalczak

Hey @lukewalczak

Thanks for your help 🙏 I'm trying to apply an animation to a react-native-paper

<ProgressBar progress={progressBarValue} />

I saw in their exemple the following thing :

Screenshot 2022-09-14 at 15 50 51

And was trying to make it work with the progress attribute.

I have a minimal example here: https://snack.expo.dev/@flaze9/progressbar where the animation of the progress bar works as expected.

But when I'm trying to put this example in my project in a similar way, here :

https://github.com/alexandredepape/chess-recogniser-mobile-app/blob/progress-bar-animation/App.js#L51

the logs show the following thing:

Invariant Violation: [1195,"RCTView",41,{"onLayout":true,"accessible":true,"accessibilityRole":"progressbar","accessibilityState":{"busy":true},"accessibilityValue":{"min":0,"max":100,"now":"<<NaN>>"}}] is not usable as a native method argument

Full logs :

Android Bundling complete 71ms
 LOG  useEffect called
 LOG  serverIsPredicting: false
 LOG  takePicture
 LOG  finished taking a picture
 LOG  Setting server is predictin to TRUE
 LOG  useEffect called
 LOG  serverIsPredicting: true
 LOG  creating animation
 WARN  Possible Unhandled Promise Rejection (id: 0):
Invariant Violation: [1195,"RCTView",41,{"onLayout":true,"accessible":true,"accessibilityRole":"progressbar","accessibilityState":{"busy":true},"accessibilityValue":{"min":0,"max":100,"now":"<<NaN>>"}}] is not usable as a native method argument
invariant@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:2436:26
enqueueNativeCall@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:23932:20
nonPromiseMethodWrapper@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:23550:42
createView@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:57608:42
createInstance@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:6442:57
completeWork@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:12718:48
completeUnitOfWork@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:17486:34
performUnitOfWork@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:17463:29
workLoopSync@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:17392:28
renderRootSync@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:17370:25
performSyncWorkOnRoot@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:17115:40
performSyncWorkOnRoot@[native code]
flushSyncCallbacks@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:7088:36
flushSyncCallbacksOnlyInLegacyMode@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:7069:29
scheduleUpdateOnFiber@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:16699:47
dispatchSetState@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:11068:43
dispatchSetState@[native code]
http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:119601:25
generatorResume@[native code]
asyncGeneratorStep@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25072:26
_next@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25094:29
tryCallOne@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:30604:16
http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:30705:27
http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:31784:26
_callTimer@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:31684:17
_callReactNativeMicrotasksPass@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:31719:17
callReactNativeMicrotasks@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:31926:44
__callReactNativeMicrotasks@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:24002:46
http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:23781:45
__guard@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:23985:15
flushedQueue@http://10.30.69.54:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:23780:21
flushedQueue@[native code]
invokeCallbackAndReturnFlushedQueue@[native code]

alpa-odoo avatar Sep 14 '22 13:09 alpa-odoo

I think the problem is that your ProgressBar with an animated value is wrapped in the regular View instead of Animated.View in your app.

lukewalczak avatar Sep 15 '22 07:09 lukewalczak

I think the problem is that your ProgressBar with an animated value is wrapped in the regular View instead of Animated.View in your app.

Hey @alpa-odoo, did it help you with the issue?

lukewalczak avatar Sep 19 '22 09:09 lukewalczak

@lukewalczak Hi, I tried to make a minimal exemple here: https://snack.expo.dev/@flaze9/crabby-cashew

and the snack both works on the phone and on the web.

Now when putting it in my project: https://github.com/alexandredepape/chess-recogniser-mobile-app/blob/animation-progress-bar/src/components/loading_screen.js#L1

I still get this unpleasant error :

ERROR  Invariant Violation:
[13,"RCTView",21,{"onLayout":true,"accessible":true,"accessibilityRole":"progressbar","accessibilityState"{"busy":true},"accessibilityValue":{"min":0,"max":100,"now":"<<NaN>>"}}]
is not usable as a native method argument

This error is located at:
   in RCTView (created by View)
   in View (created by ProgressBar)
   in ProgressBar
   in ThemedComponent (created by withTheme(ProgressBar))
   in withTheme(ProgressBar) (created by LoadingScreen)
   in RCTView (created by View)
   in View (created by AnimatedComponent)
   in AnimatedComponent
   in AnimatedComponentWrapper (created by LoadingScreen)
   in LoadingScreen (created by App)
   in App (created by ExpoRoot)
   in ExpoRoot
   in RCTView (created by View)
   in View (created by AppContainer)
   in RCTView (created by View)
   in View (created by AppContainer)
   in AppContainer
   in main(RootComponent)

alpa-odoo avatar Sep 19 '22 12:09 alpa-odoo

so then please try to reproduce it on the fresh react-native project, with the minimum code, required to observe the bug and share the link in the issue, so we can check it.

lukewalczak avatar Sep 19 '22 13:09 lukewalczak

@lukewalczak Here is the minimal code: https://github.com/alexandredepape/progress-bar-animation With stacktrace:

 ERROR  Invariant Violation: [5,"RCTView",21,{"onLayout":true,"accessible":true,"accessibilityRole":"progressbar","accessibilityState":{"busy":true},"accessibilityValue":{"min":0,"max":100,"now":"<<NaN>>"}}] is not usable as a native method argument

This error is located at:
    in RCTView (created by View)
    in View (created by ProgressBar)
    in ProgressBar
    in ThemedComponent (created by withTheme(ProgressBar))
    in withTheme(ProgressBar) (created by App)
    in RCTView (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)
 ERROR  Invariant Violation: [5,"RCTView",21,{"onLayout":true,"accessible":true,"accessibilityRole":"progressbar","accessibilityState":{"busy":true},"accessibilityValue":{"min":0,"max":100,"now":"<<NaN>>"}}] is not usable as a native method argument

This error is located at:
    in RCTView (created by View)
    in View (created by ProgressBar)
    in ProgressBar
    in ThemedComponent (created by withTheme(ProgressBar))
    in withTheme(ProgressBar) (created by App)
    in RCTView (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)

flazouh avatar Sep 19 '22 15:09 flazouh

Try to make ProgressBar animatable by wrapping component in createAnimatedComponent and use it then.

const AnimatedProgressBar = Animated.createAnimatedComponent(ProgressBar)

lukewalczak avatar Sep 19 '22 19:09 lukewalczak

I did:

import { Animated, StyleSheet } from "react-native";
import { ProgressBar } from "react-native-paper";
import { useEffect, useRef } from "react";


export default function App() {
    const progressBarValue = useRef(new Animated.Value(0));
    const AnimatedProgressBar = Animated.createAnimatedComponent(ProgressBar);

    useEffect(() => {
        console.log("progressBarValue", progressBarValue.current);
        Animated.timing(progressBarValue.current, {
            toValue: 1,
            duration: 1000,
            useNativeDriver: true,
        }).start();
    }, []);

    return (
        <Animated.View style={styles.progressBarContainer}>
            <AnimatedProgressBar style={styles.progressBar}
                                 progress={progressBarValue.current}
                                 color={"#9dd4ae"}/>
        </Animated.View>
    )
}

const styles = StyleSheet.create({
    progressBarContainer: {
        flex: 1,
        backgroundColor: "#313845",
        justifyContent: 'center',
        alignItems: 'center',
    },
    progressBar: {
        width: 300,
        // backgroundColor: "white",
        borderRadius: 7.5,
        height: 15,
        margin: 10,

    }
});

And I get:

ERROR  Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Context.Consumer`.
    in ProgressBar
    in ThemedComponent (created by withTheme(ProgressBar))
    in withTheme(ProgressBar) (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by App)
    in RCTView (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)
 LOG  progressBarValue 0

flazouh avatar Sep 20 '22 09:09 flazouh

Hey @alexandredepape, did you manage to solve your issue? Unfortunately, atm I don't have much time to help with it and be more involved in it.

lukewalczak avatar Sep 29 '22 11:09 lukewalczak

@lukewalczak I was not able to no, could you take 5 minutes to reproduce this minimal example and try on your end if that works ?

import { Animated, StyleSheet } from "react-native";
import { ProgressBar } from "react-native-paper";
import { useEffect, useRef } from "react";


export default function App() {
    const progressBarValue = useRef(new Animated.Value(0));
    const AnimatedProgressBar = Animated.createAnimatedComponent(ProgressBar);

    useEffect(() => {
        console.log("progressBarValue", progressBarValue.current);
        Animated.timing(progressBarValue.current, {
            toValue: 1,
            duration: 1000,
            useNativeDriver: true,
        }).start();
    }, []);

    return (
        <Animated.View style={styles.progressBarContainer}>
            <AnimatedProgressBar style={styles.progressBar}
                                 progress={progressBarValue.current}
                                 color={"#9dd4ae"}/>
        </Animated.View>
    )
}

const styles = StyleSheet.create({
    progressBarContainer: {
        flex: 1,
        backgroundColor: "#313845",
        justifyContent: 'center',
        alignItems: 'center',
    },
    progressBar: {
        width: 300,
        // backgroundColor: "white",
        borderRadius: 7.5,
        height: 15,
        margin: 10,

    }
});

flazouh avatar Sep 30 '22 12:09 flazouh

We've introduced new property called animatedValue https://callstack.github.io/react-native-paper/progress-bar.html#animatedValue. Please check the new example, I hope it will help you.

lukewalczak avatar Oct 19 '22 12:10 lukewalczak

@lukewalczak The AnimatedProgressBar example doesn't seem to work in my local environment. I've been trying to get it work since yesterday

amanzrx4 avatar Dec 11 '22 08:12 amanzrx4

We've introduced new property called animatedValue https://callstack.github.io/react-native-paper/progress-bar.html#animatedValue. Please check the new example, I hope it will help you.

I got the same problem and I fix it with animatedValue. Thank for the work of menber! 🎉

17LingShan avatar Aug 22 '23 08:08 17LingShan