Skip to content

Blur view effect for React Native (iOS only)

License

Notifications You must be signed in to change notification settings

Ucekay/blur-view

 
 

Repository files navigation

VariableBlurView for React Native (iOS only)

Variable Blur View for React Native. Inspired by @jtrivedi and @aheze. This is a fork of the candlefinance/[email protected] with a fix for the issue where the blur does not apply when the color scheme changes.

Preview

demo.mp4

Installation

yarn add @uceaky/blur-view-fix

Usage

Use the BlurViewView component to blur the content behind it.

import { VariableBlurView } from '@ucekay/blur-view-fix';

<VariableBlurView
  style={{
    width,
    height: 200,
    position: 'absolute',
  }}
/>;

Docs

View the example app in the example folder.

Property Type Default Description
maxBlurRadius number 20 The amount of blur to apply to the view.
gradientMask string see source The gradient mask to apply to the view in base64.

Contributing

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

License

MIT

About

Blur view effect for React Native (iOS only)

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Swift 52.3%
  • Java 17.8%
  • Ruby 9.1%
  • Objective-C 6.1%
  • TypeScript 4.5%
  • JavaScript 4.4%
  • Other 5.8%