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

React Native Animated Blur component
https://github.com/gevgasparyan/react-native-animated-blur-view

Last synced: 5 days ago
JSON representation

React Native Animated Blur component

• Host: GitHub
• URL: https://github.com/gevgasparyan/react-native-animated-blur-view
• Owner: gevgasparyan
• License: mit
• Created: 2023-10-18T20:22:51.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-02T18:40:39.000Z (about 1 year ago)
• Last Synced: 2024-10-11T18:39:19.086Z (about 1 month ago)
• Language: TypeScript
• Homepage:
• Size: 1.35 MB
• Stars: 14
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# react-native-animated-blur-view

React Native Animated Blur component

https://www.npmjs.com/package/react-native-animated-blur-view

## Installation

```sh

npm install react-native-animated-blur-view

```

# THIS LIBRARY DOES NOT WORK ON ANDROID

## Usage

```js

import AnimatedBlurView, { AnimatedBlurViewMethods } from "react-native-animated-blur-view";

export default function App() {

  const blurViewRef = useRef();

  useEffect(() => {

    blurViewRef.current?.start(true);

  }, []);

  return (

    

      React Native Animated Blur 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)`

```js

ref.current?.start(true, () => console.log('Finished'));

```

Animates blur view from blurStart amount to blurEnd amount in given animation duration.

## `reset(show: boolean)`

```js

ref.current?.reset(true);

```

Will stop animation and set blurStart/blurEnd amount.

## `setBlurAmount(amount: number)`

```js

ref.current?.setBlurAmount(10);

```

Will set given blur amount without animation.

##

 

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT