Comments (7)
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>
from react-native-fontawesome.
I'm using this
import { ActivityIndicator } from 'react-native'
<ActivityIndicator size={35} color="#600" />
from react-native-fontawesome.
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
from react-native-fontawesome.
Feel free to support my PR: #19
from react-native-fontawesome.
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
?
from react-native-fontawesome.
+1
from react-native-fontawesome.
@nirpeled Thanks
from react-native-fontawesome.
Related Issues (20)
- IconTypes aren't actually available HOT 3
- Move NPM package from my person npm account to Entria Org
- Missing index.d.ts in npm repo HOT 1
- iOS Font names are incorrect in 6.0.0 package HOT 2
- Please release a new version HOT 1
- Upgraded to 6.0.1 and icons turned into question marks HOT 16
- 6.0.1 Icons with matching names do not show regular font HOT 17
- Icons not visible in build android and iphone HOT 7
- Not working on Android HOT 7
- Library searching for fonts with underscores in name, rather than default dashes. HOT 7
- Pro rather than free? HOT 6
- Fonts not working, showing box with cross or Chinese characters HOT 7
- Can't resolve symbol `IconTypes` HOT 2
- New version of NPM Package HOT 6
- Update RN Version in Sample Project HOT 2
- Font Family Issue HOT 7
- Add Support for Duotone HOT 1
- Display Question marks in Ios 14 HOT 5
- Wrong TS types.
- Why does /rturk/react-native-fontawesome redirect here and version 6.0.0 vs 7.0.0
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-fontawesome.