Native crash when using an undefined Animated.Value in a debug node
See original GitHub issueWhen setting the value of an Animated.Value object to null
or undefined
and then using it in a debug
statement in an Animated.Code
block, we get a native exception that crashes the app.
Reproducible demo:
import React, {Fragment} from 'react';
import {
SafeAreaView,
Text,
TouchableOpacity,
} from 'react-native';
import Animated from 'react-native-reanimated';
const {
set,
block,
debug,
} = Animated;
const node = new Animated.Value(0);
const App = () => {
return (
<Fragment>
<Animated.Code>
{() => block([debug('node value: ', node)])}
</Animated.Code>
<SafeAreaView>
<TouchableOpacity
onPress={() => node.setValue(undefined)} // setValue(null) will throw a different exception
style={{padding: 20}}
>
<Text>Click Me</Text>
</TouchableOpacity>
</SafeAreaView>
</Fragment>
);
};
export default App;
This error can be quite difficult to find in a complex animation, since there is no indication about what the problem is. If it is intended that an error is thrown on an undefined Value
, then a better error message would be very useful.
The exact error is on line 21 of REAJSCallNode.m
:
[error][tid:main][RCTUIManager.m:1133] Exception thrown while executing UI block: *** -[__NSArrayM setObject:atIndexedSubscript:]: object cannot be nil
In the case of setting the Value
to null
, we get a JS exception: Unhandled JS Exception: Cannot read property '__isProxy' of null
.
Here are the versions used:
"react": "16.8.6",
"react-native": "0.60.5",
"react-native-reanimated": "1.2.0"
Issue Analytics
- State:
- Created 4 years ago
- Reactions:10
- Comments:9 (4 by maintainers)
Top Results From Across the Web
App Crashing due to animation in release mode
They are working fine in debug mode but app is crashing due to it in release or production mode build.
Read more >Drawer Navigator | React Navigation
The progress object is a Reanimated Node if you're using Reanimated 1 (see useLegacyImplementation ), otherwise a SharedValue . It represents the animated...
Read more >react-native-maps - npm
Start using react-native-maps in your project by running `npm i ... The MapView can accept an AnimatedRegion value as its region prop.
Read more >Using Hermes - React Native
This will compile JavaScript to bytecode during build time which will improve your app's startup speed on device. Debugging JS on Hermes using...
Read more >Safari Technology Preview Release Notes - Apple Developer
Fixed a crash clicking on Safari App Extension toolbar items ... Changed to use native datetime-local input for changing expires value in cookie...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
…
onPanResponderMove: (event, gesture) => { this.position.setValue({ x: gesture.dx, y: 0}) },
…Even if you only use x, you must put y to 0 so that they are not undefined It should have default values if not initialized.
@marqroldan, could you please provide some minimal code example reproducing this crash?