1.3.2 • Published 5 years ago

react-native-image-blur v1.3.2

Weekly downloads
2
License
MIT
Repository
github
Last release
5 years ago

react-native-image-blur

react-native-image-blur is a wrapper for react-native-blur. Provide image blurring.

npm.io

Installation

npm install react-native-blur
npm install react-native-image-blur

react-native link react-native-blur

Android: Add the following to android/app/build.gradle

android {
    // make sure to use 23.0.3 instead of 23.0.1
    buildToolsVersion '23.0.3'

    // ...
    defaultConfig {
        // Add these lines below the existing config
        renderscriptTargetApi 23
        renderscriptSupportModeEnabled true
    }
}

Include the library in your code:

import ImageBlur from 'react-native-image-blur';

<ImageBlur
    source={{ uri: 'xxx' }}
    style={{ width: '100%', height: 240 }}
    blurRadius={6}>
    <Text style={{ color: '#fff', fontSize: 32 }}>Hello</Text>
</ImageBlur>

props

nametypedescription
imageStyleobjectimage style.
contentStyleobjectchildren component style.
sourceobjectimage source.
blurTypestringxlight、light、dark. default is dark.
blurRadiusnumber(only android) range: 0 - 25, default is 8.
downsampleFactornumber(only android) range: > 0, default is null.
blurAmountnumberrange: 0 - 100, default is 10.
overlayColorstring(only android) default is null.