react-native-blur-overlay
Getting started
$ npm install react-native-blur-overlay --save
Mostly automatic installation
$ react-native link react-native-blur-overlay
Manual installation
iOS
react-native link
- cd to ios folder and run
pod install
Android
Blur Only works on Android >= 17 !!! Brightness and should work everywhere though
- Open up
android/app/src/main/java/[...]/MainApplication.java
- Add
import com.bluroverly.SajjadBlurOverlayPackage;
to the imports at the top of the file - Add
new SajjadBlurOverlayPackage()
to the list returned by thegetPackages()
method
- Append the following lines to
android/settings.gradle
:include ':react-native-blur-overlay' project(':react-native-blur-overlay').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-blur-overlay/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:compile project(':react-native-blur-overlay')
Usage
;;; const instructions = Platform; type Props = {};<Props> { superprops; } { return <View style=stylesimage> <Text style=stylesinstructions2>instructions</Text> <Text style=stylesinstructions2>instructions</Text> </View> ; } { return <View style=stylescontainer> <TouchableOpacity onPress= { ; } style=width: '90%' height: 36 backgroundColor: "#03A9F4" borderRadius: 4 margin: 16/> <Text style=styleswelcome>Welcome to React Native!</Text> <Text style=stylesinstructions>To get started edit Appjs</Text> <Text style=stylesinstructions>instructions</Text> <BlurOverlay radius=14 downsampling=2 brightness=-200 onPress= { ; } customStyles=alignItems: 'center' justifyContent: 'center' blurStyle="dark" children=this /> </View> ; } const styles = StyleSheet;
Props
android only:
radius : Int (Between 0 to 25*downsampling)
downsampling : float (>= 1)
brightness : float (Between -255 to 255 , 0 = nochange)
ios only :
blurStyle: string ("light" , "extraLight" , "dark")
both platforms :
onPress : func
customStyles: style