React native animatable not running

Question

I'm using react-native-animatable library to animate a loading icon. I haven't touched in a while until I decided to use it my new project. When I added it to my code it would do anything, I am really confused why it isn't running. The loader is visually there but there is no animation. I don't know what the problem is since the last I used it worked fine.

The code:

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

import constansts from "../../assets/constants"

export default function Loading(){
    const flipAnim = {
        0: {
            transform: [{rotate: "0deg"}]
        },
        0.25: {
            transform: [{rotate: "180deg"}]
        },
        0.5: {
            transform: [{rotate: "180deg"}]
        },
        0.75: {
            transform: [{rotate: "360deg"}]
        },
        1: {
            transform: [{rotate: "360deg"}]
        }
    }

    const fillAnim = {
        0: {
            height: "0%"
        },
        0.25: {
            height: "0%"
        },
        0.5: {
            height: "100%"
        },
        0.75: {
        height: "100%"
        },
        1: {
            height: "0%"
        }
    }
    
    return (
        <View style={styles.loadingCon}>
            <Animatable.View 
                style={styles.loader} 
                animation={flipAnim}
                duration={2000}
                iterationCount="infinite"
                easing="linear"
            >
                <Animatable.View
                    style={styles.loaderInner}
                    animation={fillAnim}
                    duration={2000}
                    iterationCount="infinite"
                    easing="linear"
                >
                </Animatable.View>
            </Animatable.View>
        </View>
    )
}

const styles = StyleSheet.create({
    loadingCon: {
        height: "100%",
        justifyContent: "center",
        alignItems: "center"
    },
    loader: {
        width: 40,
        height: 40,
        borderWidth: 5,
        borderColor: constansts.colors.blues,
        borderRadius: 4
    },
    loaderInner: {
        width: "100%",
        backgroundColor: constansts.colors.blues,
    }
})

Answer 1

You do not have anything inside the View , to animate add some icons like below

 <View style={styles.loadingCon}>
  <Animatable.View
    style={styles.loader}
    animation={flipAnim}
    duration={2000}
    iterationCount="infinite"
    easing="linear"
  >
    <Animatable.View
      style={styles.loaderInner}
      animation={fillAnim}
      duration={2000}
      iterationCount="infinite"
      easing="linear"
    >
      <Feather name="loader" size={24} color="black" />
    </Animatable.View>
  </Animatable.View>
</View>;

Please note you need to install and import any of Icon library , I use expo

  import { Feather } from '@expo/vector-icons';