ReanimatableExample.js

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  Button,
} from 'react-native';
import Reanimatable from './Reanimatable';
import A from 'react-native-reanimated';

const s = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  animationContainer: {
    marginBottom: 100,
  },
  animatableView: {
    height: 100,
    backgroundColor: 'red',
  },
});


const config = {
  animation: {
    type: 'timing',
    duration: 300,
  },
  values: {
    width: { from: 100, to: 150 },
    height: { from: 100, to: 150 },
    translateY: { from: 0, to: 200 },
  },
};

export default class App extends React.PureComponent {
  state = {
    show: false,
  };

  componentDidMount() {
    this.interval = setInterval(() => {
      this.toggleShow();
    }, 300);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  toggleShow() {
    this.setState((state) => ({ show: !state.show }));
  }

  render() {
    return (
      <View style={s.container}>
        <Reanimatable
          config={config}
          show={this.state.show}
          containerStyle={s.animationContainer}
        >
          {({ width, height, translateY }) => (
            <A.View
              style={[
                s.animatableView,
                { width, height, transform: [{ translateY }] },
              ]}
            />
          )}
        </Reanimatable>

        <Button
          title="Toggle Animation"
          onPress={() => this.toggleShow()}
          style={s.button}
        />
      </View>
    );
  }
}