reanimated-bug-417.js

import React, { Component } from 'react';
import { StyleSheet, View, Button } from 'react-native';

import Animated, { Easing } from 'react-native-reanimated';

const { call, block } = Animated;

const Wat = ({ backgroundColor, translateX }) => (
  <Animated.View
    style={{
      width: 40,
      height: 40,
      backgroundColor,
      transform: [{ translateX }],
    }}
  />
);

class Toggler extends Component {
  state = { toggle: false };
  render() {
    return (
      <>
        {this.state.toggle && (
          <Wat translateX={this.props.translateX} backgroundColor="blue" />
        )}
        <Button
          title="ADD STUFF"
          onPress={() => this.setState({ toggle: !this.state.toggle })}
        />
      </>
    );
  }
}

export default class Example extends Component {
  constructor(props) {
    super(props);

    this._translateX = new Animated.Value(10);
    this._do_you_evaluate = block([
      call([this._translateX], ([tx]) => console.warn('EVAL', tx)),
      this._translateX,
    ]);
  }

  render() {
    return (
      <View style={styles.container}>
        <Wat translateX={this._do_you_evaluate} backgroundColor="red" />
        <Toggler translateX={this._translateX} />
      </View>
    );
  }
}

const BOX_SIZE = 10;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  box: {
    width: BOX_SIZE,
    height: BOX_SIZE,
    borderColor: '#F5FCFF',
    alignSelf: 'center',
    backgroundColor: 'plum',
    margin: 2,
  },
});