Custom Component animation

[Ileezyy]

Hi. Simply awesome library! Thank you! But I have a question about custom component animation. Could you write in details how to apply this piece of code: MyCustomComponent = Animatable.createAnimatableComponent(MyCustomComponent);

Thank you once more.

[oblador]

Not exactly sure of your question, but it's good practice to save your animatable component to a new variable: const AnimatableMyCustomComponent = Animatable.createAnimatableComponent(MyCustomComponent);

[ddwhan0123]

I have the same question about my custom component. My code like this

import React, {Component, Navigator} from 'react';
import {
    AppRegistry,
    StyleSheet,
    BackAndroid,
    Platform,
    Text,
    View,
    ToastAndroid,
} from 'react-native';
import MyCustomSquare from '../widget/MyCustomSquare';
import * as Animatable from 'react-native-animatable';

var _navigator;
var title;
const NewSquare = Animatable.createAnimatableComponent(MyCustomSquare);

export default class Touch extends Component{
    constructor(props){
      super(props);
      _navigator=this.props._navigator;
      title=this.props.title;
    }

    render(){
      return(
        <View style={{flex : 1, flexDirection :'column'}}>
          <Text style={{
              fontSize: 20,
              color: 'green'}}
            >{title}
              View
          </Text>
          <NewSquare
            animation="bounceInUp"
            duration={1100}
            delay={1400}
          />
        <Animatable.Text animation="slideInDown" iterationCount="infinite" direction="alternate">Up and down</Animatable.Text>
        </View>

      );
    }
}

But the NewSquare have no anim

thanks

[oblador]

Hi, does your component accept the style prop?

[kaplanitay]

Hi, having the same issue.. my component does not accept style prop...

[ddwhan0123]

@oblador Yes , I think so

[singhsurbhidaffodil]

Hi, got the same issue, not able to animate custom components