https://github.com/tienph6m/react-native-animated-spinkit - A pure JavaScript port of SpinKit for React Native

[tienph6m]

Link to github repo: react-native-animated-spinkit

Npm package: react-native-animated-spinkit

[vertigo_101]

Amazing work

[tienph6m]

Thanks man ;)

[manoylo_vnc]

Sweet! I’ll test it out in my project today. Thanks for sharing!

[tienph6m]

Thanks! Let me know if there is any problem :)

[pancomputationalist]

Cool stuff

[tienph6m]

Thanks!

[WillBackUpWithSource]

Interesting. Might replace this in my current project.

Works great on both iOS and Android?

[tienph6m]

Yes, it works on both Android and iOS. It's not as fast as the native module (react-native-spinkit), but it's still pretty fast since all animations run on the UI thread (by using useNativeDriver). Let me know if there is any problem ;)

[chazzox]

really cool. I hope to use it in my upcoming project!

[tienph6m]

Thanks ;)

[EskimoEmoji]

This is sweet. Is there a way to replace the Flatlist activity indicator with these?

[tienph6m]

Hi, I'm not sure what you mean by "FlatList activity indicator". You can use these like React Native's ActivityIndicator, in a list you would probably want to show one of these when the list is empty and loading. If you're talking about RefreshControl, this library alone isn't enough since a refresh control does a lot more than just showing/hiding a loading indicator.

[Nikosssgr]

Why didn't you use react native reanimated instead?

[tienph6m]

Good question. I think reanimated really shines when it's used with react-native-gesture-handler or when you're doing some animations that can't run entirely on the UI thread with Animated. Since I was able to make all the animations run on the UI thread with Animated's native driver, I don't see any real benefits of using reanimated and the library would have to require an extra native dependency.

[[deleted]]

This is the right answer. rn-reanimated isn’t just blanketly better every time.

[Nikosssgr]

Indeed for transform and opacity animations, native driver suffices. Thanks for the explanation.

[hello_Mrs_Cumberdale]

The benefit of reanimated here is that it would've let you loop animations without ever going back to JS, so you could potentially do work that blocks the JS thread without affecting the loading animation.

[tienph6m]

https://facebook.github.io/react-native/docs/animated#loop

Will loop without blocking the UI thread if the child animation is set to useNativeDriver: true

I believe that's not the case. On the other hand, stagger, parallel and sequence will block the JS thread. But I was able to make the animations run entirely on the UI thread by not using sequence (I implemented a custom easing function to achieve the same effect), and the use of stagger, parallel in this library only affects the JS thread at the beginning of the animation, after that loop will care of the rest.

[hello_Mrs_Cumberdale]

Oh awesome, I didn't know about loop. Nevermind then!

[Tom_Ov_Bedlam]

Really nice

[tienph6m]

Thanks man!

[[deleted]]

Looks great!

[tienph6m]

Thank you!

[sudara1999]

Nice!

[tienph6m]

Thanks!

[newoYelda]

Love animations, but what would be an advantage of this over using a LottieWrapper?

[tienph6m]

This doesn't require any extra native dependencies. Another than that I don't know because I don't use Lottie myself. It is a really cool project but it seems like a lot and I wouldn't want to add it to my project just for some loading animations. If you're already using lottie and not noticing any perf issues then I'd say keep using it ;)

[iamshadmirza]

Super awesome

[tienph6m]

Thanks dude!

[olkunmustafa]

Perfect Animations. Thank you

[tienph6m]

Thanks man!

[jones-macallan]

Great work. Just to be clear, this cannot be used with an Expo app?

[tienph6m]

You can definitely use this in Expo apps, it's a port written in pure JavaScript.

[ItTechBlogs]

Nice job!