1.0.2 • Published 11 months ago
react-native-thanos-snap-animation v1.0.2
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:
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 installor
yarn add react-native-thanos-snap-animation react-native-webview react-native-view-shot
cd ios && pod installStep 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