react-native-progress
react-native-progress copied to clipboard
[Android Only] Error while updating property 'd' in shadow node of type: ARTShape
Description
I got the following error when i run my project in an Android device. Works as expected in iOS emulator.
Error while updating property 'd' in shadow node of type: ARTShape
Expected Behavior
While the timer runs the progress will be increased, like what happens in the iOS emulator running the same project.
Device
Moto G4 Plus, Android 7.0
Code
Component
<Progress.Circle
size={200}
direction="counter-clockwise"
progress={this.state.percentage > 1 ? 1 : this.state.percentage}
thickness={10}
unfilledProgress="gray"
color={this.state.elapsed <= this.props.initial ? "blue" : "red"}
/>
Initial state
state = {
elapsed: 0,
current: 0,
percentage: 1, //min:0 max:1
status: 'idle',
interval: null,
task: 'task_1', //test only
user: 'user_1' //test only
}
componentWillMount hook
componentWillMount() {
this.props.getInitial(this.state.task);
this.props.checkOpenTasks(this.state.task)
.then((r) => {
if (r.action === 'play') {
this.setState({ elapsed: r.extra, status: 'running' });
let interval = setInterval(this.calcProgress, 1000);
this.setState({ interval });
} else {
const c = r.initial - r.elapsed;
this.setState({
elapsed: r.elapsed,
status: 'idle',
current: c < 0 ? c * -1 : c,
percentage: ((100 / (r.initial - 1000)) * r.elapsed) / 100
})
}
})
.catch((e) => console.log(e));
}
package.json
I'm using create-react-native-app
{
"name": "code",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-native-scripts": "1.3.0",
"jest-expo": "~20.0.0",
"react-test-renderer": "16.0.0-alpha.12"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"@expo/vector-icons": "^5.2.0",
"expo": "^20.0.0",
"firebase": "^4.3.1",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"native-base": "^2.3.1",
"prop-types": "^15.5.10",
"react": "16.0.0-alpha.12",
"react-native": "^0.47.0",
"react-native-circular-progress": "0.0.8",
"react-native-progress": "^3.4.0",
"react-native-simple-gauge": "^0.1.4",
"react-navigation": "^1.0.0-beta.11",
"redux-persist": "^4.9.1",
"redux-thunk": "^2.2.0"
}
Getting the same here
Getting the same issue when using data stored with persistStore. Works fine when data are not keep from one session to another.
I've found the reason is probably that the component receives a NaN
value, as it doesn't know how to draw it's progress path
, it crashes.
Also seeing this error.
Relevant debugger output:
props = {ReactStylesDiffMap@8656} "{ ReactStylesDiffMap: { NativeMap: {"d":[0,21,2.5,2,null,null]} } }"
t = {InvocationTargetException@8657} "java.lang.reflect.InvocationTargetException"
target = {UnexpectedNativeTypeException@8680} "com.facebook.react.bridge.UnexpectedNativeTypeException:
TypeError: expected dynamic type `double', but had type `null'"
I also found this was due to the progress
prop receiving NaN
. I had to check it beforehand using isNaN(n)
Would be good if this could be checked for in the component before it passes the value on.