Skip to content

Commit

Permalink
chore: update README
Browse files Browse the repository at this point in the history
  • Loading branch information
gtokman committed Jun 18, 2023
1 parent 87f82a9 commit 0471bcb
Showing 1 changed file with 23 additions and 2 deletions.
25 changes: 23 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

# BlurView for React Native (iOS only)

BlurView for React Native (iOS only). Supports variable intensity and tint color via [UIVisualEffectView](https://developer.apple.com/documentation/uikit/uivisualeffectview)
BlurView for React Native. Supports variable intensity and tint color via [UIVisualEffectView](https://developer.apple.com/documentation/uikit/uivisualeffectview).

## Preview

https://github.com/candlefinance/blur-view/assets/12258850/53f5a05f-7594-4f7e-acbc-997b10ee4345
https://github.com/candlefinance/blur-view/assets/12258850/66fc73aa-7160-41b2-97cd-a406440e372e

## Installation

Expand All @@ -29,6 +29,27 @@ import { BlurView } from '@candlefinance/blur-view';
/>;
```

To use with [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated), wrap the BlurView in a `Animated.createAnimatedComponent`.

```js
const AnimatedBlur = Animated.createAnimatedComponent(BlurView);

const animatedProps = useAnimatedProps(() => {
const blurRadius = interpolate(
scrollY.value,
input,
output,
Extrapolate.CLAMP
);

return {
blurRadius,
};
});

<AnimatedBlur animatedProps={animatedProps} />;
```

## Docs

View the example app in the [example](./example/src/App.tsx) folder.
Expand Down

0 comments on commit 0471bcb

Please sign in to comment.