Home

Awesome

react-native-fxblurview

<FXBlurView /> provides a [React Native][react-native] component wrapping the native FXBlurView UIView subclass for realtime background blur effect and is compatible with iOS 5 and above.

<img src="https://raw.githubusercontent.com/magus/react-native-fxblurview/master/example/preview.png" alt="preview" height="400" />

Table of contents

Setup

rnpm install react-native-fxblurview

Usage

FXBlurView

Provides a React Native component which wraps the FXBlurView.

Defaults
import FXBlurView from 'react-native-fxblurview'

class BlurredView extends Component {
  render() {
    return (
      <FXBlurView>
        { this.props.children }
      </FXBlurView>
    );
  }
}
Fields
PropTypeOpt/RequiredDefaultNote
blurEnabledboolOptionaltrueToggles blurring on and off for an individual FXBlurView instance
blurRadiusnumberOptional40Radius of the blur effect (in points). Defaults to a 40 point radius, which is similar to the iOS 7 blur effect
dynamicboolOptionalfalseControls whether the FXBlurView updates dynamically, or only once when the view is added to its superview

Example

open example/FXBlurViewExample/ios/FXBlurViewExample.xcodeproj

See the example project for a working example.

Contributing

Just submit a pull request!

Contact

Twitter - @imnmj

iamnoah.com

Copyright and license

Code and documentation copyright 2016 Noah. Code released under the MIT license.