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