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

import debouncer from '../../utils/debouncer';

const {
    Component
} = React;

const {
    Animated,
    // Dimensions,
    Easing,
    StyleSheet,
    TouchableOpacity,
    View
} = ReactNative;

const AnimatedView = Animatable.View;

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

const DEFAULT_ITEM_PRESS_DEBOUNCE_TIME_MS = 250;

const DEFAULT_ANIMATION_DURATION_MS = 300;

const DEFAULT_ITEM_VIEW_STYLE = {
    container: {
        flexDirection: `row`,
        alignItems: `center`,
        alignSelf: `stretch`,
        justifyContent: `space-between`,
        // width: DEVICE_WIDTH,
        width: `100%`,
        height: Ht.Theme.view.size.item,

import React from 'react';

import ReactNative from 'react-native'; // eslint-disable-line

import PropTypes from 'prop-types';

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

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

import dismissKeyboard from 'react-native/Libraries/Utilities/dismissKeyboard';

import debouncer from '../../utils/debouncer';

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

const {
    Component
} = React;

const {
    FlatList
} = ReactNative;

const {
    Dimensions,
    View,
    TextInput
} = ReactNative;

import * as Animatable from '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: {

import * as Animatable from 'react-native-animatable';
import Item from './Item';
import ScaleTable from './ScaleTable';
import EventList from './EventList';
import DeploymentAlias from './DeploymentAlias';
import AddAliasButton from './AddAliasButton';

type Props = {
	scale: any,
	deployment: Zeit$Deployment,
	events: Zeit$Event[],
	aliases: Zeit$Alias[],
	reload: () => void,
};

const View = styled(Animatable.View)`
	margin-top: 10px;
`;

const Heading = styled.Text`
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 20px;
	color: ${props => props.theme.text};
`;

const MultiWrap = styled.View`
	flex-direction: row;
	justify-content: space-between;
`;

export default ({

import CreateReactClass from 'create-react-class';

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

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

import { Ht } from '../../hypertoxin';

const {
    View,
    ScrollView,
    Dimensions
} = ReactNative;

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

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

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