React native icon spin
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;
Are there any code examples left?
New code examples in category Other
-
Other 2023-03-27 22:50:10 how to select the whole line in vscode with keyboard shortcut
-
Other 2022-03-27 22:45:24 income of a web developer
-
Other 2022-03-27 22:35:01 \pyrcc_main.py: File does not exist 'resources.qrc'
-
Other 2022-03-27 22:30:45 rick roll embed code
-
Other 2022-03-27 22:20:08 Circuit_04_Potentiometer
-
Other 2022-03-27 22:20:05 iterative power
-
Other 2022-03-27 22:15:11 flutter run all
-
Other 2022-03-27 22:10:05 when is karlson release
-
Other 2022-03-27 22:10:02 wp .htaccess example
-
Other 2022-03-27 22:00:08 bash pause in file read line by line