Animation.js

import React, { PureComponent } from 'react'
import { View, StyleSheet, Animated, Easing } from 'react-native'

class App extends PureComponent {

  animationValue = new Animated.Value(0)

  componentDidMount() {
    Animated.timing(this.animationValue, {
      toValue: 1,
      duration: 750,
      easing: Easing.bezier(.97,.17,.25,1.55),
      useNativeDriver: true
    }).start()
  }
  

  renderSquare() {
    return <View style={styles.animationSquare} />
  }

  render() {
    const rotate = this.animationValue.interpolate({
      inputRange: [0, 1],
      outputRange: ['-45deg', '180deg']
    })

    const scale = this.animationValue.interpolate({
      inputRange: [0, 1],
      outputRange: [.2, 1]
    })

    return (
      <View style={styles.container}>
        <Animated.View style={styles.animationContainer(rotate, scale)}>
          {this.renderSquare()}
          {this.renderSquare()}
          {this.renderSquare()}
          {this.renderSquare()}
        </Animated.View>
      </View>
    )
  }
}

export default App

const styles = StyleSheet.create({
  animationSquare: {
    width: 90,
    height: 90,
    backgroundColor: '#333ddd',
    borderRadius: 8,
  },
  animationContainer: (rotate, scale) => ({
    width: 200,
    height: 200,
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    alignContent: 'space-between',
    transform: [
      { rotate },
      { scale }
    ]
  }),
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
})