Search code examples
reactjsreact-nativeexporeact-animated

Different Values for Animated.Value in RNI and Expo (Snack)


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>
    );
  }
}

Solution

  • 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.