Skip to content

magus/react-native-fxblurview

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

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.

preview

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

Copyright and license

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

About

react native ui component for popular FXBlurView library

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published