react-native-fxblurview

May 23, 2016 · View on GitHub

<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.

Setup
Usage
Example
Contributing
Copyright and license

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

Prop	Type	Opt/Required	Default	Note
`blurEnabled`	`bool`	Optional	true	Toggles blurring on and off for an individual FXBlurView instance
`blurRadius`	`number`	Optional	40	Radius of the blur effect (in points). Defaults to a 40 point radius, which is similar to the iOS 7 blur effect
`dynamic`	`bool`	Optional	false	Controls 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