react-native-animated-blur-view

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

THIS LIBRARY DOES NOT WORK ON ANDROID

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 of ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n). Default is ease.
• 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)

ref.current?.reset(true);

Will stop animation and set blurStart/blurEnd amount.

setBlurAmount(amount: number)

ref.current?.setBlurAmount(10);

Will set given blur amount without animation.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT