How to use the react-native-animatable.createAnimatableComponent function in react-native-animatable

import { BlurView } from 'react-native-blur';

const {
    Component
} = React;

const {
    Dimensions,
    ScrollView,
    PanResponder,
    View
} = ReactNative;

const AnimatedView = Animatable.View;
const AnimatedBlurView = Animatable.createAnimatableComponent(BlurView);

const DEVICE_WIDTH = Dimensions.get(`window`).width;

const DEFAULT_ANIMATION_DURATION_MS = 300;

const DEFAULT_LAYOUT_VIEW_STYLE = {
    container: {
        flexShrink: 1,
        flexDirection: `column`,
        justifyContent: `center`,
        alignItems: `stretch`,
        maxWidth: DEVICE_WIDTH
        // overflow: `hidden`
    },
    horizontal: {
        flexShrink: 1,

import React, { Component } from 'react';
import {
  SafeAreaView,
  SectionList,
  StyleSheet,
  TouchableWithoutFeedback,
} from 'react-native';
import { createAnimatableComponent, View, Text } from 'react-native-animatable';
import Slider from '@react-native-community/slider';
import AnimationCell from './AnimationCell';
import GROUPED_ANIMATION_TYPES from './grouped-animation-types.json';

const AnimatableSectionList = createAnimatableComponent(SectionList);

const COLORS = [
  '#65b237', // green
  '#346ca5', // blue
  '#a0a0a0', // light grey
  '#ffc508', // yellow
  '#217983', // cobolt
  '#435056', // grey
  '#b23751', // red
  '#333333', // dark
  '#ff6821', // orange
  '#e3a09e', // pink
  '#1abc9c', // turquoise
  '#302614', // brown
];

import * as Animatable from 'react-native-animatable'

const transitionProps = {
  hoverbar: ['top', 'left', 'height', 'width', 'shadowRadius'],
  square: ['top', 'left'],
  destinationBox: ['left', 'height', 'opacity'],
  sourceBox: ['top', 'opacity'],
  destinationText: ['top', 'left', 'fontSize', 'color', 'opacity'],
  sourceText: ['top', 'opacity'],
  verticalBar: ['top', 'left', 'opacity'],
  dot: ['top', 'left', 'opacity'],
}

const SQUARE_SIZE = 6

const AnimatableTouchable = Animatable.createAnimatableComponent(TouchableWithoutFeedback)

export default class LocationSearchHeader extends Component {

  static defaultProps = {
    expanded: false,
    onPress: () => {},
    onSourceTextChange: () => {},
    onDestinationTextChange: () => {},
    sourceText: '',
    destinationText: '',
  }

  onSourceTextChange = (sourceText) => {
    const {onSourceTextChange} = this.props

    this.setState({sourceText})

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Animated } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import * as Animatable from 'react-native-animatable';
import PXTouchable from './PXTouchable';
import { LIKE_BUTTON_ACTION_TYPES } from '../common/constants';

const AnimatableIcon = Animatable.createAnimatableComponent(Icon);

class BookmarkButton extends Component {
  static propTypes = {
    item: PropTypes.object.isRequired,
    onPress: PropTypes.func.isRequired,
    onLongPress: PropTypes.func.isRequired,
  };

  constructor(props) {
    const { item } = props;
    super(props);
    this.state = {
      isBookmark: item.is_bookmarked,
      scaleAnim: new Animated.Value(0),
    };
  }

TextInput,
  Dimensions,
  BackAndroid,
  TimePickerAndroid,
  DatePickerAndroid,
  ToastAndroid,
  InteractionManager,
} from 'react-native';

import { connect } from 'react-redux';
import { fetchReminders, createReminder } from '../actions/reminders';

import EventList from './EventList';
import Accordion from 'react-native-collapsible/Accordion';
import { createAnimatableComponent } from 'react-native-animatable';
const ScrollView = createAnimatableComponent(ReactNative.ScrollView);

import Ic from 'react-native-vector-icons/Entypo';

const Icon = createAnimatableComponent(Ic);


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'white',
  },
  header: {
    flexDirection: 'column',
    height: 50,
    borderBottomWidth: 0.3,

import React from 'react';
import { ImageBackground, StyleSheet, Text } from 'react-native';
import * as Animatable from 'react-native-animatable';

import Assets from '../Assets';

const AnimatableImageBackground = Animatable.createAnimatableComponent(
  ImageBackground,
);

const LoadingScreen = () => (
  
    
  
);

const styles = StyleSheet.create({

TextInput,
  Image,
  Dimensions,
  ToastAndroid,
  BackAndroid,
} from 'react-native';

import { connect } from 'react-redux';
import { authenticate, createUser, accessTokenLogin } from '../actions/user';

import SpinningIcon from './SpinningIcon';
import { createAnimatableComponent, View, Text } from 'react-native-animatable';

import SessionHandler from '../util/SessionHandler';

const TouchableHighlight = createAnimatableComponent(ReactNative.TouchableHighlight);
const backgroundImg = require('../img/rsz_stars.png');


const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    flex: 1,
    backgroundColor: 'transparent',
  },
  bg: {
    position: 'absolute',
    left: 0,
    top: 0,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },

import * as Animatable from 'react-native-animatable'

const transitionProps = {
  hoverbar: ['top', 'left', 'height', 'width', 'shadowRadius'],
  square: ['top', 'left'],
  destinationBox: ['left', 'height', 'opacity'],
  sourceBox: ['top', 'opacity'],
  destinationText: ['top', 'left', 'fontSize', 'color', 'opacity'],
  sourceText: ['top', 'opacity'],
  verticalBar: ['top', 'left', 'opacity'],
  dot: ['top', 'left', 'opacity'],
}

const SQUARE_SIZE = 6

const AnimatableTouchable = Animatable.createAnimatableComponent(TouchableWithoutFeedback)

export default class LocationSearchHeader extends Component {

  static defaultProps = {
    expanded: false,
    onPress: () => {},
    onSourceTextChange: () => {},
    onDestinationTextChange: () => {},
    sourceText: '',
    destinationText: '',
  }

  onSourceTextChange = (sourceText) => {
    const {onSourceTextChange} = this.props

    this.setState({sourceText})

import React from 'react';
import { createAnimatableComponent } from 'react-native-animatable';
import Image from 'react-native-image-progress';
import Circle from 'react-native-progress/Circle';

const ProgressFadeInImage = createAnimatableComponent(Image);

export default class ProgressImage extends React.PureComponent {
  render() {
    const { onLoad, ...props } = this.props;
    return (
       {
          this.imageRef = e;
        }}
        indicator={Circle}
        {...props}
        onLoad={() => {
          if (onLoad) onLoad();
          if (this.imageRef.fadeIn) this.imageRef.fadeIn();
        }}
      />

author: String,
    time: String,
    image: String,
    likeCount: String,
    commentCount: String,
    shareCount: String,
    videoUrl: string,

    text: String,

    isImage: boolean,
    isVideo: boolean,
    isText: boolean
}

const AnimatedIcon = Animatable.createAnimatableComponent(Icon);

class PostItem extends React.Component {
    private player: any;

    constructor(props: IPostItemProps) {
        super(props);
        this.state = {
            liked: false
        };
        this.lastPress = 0
    }

    handleLargeAnimatedIconRef = (ref: any) => {
        this.largeAnimatedIcon = ref
    };