Animating icons such as spinners

[nirpeled]

I wonder how much effort will it take to support animating an icon, similar to using the "fa-spin" class for spinner icons - examples at http://fontawesome.io/examples/#animated

I'd love to help out with this :)

[kchaengsiri]

+1

[nirpeled]

I actually ended up wrapping the FontAwesome component to animate it, here it is:

import React, { Component } from 'react';
import { Animated, Easing } from 'react-native';
import FontAwesome, { Icons } from 'react-native-fontawesome';

class FontAwesomeSpin extends Component {

    spinValue = new Animated.Value(0);

    componentDidMount(){
        this.spin();
    };

    spin = () => {

        this.spinValue.setValue(0);

        Animated.timing(
            this.spinValue,
            {
                toValue: 1,
                duration: 1000,
                easing: Easing.linear,
                useNativeDriver: true
            }
        ).start(() => this.spin());

    };

    render() {

        const { style, children } = this.props;
        const rotate = this.spinValue.interpolate({inputRange: [0, 1], outputRange: ['0deg', '360deg']});

        return(
            <Animated.View style={{transform: [{rotate}]}}>
                <FontAwesome style={style}>
                    {children}
                </FontAwesome>
            </Animated.View>
        )

    }
}

export default FontAwesomeSpin;

So instead of using:

<FontAwesome style={{fontSize: 32}}>
    {Icons.chevronLeft}
</FontAwesome>

Simply use:

<FontAwesomeSpin style={{fontSize: 32}}>
    {Icons.chevronLeft}
</FontAwesomeSpin>

[kchaengsiri]

@nirpeled Thanks

[nirpeled]

Feel free to support my PR: https://github.com/entria/react-native-fontawesome/pull/19

[aledalgrande]

Don't know if the people upvoting just copy-pasted the code above, but the PR doesn't work, because the library doesn't export SpinningIcon?

[ShareNewsLLC]

I'm using this

import { ActivityIndicator } from 'react-native'

<ActivityIndicator size={35} color="#600" />

[ctepeo]

I'm using this

import { ActivityIndicator } from 'react-native'

<ActivityIndicator size={35} color="#600" />

To the guys that will copy-paste your solution: following the documentation numeric value for size is gonna work only on Android, but "large" and "small" shall work on both platforms