Spinner Icon

[anandchakru]

Any out of the box support available for Spinning icons like mentioned in fontawesome (this is for web) here?

[anandchakru]

oh never mind, got it.

import React, { useEffect } from 'react';
import { View, StyleSheet, Animated, Easing } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';

const Spinner = () => {
  const spinValue = new Animated.Value(0);

  useEffect(() => {
    Animated.loop(Animated.timing(spinValue, {
      toValue: 1, duration: 1000, easing: Easing.linear, useNativeDriver: true
    })).start()
  }, [])
  const rotateAnimation = spinValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg']
  })
  return (
    <View>
      <Animated.View style={{ transform: [{ rotate: rotateAnimation }] }}>
        <FontAwesome name="spinner" style={styles.spinnerIcon}></FontAwesome>
      </Animated.View>
    </View>
  )
}

const styles = StyleSheet.create({
  spinnerIcon: {
    color: '#076b22',
    fontSize: 50,
  }
})
export default Spinner;

[anandchakru]

PR submitted for documentation update https://github.com/expo/expo/pull/10254