Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
react-native-blur
Advanced tools
Component implementation for UIVisualEffectView's blur and vibrancy effect.
Check the roadmap here
npm install react-native-blur
rnpm link
(see more about rnpm here) or like it's described here.const { BlurView, VibrancyView } = require('react-native-blur');
You can run built-in example via few simple steps:
examples/Basic
npm install && open Basic.xcodeproj
cmd+R
) button on XCode panelTo use blur
view, you need to require BlurView
to your module and insert <BlurView>
tag inside render function as it's done below:
const { BlurView } = require('react-native-blur');
const Menu = React.createClass({
render() {
return (
<Image source={{uri}} style={styles.menu}>
<BlurView blurType="light" blurAmount={10} style={styles.blur}>
<Text>Hi, I am a tiny menu item</Text>
</BlurView>
</Image>
);
}
});
In this example, Image
component will be blurred, a BlurView
content will stay untouched.
The vibrancy effect lets the content underneath a blurred view show through more vibrantly
const { VibrancyView } = require('react-native-blur');
const Menu = React.createClass({
render() {
return (
<Image source={{uri}} style={styles.menu}>
<VibrancyView blurType="light" style={styles.blur}>
<Text>Hi, I am a tiny menu item</Text>
</VibrancyView>
</Image>
);
}
});
blurType
(String) - blur type effect
xlight
- extra light blur typelight
- light blur typedark
- dark blur typeblurAmount
(Default: 10, Number) - blur amount effect
0-100
- Adjusts blur intensityNote: blurAmount
does not refresh with Hot Reloading. You must a refresh the app to view the results of the changes
Android support uses an external library which has slightly different properties and setup requirements. You must add the following to the android/app/build.gradle
file:
android {
...
defaultConfig {
...
renderscriptTargetApi 20
renderscriptSupportModeEnabled true
}
}
repositories {
maven { url 'https://github.com/500px/500px-android-blur/raw/master/releases/' }
}
dependencies {
...
compile project(':react-native-blur')
}
buildscript {
repositories {
maven { url 'https://github.com/500px/500px-android-blur/raw/master/releases/' }
}
dependencies {
classpath 'com.fivehundredpx:blurringview:1.0.0'
}
}
The android BlurView works by blurring an existing referenced view, so you must wait till the view you want to blur is rendered and then provide the reference to the BlurView as the viewRef
prop. Take a look at the example to see how it works.
It has the following props:
viewRef
(Number) - a reference to the existing view you want to blurblurRadius
(Number)downsampleFactor
(Number)overlayColor
(Color)On older instances of react-native, BlurView package does not get added into the MainActivity/MainApplication classes where you would see Warning: Native component for 'BlurView' does not exist
in RN YellowBox or console.
To rectify this, you can add the BlurViewPackage manually in MainActivity/MainApplication classes
...
import com.cmcewen.blurview.BlurViewPackage;
...
public class MainApplication extends Application implements ReactApplication {
...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new BlurViewPackage()
);
}
...
}
Feel free to contact me in twitter or create an issue
FAQs
React Native Blur component
The npm package react-native-blur receives a total of 603 weekly downloads. As such, react-native-blur popularity was classified as not popular.
We found that react-native-blur demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.