feat: Update the Dimezis's BlurView library to the 3v

.github/workflows/release.yml

@@ -26,11 +26,6 @@ jobs:
       - name: Setup
         uses: ./.github/actions/setup
 
-      - name: Configure Git
-        run: |
-          git config --global user.name "Daniel Sansão Araldi"
-          git config --global user.email "danielsaraldi@gmail.com"
-
       - name: Configure NPM
         run: |
           echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc

README.md

@@ -31,8 +31,12 @@ A simple blur view in react native based in [`@react-native-community/blur`](htt
 
 - [Installation](#installation)
 - [Usage](#usage)
-- [Properties](#properties)
-  - [Blur Types](#blur-types)
+- [Components](#components)
+  - [`BlurView`](#blurview)
+    - [Properties](#properties)
+    - [Blur Types](#blur-types)
+  - [`BlurTarget`](#blurtarget)
+    - [Properties](#properties-1)
 - [Platform Differences](#platform-differences)
   - [Android](#android)
   - [iOS](#ios)
@@ -58,15 +62,29 @@ cd ios && pod install && cd ..
 ## Usage
 
 ```tsx
-import { BlurView } from '@danielsaraldi/react-native-blur-view';
+import { BlurView, BlurTarget } from '@danielsaraldi/react-native-blur-view';
 
-// ...
+export default function App() {
+  // ...
 
-return (
-  <BlurView style={styles.blurView}>
-    <Text style={styles.title}>BlurView</Text>
-  </BlurView>
-);
+  return (
+    <>
+      <BlurView targetId="target" style={styles.blurView}>
+        <Text style={styles.title}>BlurView</Text>
+      </BlurView>
+
+      <BlurTarget id="target" style={styles.main}>
+        <ScrollView
+          style={styles.main}
+          contentContainerStyle={styles.content}
+          showsVerticalScrollIndicator={false}
+        >
+          {/* ... */}
+        </ScrollView>
+      </BlurTarget>
+    </>
+  );
+}
 
 export const styles = StyleSheet.create({
   blurView: {
@@ -85,22 +103,88 @@ export const styles = StyleSheet.create({
 
     color: 'white',
   },
+
+  main: {
+    flex: 1,
+  },
+
+  content: {
+    padding: 20,
+
+    gap: 8,
+  },
 });
 ```
 
-## Properties
+If you are using [@react-navigation/bottom-tabs](https://reactnavigation.org/docs/bottom-tab-navigator/) with blur, all screens that the bottom tabs will navigate must contain a `BlurTarget` as a parent component on them. An example below:
+
+```tsx
+// screens/MyScreen.tsx
+import { useNavigation } from '@react-navigation/native';
+import { BlurTarget } from '@danielsaraldi/react-native-blur-view';
+
+export function MyScreen() {
+  const { getState } = useNavigation();
+
+  const pageIndex = getState()?.index || 0;
+  const id = getState()?.routeNames[pageIndex] || 'MyScreen';
+
+  // ...
+
+  return (
+    <BlurTarget id={id} style={styles.container}>
+      {/* ... */}
+    </BlurTarget>
+  );
+}
+```
+
+```tsx
+// components/MyCustomTabs.tsx
+import type { BottomTabBarProps } from '@react-navigation/bottom-tabs';
+import { BlurView } from '@danielsaraldi/react-native-blur-view';
+
+export function MyCustomTabs(props: BottomTabBarProps) {
+  const { state } = props;
+
+  const pageIndex = getState()?.index || 0;
+  const targetId = getState()?.routeNames[pageIndex] || 'MyScreen';
+
+  // ...
+
+  return (
+    <View style={styles.container}>
+      <BlurView targetId={pageIndex} style={styles.content}>
+        {/* ... */}
+      </BlurView>
+    </View>
+  );
+}
+```
+
+The `MyCustomTabs` component must be used in the `tabBar` property of the `Navigator`'s bottom tabs. Notice that the `targetId` of the `MyScreen` screen **references** the `id` in the custom bottom tab component.
+
+The target value **must be updated every time** a new screen is rendered, so we've used the route name in this example. However, you can explore other approaches, so feel free to do so.
+
+**Note**: We **don't yet** have full support for nested tabs.
+
+## Components
+
+### `BlurView`
 
 The `BlurView` component is an extends the same properties of the a `View` component.
 
-| Property | Description                | Default     | Platform |
-| -------- | -------------------------- | ----------- | -------- |
-| `type`   | Color type of the overlay. | `light`     | All      |
-| `radius` | Blur radius `0` - `100`.   | `10`        | All      |
-| `style`  | The View style.            | `undefined` | All      |
+#### Properties
+
+| Property   | Description                            | Default     | Platform |
+| ---------- | -------------------------------------- | ----------- | -------- |
+| `targetId` | Id of the target that will be blurred. | `undefined` | Android  |
+| `type`     | Color type of the overlay.             | `light`     | All      |
+| `radius`   | Blur radius `0` - `100`.               | `10`        | All      |
 
 An important detail, when a value less than `0` or greater than `100` are provided for `radius` property, the `radius` is clipped.
 
-### Blur Types
+#### Blur Types
 
 | Property                    | Description                                                                                                                                               | Platform |
 | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
@@ -125,11 +209,27 @@ An important detail, when a value less than `0` or greater than `100` are provid
 | `thin-material-dark`        | A blur effect that creates the appearance of a thin material and is always dark. Radius **doesn't apply** to this. (**iOS >= 13**)                        | All      |
 | `ultra-thin-material-dark`  | A blur effect that creates the appearance of an ultra-thin material and is always dark. Radius **doesn't apply** to this. (**iOS >= 13**)                 | All      |
 
+### `BlurTarget`
+
+The `BlurTarget` component is an extends the same properties of the a `View` component.
+
+This component is exclusive and mandatory for **Android**. It's useful because we use [Dimezis's 3v library](https://github.com/Dimezis/BlurView) to apply the blur effect, so its implementation is slightly different than on iOS. On iOS the `BlurTarget` component is a common `View`.
+
+The `BlurTarget` may not contain a `BlurView` that targets the same `BlurTarget`. The `BlurTarget` may contain other `BlurTargets` and `BlurViews` though.
+
+#### Properties
+
+| Property | Description                                       | Platform |
+| -------- | ------------------------------------------------- | -------- |
+| `id`     | Id of this target to be identified by `BlurView`. | Android  |
+
 ## Platform Differences
 
 ### Android
 
-On Android platforms, the component utilizes the BlurView library to offer native blur effects with hardware-accelerated rendering. Support the animation transitions with [react-native-screens](https://github.com/software-mansion/react-native-screens) and Modals 😁.
+On Android platforms, the component utilizes the [BlurView](https://github.com/Dimezis/BlurView) library to offer native blur effects with hardware-accelerated rendering.
+
+Support the animation transitions with [react-native-screens](https://github.com/software-mansion/react-native-screens), [react-native-navigation](https://wix.github.io/react-native-navigation) and Modals 😁.
 
 ### iOS
 
@@ -144,13 +244,21 @@ In Expo, you need to convert to a [custom development build](https://docs.expo.d
 Full TypeScript support with proper type definitions!
 
 ```ts
-import { BlurViewType, BlurViewProps } from '@danielsaraldi/react-native-blur';
+import {
+  BlurViewType,
+  BlurViewProps,
+  BlurTargetProps,
+} from '@danielsaraldi/react-native-blur-view';
 
 export const INITIAL_BLUR_TYPE: BlurViewType = 'x-light';
 
 export interface CustomBlurViewProps extends BlurViewProps {
   // ...
 }
+
+export interface CustomBlurTargetProps extends BlurTargetProps {
+  // ...
+}
 ```
 
 ## Contributing

android/build.gradle

@@ -73,7 +73,7 @@ repositories {
 def kotlin_version = getExtOrDefault("kotlinVersion")
 
 dependencies {
-  implementation 'com.github.Dimezis:BlurView:version-2.0.6'
+  implementation 'com.github.Dimezis:BlurView:version-3.2.0'
   implementation 'com.facebook.react:react-android:0.79.2'
 
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"

android/src/main/java/com/blurview/BlurOverlayColor.kt

@@ -0,0 +1,54 @@
+package com.blurview
+
+import android.graphics.Color
+
+enum class BlurOverlayColor(val color: Int) {
+  X_LIGHT(Color.argb(140, 240, 240, 240)),
+  LIGHT(Color.argb(42, 255, 255, 255)),
+  DARK(Color.argb(120, 26, 22, 22)),
+  REGULAR(Color.argb(35, 255, 255, 255)),
+  PROMINENT(Color.argb(140, 240, 240, 240)),
+  ULTRA_THIN_MATERIAL(Color.argb(75, 240, 240, 240)),
+  ULTRA_THIN_MATERIAL_LIGHT(Color.argb(77, 240, 240, 240)),
+  ULTRA_THIN_MATERIAL_DARK(Color.argb(65, 40, 40, 40)),
+  THIN_MATERIAL(Color.argb(102, 240, 240, 240)),
+  THIN_MATERIAL_LIGHT(Color.argb(105, 240, 240, 240)),
+  THIN_MATERIAL_DARK(Color.argb(102, 35, 35, 35)),
+  MATERIAL(Color.argb(140, 245, 245, 245)),
+  MATERIAL_LIGHT(Color.argb(140, 248, 248, 248)),
+  MATERIAL_DARK(Color.argb(215, 65, 60, 60)),
+  THICK_MATERIAL(Color.argb(210, 248, 248, 248)),
+  THICK_MATERIAL_LIGHT(Color.argb(212, 248, 248, 248)),
+  THICK_MATERIAL_DARK(Color.argb(165, 35, 35, 35)),
+  CHROME_MATERIAL(Color.argb(165, 248, 248, 248)),
+  CHROME_MATERIAL_LIGHT(Color.argb(167, 248, 248, 248)),
+  CHROME_MATERIAL_DARK(Color.argb(100, 32, 32, 32));
+
+  companion object {
+    fun fromString(color: String): BlurOverlayColor {
+      return when (color.lowercase()) {
+        "x-light" -> X_LIGHT
+        "light" -> LIGHT
+        "dark" -> DARK
+        "regular" -> REGULAR
+        "prominent" -> PROMINENT
+        "ultra-thin-material" -> ULTRA_THIN_MATERIAL
+        "ultra-thin-material-light" -> ULTRA_THIN_MATERIAL_LIGHT
+        "ultra-thin-material-dark" -> ULTRA_THIN_MATERIAL_DARK
+        "thin-material" -> THIN_MATERIAL
+        "thin-material-light" -> THIN_MATERIAL_LIGHT
+        "thin-material-dark" -> THIN_MATERIAL_DARK
+        "material" -> MATERIAL
+        "material-light" -> MATERIAL_LIGHT
+        "material-dark" -> MATERIAL_DARK
+        "thick-material" -> THICK_MATERIAL
+        "thick-material-light" -> THICK_MATERIAL_LIGHT
+        "thick-material-dark" -> THICK_MATERIAL_DARK
+        "chrome-material" -> CHROME_MATERIAL
+        "chrome-material-light" -> CHROME_MATERIAL_LIGHT
+        "chrome-material-dark" -> CHROME_MATERIAL_DARK
+        else -> LIGHT
+      }
+    }
+  }
+}