react-native-animatable

React native animated api not working on android phones


So, i was trying to do a fade animation using react-native-animated API but unfortunately it does'nt gets animated when i try to render it on my android device. It just dont animate anything and screen is also blank but after sometime(say 30-40 secs) the text shows up with no animation. If i don't apply Animated.View than text shows up immediately or you can say normal rendering of content. Can anyone find what i am doing wrong with this code or what else should i add to make this work.

react-native-animatable version : 1.3.3

import React, { Component } from 'react';
import { Text, View, ScrollView } from 'react-native';
import { Card, } from 'react-native-elements';
import * as Animatable from 'react-native-animatable';

function History() {
    return(
        <View>
            <Text style = {{margin:10}}>
                Started in 2010, Eatsy quickly established itself as a culinary icon par excellence in Hong Kong. With its unique brand of world fusion cuisine that can be found nowhere else, it enjoys patronage from the A-list clientele in Hong Kong.  Featuring four of the best three-star Michelin chefs in the world, you never know what will arrive on your plate the next time you visit us.
            </Text>
        </View>
    );
}
class Test extends Component{

    render() 
    {
        return(
            <ScrollView>
                <Animatable.View animation="fadeInDown" duration={2000} delay={1000}>
                    <Card title ='Our History'>
                        <History />
                    </Card>
                </Animatable.View>
            </ScrollView>
        );
    }
};
export default Test;

Solution

  • Ok so now I got to know the solution after browsing internet for hours, you just have to add useNativeDriver='true' inside <Animatable.View> just like this:

    <Animatable.View animation="fadeInUp" useNativeDriver='true' duration={2000} delay={1000}>