Animated Blur Component For React Navive

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:

Download Details:

Author: gevgasparyan

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/gevgasparyan/react-native-animated-blur-view

License: MIT