title: Reusable animation for multiple React-Native components
body: <p>I am trying to create a default offsetY animation for a series of components. These components are loaded from different external files into App.js. At the moment I am using the following animation setup in each of the components, but I would like to find a DRY (don't repeat yourself) way to implement it. How can I setup only one animation and avoid this repetition? Does the animation need to be declared in App.js or can I also create it in an external file?</p>
  
  <p>Can anyone point me in the right direction? Thank you in advance!</p>
  
  <p>The components setup</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    Animated,
    View,
    Text,
    StyleSheet,
    DeviceEventEmitter
  } from 'react-native';
  
  // Custom **********************************************************************
  import styles from '../styles'
  
  export class BlueberryComp extends Component {
    constructor(props) {
      super(props)
      this.state = {
        offsetY: new Animated.Value(0),
        fadeIn: new Animated.Value(0)
      }
    }
  
    componentDidMount() {
      Animated.parallel([
        Animated.timing(
          this.state.offsetY,
          {
            toValue: -100,
            duration: 1000,
          }),
        Animated.timing(
          this.state.fadeIn,
          {
            toValue: 1,
            duration: 1000,
          }
        )
      ]).start();
    }
  
  
    render() {
      let { offsetY, fadeIn } = this.state;
  
      return (
        &lt;Animated.View style={{ opacity: fadeIn, transform: [{ translateY: offsetY }] }}&gt;
          &lt;Text style={styles.h1}&gt;{this.props.name}&lt;/Text&gt;
        &lt;/Animated.View&gt;
      );
    }
  }
  </code></pre>
  
  <p>App.js, Here I am using renderIf to load each component into the render view.</p>
  
  <pre><code>  render() {
      const { isIce, isMint, isBlueberry } = this.state
      return (
          &lt;View style={styles.container}&gt;
              {renderIf(isIce, &lt;IceComp name={this.state.name} /&gt;)}
              {renderIf(isMint, &lt;MintComp name={this.state.name} /&gt;)}
              {renderIf(isBlueberry, &lt;BlueberryComp name={this.state.name} /&gt;)}
          &lt;/View&gt;
      )
    }
  </code></pre>