Description:
A React Native component to help create animated blur views in iOS & Android apps.
How to use it:
1. Install & import.
# Yarn $ yarn react-native-animated-blur-view # NPM $ npm i react-native-animated-blur-view
import AnimatedBlurView, { AnimatedBlurViewMethods } from "react-native-animated-blur-view";2. Create an animated blur view as follows:
export default function App() {
const blurViewRef = useRef<AnimatedBlurViewMethods>();
useEffect(() => {
blurViewRef.current?.start(true);
}, []);
return (
<View style={styles.container}>
<Text>Some Text Here</Text>
<AnimatedBlurView
ref={blurViewRef}
style={StyleSheet.absoluteFillObject}
blurStart={5}
blurEnd={10}
animationDuration={3
/>
</View>
);
}3. Available props.
blurStart: number; blurEnd: number; animationDuration: number; style?: StyleProp<ViewStyle>; gradient?: boolean; // "ease" - Specifies an animation with a slow start, then fast, then end slowly (this is default) // "linear"- Specifies an animation with the same speed from start to end // "ease-in" - Specifies an animation with a slow start // "ease-out" - Specifies an animation with a slow end // "ease-in-out" - Specifies an animation with a slow start and end // "cubic-bezier(n,n,n,n)"; - Lets you define your own values in a cubic-bezier function animationType?: AnimationType; extraStyles?: string;
4. Start & reset the animation.
ref.current?.start(true, () => console.log('Finished'));
ref.current?.reset(true);Preview:
