I get different results of Animated.Value in RNI and Expo Snack Application.
I created a new RNI App. Inside the App.js I added a new Animated.Value in a constructor, which I then console.log in the render method.
The console result is:
Animated Value: AnimatedValue {_children: Array(0), _value: 0, _startingValue: 0, _offset: 0, _animation: null, …}
When i do the same in Expo Snack, the console result is:
Animated Value: 0
Why is this? How can I access the value in my RNI App? The pattern is used even in the react-native documentation. So I am a little surprised. Am I overseeing something?
Here is the Code auf die App.js:
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Animated,
} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = { left: new Animated.Value(0) };
}
render() {
console.log('Animated Value: ', this.state.left);
return (
<Animated.View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
</Animated.View>
);
}
}
A mentioned in the Expo Snack SDK, the flowTypes
for the error, log, and presence listeners have been defined as mentioned here
// `console.log`, `console.warn`, `console.error`
export type ExpoDeviceLog = {
device: ExpoDevice,
method: 'log' | 'warn' | 'error',
message: string,
arguments: any, // the raw fields that were passed to the console.* call
};
Judging from the flowTypes
, since they are expecting the message as a String
, therefore it shows as a value rather than an object.
If you log the
const animated = new Animated.Value(0)
console.log(JSON.stringify(animated))
You'll get the same result.