Thursday, 26 October, 2023 UTC
Summary
react-native-animated-blur-view
Usage
Contributing
React Native Animated Blur component
https://www.npmjs.com/package/react-native-animated-blur-view
Installation
npm install react-native-animated-blur-view
import AnimatedBlurView, { AnimatedBlurViewMethods } from "react-native-animated-blur-view";
export default function App() {
const blurViewRef = useRef<AnimatedBlurViewMethods>();
useEffect(() => {
blurViewRef.current?.start(true);
}, []);
return (
<View style={styles.container}>
<Text>React Native Animated Blur View</Text>
<AnimatedBlurView
ref={blurViewRef}
style={StyleSheet.absoluteFillObject}
blurStart={10}
blurEnd={20}
animationDuration={2}
/>
</View>
);
}
Props:
blurStart: number (required). Blur effect start amount.blurEnd: number (required). Blur effect end amount.animationDuration: number (required). Animation duration in seconds.gradient: boolean (optional). Add gradient effect. Default is false.style: StyleProp (optional). View style of the component.animationType: string (optional). Blur Animation type. One ofease,linear,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n). Default isease.extraStyles: string (optional). Add extra css styles to blur component.
start(show: boolean, cb: () => void)
ref.current?.start(true, () => console.log('Finished'));
Animates blur view from blurStart amount to blurEnd amount in given animation duration.
reset(show: boolean) lower level imperative API
ref.current?.reset(true);
Will stop animation and set blurStart/blurEnd amount.
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
GitHub
View Github