1
React Native Animated Blur component
source link: https://reactnativeexample.com/react-native-animated-blur-component/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
react-native-animated-blur-view
React Native Animated Blur component
https://www.npmjs.com/package/react-native-animated-blur-view
Installation
npm install react-native-animated-blur-view
Usage
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.
Imperative API
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.
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK