expo-blur 12.9.2 → 13.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +20 -2
- package/android/build.gradle +7 -93
- package/build/BlurView.d.ts.map +1 -1
- package/build/BlurView.js +3 -0
- package/build/BlurView.js.map +1 -1
- package/build/BlurView.web.d.ts +9 -11
- package/build/BlurView.web.d.ts.map +1 -1
- package/build/BlurView.web.js +36 -44
- package/build/BlurView.web.js.map +1 -1
- package/package.json +2 -2
- package/src/BlurView.tsx +6 -0
- package/src/BlurView.web.tsx +52 -48
package/CHANGELOG.md
CHANGED
|
@@ -10,13 +10,31 @@
|
|
|
10
10
|
|
|
11
11
|
### 💡 Others
|
|
12
12
|
|
|
13
|
-
##
|
|
13
|
+
## 13.0.1 — 2024-04-23
|
|
14
|
+
|
|
15
|
+
_This version does not introduce any user-facing changes._
|
|
16
|
+
|
|
17
|
+
## 13.0.0 — 2024-04-18
|
|
18
|
+
|
|
19
|
+
### 🎉 New features
|
|
20
|
+
|
|
21
|
+
- Mark React client components with "use client" directives. ([#27300](https://github.com/expo/expo/pull/27300) by [@EvanBacon](https://github.com/EvanBacon))
|
|
22
|
+
|
|
23
|
+
### 🐛 Bug fixes
|
|
24
|
+
|
|
25
|
+
- Migrate web to a function component and fix reanimated errors related to [`setNativeProps` being removed](https://github.com/necolas/react-native-web/commit/e68c32770757194af103cca0095c0c204995505b). ([#27721](https://github.com/expo/expo/pull/27721) by [@EvanBacon](https://github.com/EvanBacon))
|
|
26
|
+
|
|
27
|
+
### 💡 Others
|
|
28
|
+
|
|
29
|
+
- Removed deprecated backward compatible Gradle settings. ([#28083](https://github.com/expo/expo/pull/28083) by [@kudo](https://github.com/kudo))
|
|
30
|
+
|
|
31
|
+
## 12.9.2 - 2024-02-16
|
|
14
32
|
|
|
15
33
|
### 🎉 New features
|
|
16
34
|
|
|
17
35
|
- Added support for Apple tvOS. ([#26965](https://github.com/expo/expo/pull/26965) by [@douglowder](https://github.com/douglowder))
|
|
18
36
|
|
|
19
|
-
## 12.9.1
|
|
37
|
+
## 12.9.1 - 2023-12-19
|
|
20
38
|
|
|
21
39
|
_This version does not introduce any user-facing changes._
|
|
22
40
|
|
package/android/build.gradle
CHANGED
|
@@ -1,109 +1,23 @@
|
|
|
1
1
|
apply plugin: 'com.android.library'
|
|
2
|
-
apply plugin: 'kotlin-android'
|
|
3
|
-
apply plugin: 'maven-publish'
|
|
4
2
|
|
|
5
3
|
group = 'host.exp.exponent'
|
|
6
|
-
version = '
|
|
4
|
+
version = '13.0.1'
|
|
7
5
|
|
|
8
6
|
def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
useExpoPublishing()
|
|
15
|
-
useCoreDependencies()
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
buildscript {
|
|
20
|
-
// Simple helper that allows the root project to override versions declared by this library.
|
|
21
|
-
ext.safeExtGet = { prop, fallback ->
|
|
22
|
-
rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
// Ensures backward compatibility
|
|
26
|
-
ext.getKotlinVersion = {
|
|
27
|
-
if (ext.has("kotlinVersion")) {
|
|
28
|
-
ext.kotlinVersion()
|
|
29
|
-
} else {
|
|
30
|
-
ext.safeExtGet("kotlinVersion", "1.8.10")
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
repositories {
|
|
35
|
-
mavenCentral()
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
dependencies {
|
|
39
|
-
classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${getKotlinVersion()}")
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
// Remove this if and it's contents, when support for SDK49 is dropped
|
|
44
|
-
if (!safeExtGet("expoProvidesDefaultConfig", false)) {
|
|
45
|
-
afterEvaluate {
|
|
46
|
-
publishing {
|
|
47
|
-
publications {
|
|
48
|
-
release(MavenPublication) {
|
|
49
|
-
from components.release
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
repositories {
|
|
53
|
-
maven {
|
|
54
|
-
url = mavenLocal().url
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
7
|
+
apply from: expoModulesCorePlugin
|
|
8
|
+
applyKotlinExpoModulesCorePlugin()
|
|
9
|
+
useCoreDependencies()
|
|
10
|
+
useDefaultAndroidSdkVersions()
|
|
11
|
+
useExpoPublishing()
|
|
60
12
|
|
|
61
13
|
android {
|
|
62
|
-
// Remove this if and it's contents, when support for SDK49 is dropped
|
|
63
|
-
if (!safeExtGet("expoProvidesDefaultConfig", false)) {
|
|
64
|
-
compileSdkVersion safeExtGet("compileSdkVersion", 34)
|
|
65
|
-
|
|
66
|
-
defaultConfig {
|
|
67
|
-
minSdkVersion safeExtGet("minSdkVersion", 23)
|
|
68
|
-
targetSdkVersion safeExtGet("targetSdkVersion", 34)
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
publishing {
|
|
72
|
-
singleVariant("release") {
|
|
73
|
-
withSourcesJar()
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
lintOptions {
|
|
78
|
-
abortOnError false
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
def agpVersion = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION
|
|
83
|
-
if (agpVersion.tokenize('.')[0].toInteger() < 8) {
|
|
84
|
-
compileOptions {
|
|
85
|
-
sourceCompatibility JavaVersion.VERSION_11
|
|
86
|
-
targetCompatibility JavaVersion.VERSION_11
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
kotlinOptions {
|
|
90
|
-
jvmTarget = JavaVersion.VERSION_11.majorVersion
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
|
|
94
14
|
namespace "expo.modules.blur"
|
|
95
15
|
defaultConfig {
|
|
96
16
|
versionCode 1
|
|
97
|
-
versionName "
|
|
17
|
+
versionName "13.0.1"
|
|
98
18
|
}
|
|
99
|
-
|
|
100
19
|
}
|
|
101
20
|
|
|
102
21
|
dependencies {
|
|
103
|
-
// Remove this if and it's contents, when support for SDK49 is dropped
|
|
104
|
-
if (!safeExtGet("expoProvidesDefaultConfig", false)) {
|
|
105
|
-
implementation project(':expo-modules-core')
|
|
106
|
-
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:${getKotlinVersion()}"
|
|
107
|
-
}
|
|
108
22
|
implementation 'com.github.Dimezis:BlurView:version-2.0.3'
|
|
109
23
|
}
|
package/build/BlurView.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../src/BlurView.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../src/BlurView.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKjD,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IAClE,WAAW,CAAC,wDAA4C;IAExD;;;;OAIG;IACH,gBAAgB;IAIhB,MAAM;CAwBP"}
|
package/build/BlurView.js
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
|
+
// Copyright © 2024 650 Industries.
|
|
2
|
+
'use client';
|
|
1
3
|
import { requireNativeViewManager } from 'expo-modules-core';
|
|
2
4
|
import React from 'react';
|
|
3
5
|
import { View, StyleSheet } from 'react-native';
|
|
4
6
|
const NativeBlurView = requireNativeViewManager('ExpoBlurView');
|
|
7
|
+
// TODO: Class components are not supported with React Server Components.
|
|
5
8
|
export default class BlurView extends React.Component {
|
|
6
9
|
blurViewRef = React.createRef();
|
|
7
10
|
/**
|
package/build/BlurView.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlurView.js","sourceRoot":"","sources":["../src/BlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAIhD,MAAM,cAAc,GAAG,wBAAwB,CAAC,cAAc,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"BlurView.js","sourceRoot":"","sources":["../src/BlurView.tsx"],"names":[],"mappings":"AAAA,mCAAmC;AAEnC,YAAY,CAAC;AAEb,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAIhD,MAAM,cAAc,GAAG,wBAAwB,CAAC,cAAc,CAAC,CAAC;AAEhE,yEAAyE;AACzE,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,KAAK,CAAC,SAAwB;IAClE,WAAW,GAAI,KAAK,CAAC,SAAS,EAAyB,CAAC;IAExD;;;;OAIG;IACH,gBAAgB;QACd,OAAO,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IACnC,CAAC;IAED,MAAM;QACJ,MAAM,EACJ,IAAI,GAAG,SAAS,EAChB,SAAS,GAAG,EAAE,EACd,mBAAmB,GAAG,CAAC,EACvB,sBAAsB,GAAG,MAAM,EAC/B,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,GAAG,IAAI,CAAC,KAAK,CAAC;QACf,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAChD;QAAA,CAAC,cAAc,CACb,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CACtB,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,mBAAmB,CAAC,CAAC,mBAAmB,CAAC,CACzC,sBAAsB,CAAC,CAAC,sBAAsB,CAAC,CAC/C,KAAK,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,EAEjC;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CAAC,CACR,CAAC;IACJ,CAAC;CACF;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE,EAAE,eAAe,EAAE,aAAa,EAAE;CAC9C,CAAC,CAAC","sourcesContent":["// Copyright © 2024 650 Industries.\n\n'use client';\n\nimport { requireNativeViewManager } from 'expo-modules-core';\nimport React from 'react';\nimport { View, StyleSheet } from 'react-native';\n\nimport { BlurViewProps } from './BlurView.types';\n\nconst NativeBlurView = requireNativeViewManager('ExpoBlurView');\n\n// TODO: Class components are not supported with React Server Components.\nexport default class BlurView extends React.Component<BlurViewProps> {\n blurViewRef? = React.createRef<typeof NativeBlurView>();\n\n /**\n * @hidden\n * When Animated.createAnimatedComponent(BlurView) is used Reanimated will detect and call this\n * function to determine which component should be animated. We want to animate the NativeBlurView.\n */\n getAnimatableRef() {\n return this.blurViewRef?.current;\n }\n\n render() {\n const {\n tint = 'default',\n intensity = 50,\n blurReductionFactor = 4,\n experimentalBlurMethod = 'none',\n style,\n children,\n ...props\n } = this.props;\n return (\n <View {...props} style={[styles.container, style]}>\n <NativeBlurView\n ref={this.blurViewRef}\n tint={tint}\n intensity={intensity}\n blurReductionFactor={blurReductionFactor}\n experimentalBlurMethod={experimentalBlurMethod}\n style={StyleSheet.absoluteFill}\n />\n {children}\n </View>\n );\n }\n}\n\nconst styles = StyleSheet.create({\n container: { backgroundColor: 'transparent' },\n});\n"]}
|
package/build/BlurView.web.d.ts
CHANGED
|
@@ -1,13 +1,11 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import { BlurViewProps } from './BlurView.types';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}
|
|
2
|
+
declare const BlurView: import("react").ForwardRefExoticComponent<{
|
|
3
|
+
tint?: import("./BlurView.types").BlurTint | undefined;
|
|
4
|
+
intensity?: number | undefined;
|
|
5
|
+
blurReductionFactor?: number | undefined;
|
|
6
|
+
experimentalBlurMethod?: import("./BlurView.types").ExperimentalBlurMethod | undefined;
|
|
7
|
+
} & import("react-native").ViewProps & import("react").RefAttributes<{
|
|
8
|
+
setNativeProps: (props: BlurViewProps) => void;
|
|
9
|
+
}>>;
|
|
10
|
+
export default BlurView;
|
|
13
11
|
//# sourceMappingURL=BlurView.web.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlurView.web.d.ts","sourceRoot":"","sources":["../src/BlurView.web.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BlurView.web.d.ts","sourceRoot":"","sources":["../src/BlurView.web.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,QAAA,MAAM,QAAQ;;;;;;4BAAwC,aAAa,KAAK,IAAI;GAyC3E,CAAC;AAcF,eAAe,QAAQ,CAAC"}
|
package/build/BlurView.web.js
CHANGED
|
@@ -1,50 +1,42 @@
|
|
|
1
|
-
|
|
1
|
+
// Copyright © 2024 650 Industries.
|
|
2
|
+
'use client';
|
|
3
|
+
import { forwardRef, useImperativeHandle, useRef } from 'react';
|
|
2
4
|
import { View } from 'react-native';
|
|
3
5
|
import getBackgroundColor from './getBackgroundColor';
|
|
4
|
-
|
|
5
|
-
blurViewRef =
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
return (typeof CSS !== 'undefined' &&
|
|
35
|
-
(CSS.supports('-webkit-backdrop-filter', 'blur(1px)') ||
|
|
36
|
-
CSS.supports('backdrop-filter', 'blur(1px)')));
|
|
37
|
-
}
|
|
38
|
-
function getBlurStyle({ intensity, tint }) {
|
|
39
|
-
const style = {
|
|
6
|
+
const BlurView = forwardRef(({ tint = 'default', intensity = 50, style, ...props }, ref) => {
|
|
7
|
+
const blurViewRef = useRef(null);
|
|
8
|
+
const blurStyle = getBlurStyle({ tint, intensity });
|
|
9
|
+
useImperativeHandle(ref, () => ({
|
|
10
|
+
setNativeProps: (nativeProps) => {
|
|
11
|
+
if (!blurViewRef.current?.style) {
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
// @ts-expect-error: `style.intensity` is not defined in the types
|
|
15
|
+
const nextIntensity = nativeProps.style?.intensity ?? intensity;
|
|
16
|
+
const blurStyle = getBlurStyle({ intensity: nextIntensity, tint: tint ?? 'default' });
|
|
17
|
+
if (nativeProps.style) {
|
|
18
|
+
for (const key in nativeProps.style) {
|
|
19
|
+
if (key !== 'intensity') {
|
|
20
|
+
blurViewRef.current.style[key] = nativeProps.style[key];
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
blurViewRef.current.style.backgroundColor = blurStyle.backgroundColor;
|
|
25
|
+
blurViewRef.current.style.backdropFilter = blurStyle.backdropFilter;
|
|
26
|
+
blurViewRef.current.style['webkitBackdropFilter'] = blurStyle.WebkitBackdropFilter;
|
|
27
|
+
},
|
|
28
|
+
}), [intensity, tint]);
|
|
29
|
+
return (<View {...props} style={[style, blurStyle]}
|
|
30
|
+
/** @ts-expect-error: mismatch in ref type to support manually setting style props. */
|
|
31
|
+
ref={blurViewRef}/>);
|
|
32
|
+
});
|
|
33
|
+
function getBlurStyle({ intensity, tint, }) {
|
|
34
|
+
const blur = `saturate(180%) blur(${Math.min(intensity, 100) * 0.2}px)`;
|
|
35
|
+
return {
|
|
40
36
|
backgroundColor: getBackgroundColor(Math.min(intensity, 100), tint),
|
|
37
|
+
backdropFilter: blur,
|
|
38
|
+
WebkitBackdropFilter: blur,
|
|
41
39
|
};
|
|
42
|
-
if (isBlurSupported()) {
|
|
43
|
-
const blur = `saturate(180%) blur(${Math.min(intensity, 100) * 0.2}px)`;
|
|
44
|
-
style.backdropFilter = blur;
|
|
45
|
-
// Safari support
|
|
46
|
-
style.WebkitBackdropFilter = blur;
|
|
47
|
-
}
|
|
48
|
-
return style;
|
|
49
40
|
}
|
|
41
|
+
export default BlurView;
|
|
50
42
|
//# sourceMappingURL=BlurView.web.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlurView.web.js","sourceRoot":"","sources":["../src/BlurView.web.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"BlurView.web.js","sourceRoot":"","sources":["../src/BlurView.web.tsx"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,YAAY,CAAC;AACb,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAEtD,MAAM,QAAQ,GAAG,UAAU,CACzB,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC7D,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;IAEpD,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC;QACL,cAAc,EAAE,CAAC,WAA0B,EAAE,EAAE;YAC7C,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE;gBAC/B,OAAO;aACR;YAED,kEAAkE;YAClE,MAAM,aAAa,GAAG,WAAW,CAAC,KAAK,EAAE,SAAS,IAAI,SAAS,CAAC;YAChE,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,IAAI,SAAS,EAAE,CAAC,CAAC;YACtF,IAAI,WAAW,CAAC,KAAK,EAAE;gBACrB,KAAK,MAAM,GAAG,IAAI,WAAW,CAAC,KAAK,EAAE;oBACnC,IAAI,GAAG,KAAK,WAAW,EAAE;wBACvB,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;qBACzD;iBACF;aACF;YAED,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,eAAe,GAAG,SAAS,CAAC,eAAe,CAAC;YACtE,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,cAAc,GAAG,SAAS,CAAC,cAAc,CAAC;YACpE,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,sBAAsB,CAAC,GAAG,SAAS,CAAC,oBAAoB,CAAC;QACrF,CAAC;KACF,CAAC,EACF,CAAC,SAAS,EAAE,IAAI,CAAC,CAClB,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CACH,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IAC1B,sFAAsF;IACtF,GAAG,CAAC,CAAC,WAAW,CAAC,EACjB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,YAAY,CAAC,EACpB,SAAS,EACT,IAAI,GACgD;IACpD,MAAM,IAAI,GAAG,uBAAuB,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,GAAG,CAAC,GAAG,GAAG,KAAK,CAAC;IACxE,OAAO;QACL,eAAe,EAAE,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC;QACnE,cAAc,EAAE,IAAI;QACpB,oBAAoB,EAAE,IAAI;KAC3B,CAAC;AACJ,CAAC;AAED,eAAe,QAAQ,CAAC","sourcesContent":["// Copyright © 2024 650 Industries.\n'use client';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { View } from 'react-native';\n\nimport { BlurViewProps } from './BlurView.types';\nimport getBackgroundColor from './getBackgroundColor';\n\nconst BlurView = forwardRef<{ setNativeProps: (props: BlurViewProps) => void }, BlurViewProps>(\n ({ tint = 'default', intensity = 50, style, ...props }, ref) => {\n const blurViewRef = useRef<HTMLDivElement>(null);\n const blurStyle = getBlurStyle({ tint, intensity });\n\n useImperativeHandle(\n ref,\n () => ({\n setNativeProps: (nativeProps: BlurViewProps) => {\n if (!blurViewRef.current?.style) {\n return;\n }\n\n // @ts-expect-error: `style.intensity` is not defined in the types\n const nextIntensity = nativeProps.style?.intensity ?? intensity;\n const blurStyle = getBlurStyle({ intensity: nextIntensity, tint: tint ?? 'default' });\n if (nativeProps.style) {\n for (const key in nativeProps.style) {\n if (key !== 'intensity') {\n blurViewRef.current.style[key] = nativeProps.style[key];\n }\n }\n }\n\n blurViewRef.current.style.backgroundColor = blurStyle.backgroundColor;\n blurViewRef.current.style.backdropFilter = blurStyle.backdropFilter;\n blurViewRef.current.style['webkitBackdropFilter'] = blurStyle.WebkitBackdropFilter;\n },\n }),\n [intensity, tint]\n );\n\n return (\n <View\n {...props}\n style={[style, blurStyle]}\n /** @ts-expect-error: mismatch in ref type to support manually setting style props. */\n ref={blurViewRef}\n />\n );\n }\n);\n\nfunction getBlurStyle({\n intensity,\n tint,\n}: Required<Pick<BlurViewProps, 'intensity' | 'tint'>>): Record<string, string> {\n const blur = `saturate(180%) blur(${Math.min(intensity, 100) * 0.2}px)`;\n return {\n backgroundColor: getBackgroundColor(Math.min(intensity, 100), tint),\n backdropFilter: blur,\n WebkitBackdropFilter: blur,\n };\n}\n\nexport default BlurView;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "expo-blur",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "13.0.1",
|
|
4
4
|
"description": "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.",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"types": "build/index.d.ts",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"expo": "*"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "ee4f30ef3b5fa567ad1bf94794197f7683fdd481"
|
|
47
47
|
}
|
package/src/BlurView.tsx
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
// Copyright © 2024 650 Industries.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
1
5
|
import { requireNativeViewManager } from 'expo-modules-core';
|
|
2
6
|
import React from 'react';
|
|
3
7
|
import { View, StyleSheet } from 'react-native';
|
|
@@ -5,6 +9,8 @@ import { View, StyleSheet } from 'react-native';
|
|
|
5
9
|
import { BlurViewProps } from './BlurView.types';
|
|
6
10
|
|
|
7
11
|
const NativeBlurView = requireNativeViewManager('ExpoBlurView');
|
|
12
|
+
|
|
13
|
+
// TODO: Class components are not supported with React Server Components.
|
|
8
14
|
export default class BlurView extends React.Component<BlurViewProps> {
|
|
9
15
|
blurViewRef? = React.createRef<typeof NativeBlurView>();
|
|
10
16
|
|
package/src/BlurView.web.tsx
CHANGED
|
@@ -1,60 +1,64 @@
|
|
|
1
|
-
|
|
1
|
+
// Copyright © 2024 650 Industries.
|
|
2
|
+
'use client';
|
|
3
|
+
import { forwardRef, useImperativeHandle, useRef } from 'react';
|
|
2
4
|
import { View } from 'react-native';
|
|
3
5
|
|
|
4
6
|
import { BlurViewProps } from './BlurView.types';
|
|
5
7
|
import getBackgroundColor from './getBackgroundColor';
|
|
6
8
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Reanimated will detect and call this function with animated styles passed as props on every
|
|
12
|
-
* animation frame. We want to extract intensity from the props, then create and apply new styles,
|
|
13
|
-
* which create the blur based on the intensity and current tint.
|
|
14
|
-
*/
|
|
15
|
-
setNativeProps(nativeProps) {
|
|
16
|
-
const { style, tint, intensity: standardIntensity } = this.props;
|
|
17
|
-
const intensity = nativeProps.style.intensity ?? standardIntensity;
|
|
18
|
-
const blurStyle = getBlurStyle({ intensity, tint });
|
|
19
|
-
this.blurViewRef?.current?.setNativeProps({
|
|
20
|
-
...nativeProps,
|
|
21
|
-
style: [style, blurStyle, nativeProps.style],
|
|
22
|
-
});
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
render() {
|
|
26
|
-
const { tint = 'default', intensity = 50, style, ...props } = this.props;
|
|
9
|
+
const BlurView = forwardRef<{ setNativeProps: (props: BlurViewProps) => void }, BlurViewProps>(
|
|
10
|
+
({ tint = 'default', intensity = 50, style, ...props }, ref) => {
|
|
11
|
+
const blurViewRef = useRef<HTMLDivElement>(null);
|
|
27
12
|
const blurStyle = getBlurStyle({ tint, intensity });
|
|
28
|
-
return <View {...props} style={[style, blurStyle]} ref={this.blurViewRef} />;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
13
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
// https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility
|
|
40
|
-
return (
|
|
41
|
-
typeof CSS !== 'undefined' &&
|
|
42
|
-
(CSS.supports('-webkit-backdrop-filter', 'blur(1px)') ||
|
|
43
|
-
CSS.supports('backdrop-filter', 'blur(1px)'))
|
|
44
|
-
);
|
|
45
|
-
}
|
|
14
|
+
useImperativeHandle(
|
|
15
|
+
ref,
|
|
16
|
+
() => ({
|
|
17
|
+
setNativeProps: (nativeProps: BlurViewProps) => {
|
|
18
|
+
if (!blurViewRef.current?.style) {
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
46
21
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
22
|
+
// @ts-expect-error: `style.intensity` is not defined in the types
|
|
23
|
+
const nextIntensity = nativeProps.style?.intensity ?? intensity;
|
|
24
|
+
const blurStyle = getBlurStyle({ intensity: nextIntensity, tint: tint ?? 'default' });
|
|
25
|
+
if (nativeProps.style) {
|
|
26
|
+
for (const key in nativeProps.style) {
|
|
27
|
+
if (key !== 'intensity') {
|
|
28
|
+
blurViewRef.current.style[key] = nativeProps.style[key];
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
blurViewRef.current.style.backgroundColor = blurStyle.backgroundColor;
|
|
34
|
+
blurViewRef.current.style.backdropFilter = blurStyle.backdropFilter;
|
|
35
|
+
blurViewRef.current.style['webkitBackdropFilter'] = blurStyle.WebkitBackdropFilter;
|
|
36
|
+
},
|
|
37
|
+
}),
|
|
38
|
+
[intensity, tint]
|
|
39
|
+
);
|
|
51
40
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
41
|
+
return (
|
|
42
|
+
<View
|
|
43
|
+
{...props}
|
|
44
|
+
style={[style, blurStyle]}
|
|
45
|
+
/** @ts-expect-error: mismatch in ref type to support manually setting style props. */
|
|
46
|
+
ref={blurViewRef}
|
|
47
|
+
/>
|
|
48
|
+
);
|
|
57
49
|
}
|
|
50
|
+
);
|
|
58
51
|
|
|
59
|
-
|
|
52
|
+
function getBlurStyle({
|
|
53
|
+
intensity,
|
|
54
|
+
tint,
|
|
55
|
+
}: Required<Pick<BlurViewProps, 'intensity' | 'tint'>>): Record<string, string> {
|
|
56
|
+
const blur = `saturate(180%) blur(${Math.min(intensity, 100) * 0.2}px)`;
|
|
57
|
+
return {
|
|
58
|
+
backgroundColor: getBackgroundColor(Math.min(intensity, 100), tint),
|
|
59
|
+
backdropFilter: blur,
|
|
60
|
+
WebkitBackdropFilter: blur,
|
|
61
|
+
};
|
|
60
62
|
}
|
|
63
|
+
|
|
64
|
+
export default BlurView;
|