CODEWITHSUNDEEP
javascriptandroidiosanimationreact-native
Diego Oriani
Diego Oriani

Reputation: 1897

Reusable animation for multiple React-Native components

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?

Can anyone point me in the right direction? Thank you in advance!

The components setup

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 (
      <Animated.View style={{ opacity: fadeIn, transform: [{ translateY: offsetY }] }}>
        <Text style={styles.h1}>{this.props.name}</Text>
      </Animated.View>
    );
  }
}

App.js, Here I am using renderIf to load each component into the render view.

  render() {
    const { isIce, isMint, isBlueberry } = this.state
    return (
        <View style={styles.container}>
            {renderIf(isIce, <IceComp name={this.state.name} />)}
            {renderIf(isMint, <MintComp name={this.state.name} />)}
            {renderIf(isBlueberry, <BlueberryComp name={this.state.name} />)}
        </View>
    )
  }

Upvotes: 3

Views: 2997

Answers (1)

Diego Oriani
Diego Oriani

Reputation: 1897

So, after trying and failing many times, I found this great example from Gosha Arinich. I hope this will help future users to tackle the same problem I had. Nevertheless, thank you @Cruiser.

Animating appearance & disappearance in React Native https://goshakkk.name/react-native-animated-appearance-disappearance/

Upvotes: 1

Related Questions