react-native-thanos-snap-animation

Implement Thanos dust animation into react native

Special thanks to redstapler Tutorial and drgx react repo!

Preview

Installation

This repo is depend on:

• node-libs-react-native
• react-native-canvas
• react-native-view-shot

Please at first, take a look at those repos's install instructions

Step 1:

npm install react-native-thanos-snap-animation react-native-webview react-native-view-shot

cd ios && pod install

or

yarn add react-native-thanos-snap-animation react-native-webview react-native-view-shot

cd ios && pod install

Step 2:

In your metro.config.js, set the resolver.extraNodeModules:

//...
extraNodeModules: {
  //...
  ...require('node-libs-react-native'), //add this
},
//...

Usage

import { InfinityGauntlet } from 'react-native-thanos-snap-animation';

// ...
const [snap, setSnap] = useState(false);

// ...
<InfinityGauntlet snap={snap}>
   {/* any component ... */}
</InfinityGauntlet>

Props

Name	type	usage
canvasCount	number (optional), default: 32	Number of canvas use for dust animation, the more canvas the more smooth look on the animation, but also more lagging and slower initial
zIndex	number (optional), default: 2	Index of the component in UI stack, use this if you want to bring your UI to front
snap	boolean (optional)	Set the snap animation state
disablePrepareOnReload	boolean (optional)	Flag to reduce re-init the animation canvas when you update the main component
useWebViewHandler	boolean (optional), default: true	Move some heavy function to webview, this can reduce some time but may not supported in big components or some devices with low memory heap
onAnimationPrepare	() => any (optional)	Trigger when dust animation initialization start
onAnimationReady	() => any (optional)	Trigger when dust animation is ready to use
onError	(error?: any) => any (optional)	Trigger when there is an error in the component functions
onAnimationCompleted	(state?: UIState) => any (optional). UIState are 'visible' or 'hidden'	Trigger when snap animation is completed
style	StyleProp (optional)	Style of the Wrapper
originalElementStyle	StyleProp (optional)	Style of the Main UI component
canvasContainerStyle	StyleProp (optional)	Style of the dust canvas list

TODO list

• Fix all //FIXME tags
• Reduce initial time, currently Arrays manipulation and filter is too slow, especially weightedRandomDistrib. Use native module?
• Implement blur animation
• Support animation duration

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library