expo-blur
Advanced tools
A component that renders a native blur view on iOS and falls back to a semi-transparent view on Android. A common usage of this is for navigation bars, tab bars, and modals.
The expo-blur package provides components to create blur effects in React Native applications. It is part of the Expo ecosystem and allows developers to easily add blur views to their app's UI, enhancing the visual appeal and providing a modern look.
BlurView
The BlurView component allows you to apply a blur effect to its children. The 'intensity' prop controls the level of blur, and the style prop can be used to position and size the BlurView.
<BlurView intensity={50} style={{ flex: 1 }}>
<Text>Blurred Content</Text>
</BlurView>Adjustable Blur Intensity
You can adjust the intensity of the blur effect using the 'intensity' prop. The 'tint' prop allows you to choose between different tint colors like 'light', 'dark', or 'default'.
<BlurView intensity={75} tint='light' style={{ width: 200, height: 200 }}>
<Text>More Intense Blur</Text>
</BlurView>Background Blur
The BlurView can be used to blur the background of a component, such as an image, by positioning it absolutely over the background content.
<View style={{ flex: 1 }}>
<Image source={{ uri: 'image-url' }} style={{ flex: 1 }} />
<BlurView intensity={100} style={StyleSheet.absoluteFill} />
</View>The react-native-blur package provides similar functionality to expo-blur, allowing developers to add blur effects to their React Native applications. It offers more customization options and is not tied to the Expo ecosystem, making it suitable for projects that do not use Expo.
The react-native-blurhash package is used for generating and displaying blurred images using the BlurHash algorithm. While it focuses on a different aspect of blurring (image placeholders), it can be used in conjunction with expo-blur for comprehensive blur effects in an app.
A component that renders a native blur view on iOS and falls back to a semi-transparent view on Android. A common usage of this is for navigation bars, tab bars, and modals.
For managed managed Expo projects, please follow the installation instructions in the API documentation for the latest stable release.
For bare React Native projects, you must ensure that you have installed and configured the react-native-unimodules package before continuing.
expo install expo-blur
Run npx pod-install after installing the npm package.
This package only supports iOS. On Android, a plain View with a translucent background will be rendered.
Contributions are very welcome! Please refer to guidelines described in the contributing guide.
49.0.0 — 2023-06-27
@react-native-community/datetimepicker from 6.7.3 to 7.2.0. (#23034 by @gabrieldonadel)@react-native-community/netinfo from 9.3.7 to 9.3.10. (#22892 by @douglowder)@react-native-masked-view/masked-view from 0.2.8 to 0.2.9. (#22875 by @gabrieldonadel)@react-native-picker/picker from 2.4.8 to 2.4.10. (#22919 by @keith-kurak)@react-native-segmented-control/segmented-control from 2.4.0 to 2.4.1. (#22911 by @keith-kurak)@shopify/flash-list from 1.4.0 to 1.4.3. (#22893 by @gabrieldonadel)@shopify/react-native-skia from 0.1.172 to 0.1.196. (#22900, #23036, #23157 by @kudo)lottie-react-native from 5.1.4 to 5.1.6. (#22868 by @alanjhughes)react-native-gesture-handler from 2.10.1 to 2.12.0. (#22621 by @aleqsio)react-native-maps from 1.3.2 to 1.7.1. (#22908 by @aleqsio)react-native-pager-view from 6.1.2 to 6.2.0. (#22892 by @douglowder)react-native-reanimated from 2.14.4 to 3.3.0. (#22907 by @kudo)react-native-safe-area-context from 4.5.0 to 4.6.3. (#23026 by @tsapeta)react-native-screens from 3.20.0 to 3.22.0. (#23022 by @tsapeta)react-native-svg from 13.4.0 to 13.9.0. (#22934 by @alanjhughes)react-native-view-shot from 3.5.0 to 3.7.0. (#23024 by @tsapeta))react-native-webview from 11.26.0 to 13.2.2. (#22913 by @aleqsio)expo-application
robolectric to 4.10 and junit to 4.13.2. (#22395 by @josephyanks)expo-battery
robolectric to 4.10 and junit to 4.13.2. (#22395 by @josephyanks)expo-clipboard
robolectric to 4.10. (#22395 by @josephyanks)expo-crypto
robolectric to 4.10 and junit to 4.13.2. (#22395 by @josephyanks)expo-location
com.google.android.gms:play-services-location to 21.0.1 and io.nlopez.smartlocation:library to 3.3.3 (#22468 by @josephyanks)expo-media-library
robolectric to 4.10. (#22395 by @josephyanks)expo-modules-core
robolectric to 4.10 and junit to 4.13.2. (#22395 by @josephyanks)expo-sms
robolectric to 4.10 and junit to 4.13.2. (#22395 by @josephyanks)expo-web-browser
robolectric to 4.10. (#22395 by @josephyanks)expo-blur
expo-face-detector
expo-gl
enableExperimentalWorkletSupport to use GLView from Reanimated worklet. (#22613 by @wkozyra95)expo-file-system
UploadProgressData.totalByteSent field. (#22277 by @gabrieldonadel)expo-linking
detach.scheme schemes (ExpoKit). (#22848 by @EvanBacon)expo-notifications
ExpoPushTokenOptions.experienceId field. (#22303 by @gabrieldonadel)expo-battery
useBatteryLevel, useBatteryState, useLowPowerMode, and usePowerState. (#22646 by @Adam-Schlichtmann)expo-blur
expo-brightness
expo-clipboard
ClipboardPasteButton view that uses UIPasteControl. (#22823 by @alanjhughes)expo-device
deviceType constant. (#21633 by @robertherber)expo-document-picker
expo-gl
expo-file-system
expo-image-picker
expo-localization
expo-media-library
expo-screen-capture
expo-sharing
UIDocumentInteractionController to UIActivityViewController which provides more features. (#22012 by @alanjhughes)expo-modules-core
ReactActivityHandler.getDelayLoadAppHandler interface on Android. (#20273 by @kudo)Image and Media rather than Fetch. (#23058 by @kudo)expo-speech
expo-print
expo-screen-orientation
expo-secure-store
expo-sqlite
Promise based execAsync and transactionAsync functions. (#23109 by @kudo)expo-application
expo-asset
@react-native/assets-registry module not found issue on Web. (#21469 by @kudo)expo-background-fetch
expo-barcode-scanner
expo-av
expo-battery
expo-blur
expo-brightness
expo-branch
expo-calendar
expo-cellular
expo-clipboard
expo-device
expo-document-picker
Record on Android. (#21588 by @alanjhughes)copyToCacheDirectory on iOS. (#23102 by @aleqsio)expo-camera
expo-contacts
expo-face-detector
expo-gl
expo-file-system
expo-haptics
expo-image-loader
expo-crypto
expo-intent-launcher
expo-image-picker
.png when opening .bmp files and selecting any quality in ImagePickerOptions. (#21361 by @behenate)MediaTypeOptions.All (#22606 by @fobos531)expo-constants
expo-keep-awake
expo-font
expo-mail-composer
expo-location
expo-local-authentication
NSFaceIDUsageDescription in the Info.plist. (#21500 by @alanjhughes)expo-localization
getCalendars on Web. (#22003 by @aleqsio)expo-linear-gradient
expo-media-library
expo-random
expo-notifications
expo-screen-capture
expo-sharing
expo-modules-core
URL type to support unencoded UTF8 urls and file paths. (#21139 by @tsapeta)# getting cut off. (#21326 by @lukmccall)URL object. (#21569 by @tsapeta)ReadableNativeMap cannot be cast to the Record. (#21773 by @lukmccall)JavaScriptObject argument and view props. (#22427 by @lukmccall)Color converter doesn't work on devices with SDK version below 26. (#22191 by @lukmccall)View cannot be cast to ViewGroup exception on Android. (#23264 by @lukmccall)URL type that failed despite receiving a string that contained a valid URL. (#23331 by @alanhughes) (#23331 by @alanjhughes)Content-Length header. (#23405 by @kudo)SoLoader does not work on Android. (#23415 by @kudo)expo-network
expo-sensors
expo-speech
expo-permissions
expo-print
expo-screen-orientation
rootViewController value. (#23039 by @gabrieldonadel)Info.plist instead of being set to portrait. (#23456 by @behenate)expo-image-manipulator
expo-secure-store
expo-store-review
expo-sms
expo-sqlite
expo-task-manager
expo-video-thumbnails
unimodules-app-loader
expo-web-browser
expo-camera
Remote JS debugger option from Expo Go menu when using SDK 49 or above. (#22027 by @gabrieldonadel)expo-barcode-scanner
com.google.android.gms:play-services-vision with com.google.mlkit:barcode-scanning. (#22107 by @toshiyuki-suzuki-yukashikado)expo-auth-session
useProxy option. (#21313 by @gabrieldonadel)makeRedirectUriAsync with makeRedirectUri. (#21314 by @gabrieldonadel)promptAsync when the useProxy option is used. (#21367 by @gabrieldonadel)startAsync from js doc. (#23150 by @alanhughes) (#23150 by @alanjhughes)expo-calendar
expo-document-picker
getDocumentAsync. (#23135 by @alanjhughes)expo-gl
expo-file-system
expo-crypto
randomUUID method. (#21187 by @KiwiKilian)expo-constants
Constants.deviceYearClass and Constants.platform.ios.model. These properties now live on expo-device. (#23068 by @brentvatne)expo-linking
expo-mail-composer
expo-location
LocationRequest constructor and replaced with LocationRequest.Builder. (#22653 by @alanjhughes)expo-notifications
expo-screen-capture
expo-modules-core
fallbackCallback optional in the registerForActivityResult method. (#21661 by @lukmccall)jsi::WeakObject for weak objects on Hermes. (#21986 by @tsapeta)proxiedProperties prop. (#22280 by @tsapeta)JavaScriptValue.kind public. (#22386 by @lukmccall)androidx.activity:activity-ktx to 1.7.1 and androidx.fragment:fragment-ktx to 1.5.7 #22658 by @fobos531ExpoReactDelegate and ExpoReactDelegateHandler to fix issues with versioning in Expo Go. (#23229 by @tsapeta)expo-screen-orientation
expo-secure-store
NSFaceIDUsageDescription key in the set function. (#23275 by @alanjhughes)expo-task-manager
defineTask to accept type arguments. (#21958 by @kazuma0129)FAQs
A component that renders a native blur view on iOS and falls back to a semi-transparent view on Android. A common usage of this is for navigation bars, tab bars, and modals.
The npm package expo-blur receives a total of 139,288 weekly downloads. As such, expo-blur popularity was classified as popular.
We found that expo-blur demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 29 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.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.