Реагировать на анимированный значок поворота на 180 градусов на событие

Question

Я пытаюсь повернуть значок на 180 градусов каждый раз, когда выполняется событие.

Ссылка: Экспо

Найти его в BarCollapsible -> toggleView ()

Я должен сделать это, движение должно быть 180 градусов каждый раз.

Если мне нужно открыть коллапс, движение должно идти снизу вверх влево.

Если мне придется свернуть коллапс, движение должно идти сверху вниз влево.

Цвет не должен меняться.

import React, { Component } from 'react';
import {
  StyleSheet,
  Animated,
  View,
  Text,
  TouchableHighlight,
  TouchableNativeFeedback,
  Platform,
  Easing,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import * as Animatable from 'react-native-animatable';
const AnimatedIcon = Animatable.createAnimatableComponent(Icon);

const RippleColor = (...args) =>
  Platform.Version >= 21 ? TouchableNativeFeedback.Ripple(...args) : null;

/*const Animations = {
  rotate: {
    0: {
      rotate: '0deg',
      color: 'rgba(0,0,0,0.6)',
    },
    1: {
      rotate: '180deg',
      color: 'rgba(255, 87, 34, 0.5)',
    },
  },
};*/

export default class BarCollapsible extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fadeAnim: new Animated.Value(0),
      icon: props.icon,
      onPressed: null,
      title: props.title,
      children: null,
      show: props.showOnStart,
    };
  }

  static defaultProps = {
    showOnStart: false,
    icon: 'angle-right',
    iconOpened: 'minus',
    iconActive: 'plus',
    iconCollapsed: 'plus',
    tintColor: '#ccc',
    iconSize: 15,
  };

  componentWillMount() {
    const { fadeAnim, spinValue } = this.state;
    Animated.parallel([Animated.timing(fadeAnim, { toValue: 1 })]).start(
      () => {}
    );
    /*Animatable.initializeRegistryWithDefinitions({
      rotate: Animations.rotate,
    });*/
  }

  toggleView = () => {
    const { show, iconCollapsed, iconOpened } = this.state;
    this.animatable.rotate(0);
    this.setState({
      show: !show,
      icon: show ? iconCollapsed : iconOpened,
    });
  };

  renderCollapsible = () => {
    const { tintColor, iconSize, children, badgeText } = this.props;
    const { icon, fadeAnim, title, spinValue } = this.state;

    return (
      <View style={{ backgroundColor: '#fff', width: '100%' }}>
        <TouchableNativeFeedback
          onPress={this.toggleView}
          delayPressIn={0}
          delayPressOut={0}
          useForeground={true}
          background={RippleColor('#ccc')}>
          <View style={styles.bar}>
            <MaterialIcons
              name={'videogame-asset'}
              size={25}
              color={'#4CAF50'}
            />
            <Text style={[styles.title]}>{title}</Text>
            <View
              style={{
                //backgroundColor: '#f23521',
                flexDirection: 'row',
                justifyContent: 'flex-end',
                flex: 1,
                marginRight: 5,
              }}>
              {badgeText && (
                <Text
                  style={{
                    color: '#fff',
                    fontSize: 15,
                    backgroundColor: '#1194ff',
                    borderRadius: 4,
                    padding: 5,
                    fontWeight: 'bold',
                    marginRight: 5,
                  }}>
                  {badgeText}
                </Text>
              )}
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                }}>
                <AnimatedIcon
                  ref={ref => {
                    this.animatable = ref;
                  }}
                  name={'chevron-down'}
                  size={iconSize}
                />
              </View>
            </View>
          </View>
        </TouchableNativeFeedback>
        {this.state.show && (
          <Animated.View style={{ opacity: fadeAnim }}>
            {children}
          </Animated.View>
        )}
      </View>
    );
  };

  render() {
    return this.renderCollapsible();
  }
}

const styles = StyleSheet.create({
  bar: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingTop: 15,
    paddingLeft: 15,
    paddingBottom: 15,
    //backgroundColor: "#cccaaa"
  },

  title: {
    color: '#000',
    //marginTop: 16,
    marginLeft: 30,
    //marginBottom: 16,
    fontSize: 13,
    textAlign: 'left',
    fontWeight: 'bold',
  },
});

Где я делаю не так?