Action bar animated

action-bar.js

import React from 'react';
import {
  Animated,
  View,
  TouchableOpacity,
  StyleSheet,
  Image
} from 'react-native';

import {width, height} from '../styles';

const styles = StyleSheet.create({
  center: {alignItems: 'center'},
  icon_center: {justifyContent: 'center'},
  icon_white: {color: 'white'}
});

const ANIMATION_SPEED = 700;
const FINAL_WIDTH = Math.floor(width * 0.8);
const BAR_HEIGHT = Math.floor(height * 0.1);
const ICON_SIZING = BAR_HEIGHT - 10;
const icon_s = {height: ICON_SIZING, width: ICON_SIZING};
const center_button_s = {
  backgroundColor: 'white',
  borderRadius: 20,
  shadowColor: '#646464',
  shadowOpacity: 0.5,
  shadowOffset: {width: 2, height: 2},
  justifyContent: 'center',
  flexDirection: 'row'
};

class ActionBar extends React.Component {
  state = {expanded: false};

  spin_value = new Animated.Value(0);
  icon_opacity = new Animated.Value(0);

  spin = this.spin_value.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '45deg']
  });

  bar_width = new Animated.Value(ICON_SIZING);

  toggle_icon_opacity = to_value =>
    Animated.timing(this.icon_opacity, {
      toValue: to_value,
      duration: ANIMATION_SPEED
    });

  expand_and_spin = (spin, expand) =>
    Animated.parallel([
      Animated.timing(this.spin_value, {
        toValue: spin,
        duration: ANIMATION_SPEED
      }),
      Animated.timing(this.bar_width, {
        toValue: expand,
        duration: ANIMATION_SPEED
      })
    ]);

  expansion_toggle = () => {
    let seq = null;

    if (this.state.expanded === false) {
      seq = [this.expand_and_spin(1, FINAL_WIDTH), this.toggle_icon_opacity(1)];
    } else {
      seq = [this.toggle_icon_opacity(0), this.expand_and_spin(0, ICON_SIZING)];
    }

    Animated.sequence(seq).start(() => {
      this.setState({expanded: !this.state.expanded});
    });
  };

  render() {
    const {add_files_handler = null, camera_handler = null} = this.props;

    const add_files = (
      <TouchableOpacity style={styles.icon_center} onPress={add_files_handler}>
        <Animated.Image
          style={{...icon_s, opacity: this.icon_opacity}}
          resizeMode={'contain'}
          source={require('PROJECT/assets/1.0/Screen1.0.2/Group-6.png')}
        />
      </TouchableOpacity>
    );
    const camera = (
      <TouchableOpacity style={styles.icon_center} onPress={camera_handler}>
        <Animated.Image
          style={{...icon_s, opacity: this.icon_opacity}}
          resizeMode={'contain'}
          source={require('PROJECT/assets/1.0/Screen1.0.2/Group2.png')}
        />
      </TouchableOpacity>
    );

    return (
      <Animated.View style={{...center_button_s, width: this.bar_width}}>
        {add_files}
        <TouchableOpacity onPress={this.expansion_toggle}>
          <Animated.Image
            style={{
              transform: [{rotate: this.spin}],
              height: BAR_HEIGHT,
              width: BAR_HEIGHT,
              paddingHorizontal: 50
            }}
            resizeMode={'contain'}
            source={require('PROJECT/assets/1.0/Screen1.0.1/cross.png')}
          />
        </TouchableOpacity>
        {camera}
      </Animated.View>
    );
  }
}

export default ActionBar;