How to animate custom component which is inside text component in react native using react-native-animatable?

Question

const MyCustomComponent = Animatable.createAnimatableComponent(Icon);

return(
<View>
<Animatable.Text style={styles.textStyle}>
      Made with{' '}
      <MyCustomComponent
        animation="pulse"
        iterationCount="infinite"
        name="ios-heart"
        style={{ fontSize: 18 }}
        color="red"
      />
    </Animatable.Text>
 </View>
);

I'm a beginner learning React Native Animation. If you have time then please help me out in this.

I want to added Animation to MyCustomComponent but its happening can you tell me why so. Thank You.

score 0 · Answer 1 · answered Jan 14 '19 at 16:14

You can't do that, if it's animatable text you can expect o animate tex, if you want a nested view, wrap it in a animatable view, or a normal view, and animate the text and component by separate

<View>
<Animatable.Text style={styles.textStyle}>
      Made with{' '}
</Animatable.Text>
      <MyCustomComponent
        animation="pulse"
        iterationCount="infinite"
        name="ios-heart"
        style={{ fontSize: 18 }}
        color="red"
      />

 </View>

It will help if you post a gif of the expected result

How to animate custom component which is inside text component in react native using react-native-animatable?

1 Answers1