animatable.jsx

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  TouchableHighlight,
} from 'react-native';

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


const App: () => React$Node = () => {
  const phoneRef = React.useRef(null);
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView>
          <View
            style={{
              borderColor: 'red',
              flex: 1,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            {/* <LiteCreditCardInput onChange={_onChange} /> */}
            {/* <PhoneInput ref={phoneRef} /> */}
            <Animatable.View animation="slideInDown">
              <TouchableHighlight
                style={{
                  width: 160,
                  height: 160,
                  borderRadius: 8,

                  backgroundColor: '#6155a6',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                <Text
                  style={{
                    color: '#fff',
                  }}>
                  SlideInDown
                </Text>
              </TouchableHighlight>
            </Animatable.View>
            <Animatable.View animation="slideInLeft">
              <TouchableHighlight
                style={{
                  width: 160,
                  height: 160,
                  borderRadius: 8,

                  backgroundColor: '#fdb827',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                <Text
                  style={{
                    color: '#fff',
                  }}>
                  SlideInLeft
                </Text>
              </TouchableHighlight>
            </Animatable.View>

            <Animatable.View animation="bounce">
              <TouchableHighlight
                style={{
                  width: 160,
                  height: 160,
                  borderRadius: 8,

                  backgroundColor: '#ff4646',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                <Text
                  style={{
                    color: '#fff',
                  }}>
                  Bounce
                </Text>
              </TouchableHighlight>
            </Animatable.View>
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};