⭐️ Impl: Ex - RNIBlurViewTest03Screen

example/src/constants/ExampleCardItems.ts

@@ -42,6 +42,10 @@ export const EXAMPLE_ITEMS: Array<ExampleItem> = (() => {
     {
       ...ROUTE_MAP.blurViewTest02,
       type: 'screen',
+    }, 
+    {
+      ...ROUTE_MAP.blurViewTest03,
+      type: 'screen',
     }
   ];
 

example/src/constants/RouteItems.ts

@@ -1,6 +1,7 @@
 import { HomeScreen } from "../components/HomeScreen";
 import { RNIBlurViewTest01Screen } from "../examples/RNIBlurViewTest01Screen";
 import { RNIBlurViewTest02Screen } from "../examples/RNIBlurViewTest02Screen";
+import { RNIBlurViewTest03Screen } from "../examples/RNIBlurViewTest03Screen";
 import { RNIVisualEffectViewTest01Screen } from "../examples/RNIVisualEffectViewTest01Screen";
 
 import type { RouteKey } from "./RouteKeys";
@@ -23,4 +24,7 @@ export const ROUTE_ITEMS: Array<RouteEntry> = [{
 }, {
   routeKey: 'blurViewTest02',
   component: RNIBlurViewTest02Screen,
+}, {
+  routeKey: 'blurViewTest03',
+  component: RNIBlurViewTest03Screen,
 }];

example/src/constants/RouteKeys.ts

@@ -4,6 +4,7 @@ export const ROUTE_KEYS = {
   visualEffectViewTest01: 'visualEffectViewTest01',
   blurViewTest01: 'blurViewTest01',
   blurViewTest02: 'blurViewTest02',
+  blurViewTest03: 'blurViewTest03',
 };
 
 export type RouteKey = keyof (typeof ROUTE_KEYS);

example/src/examples/RNIBlurViewTest03Screen.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { CardButton, Colors, ExampleItemCard, ObjectPropertyDisplay, UIBlurEffectStyleItems, type UIBlurEffectStyle } from 'react-native-ios-utilities';
+import { RNIBlurView } from 'react-native-ios-visual-effect-view';
+import Slider from '@react-native-community/slider';
+
+
+export function RNIBlurViewTest03Screen() {
+  const [blurEffectStyleCounter, setBlurEffectStyleCounter] = React.useState(0);
+  const [blurRadius, setBlurRadius] = React.useState(0);
+
+  const blurEffectStyleIndex = 
+    blurEffectStyleCounter % UIBlurEffectStyleItems.length;
+
+  const blurEffectStyleCurrent = UIBlurEffectStyleItems[blurEffectStyleIndex]!;
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>
+        {'❤️\n🧡\n💛\n💚\n💙\n💜\n💖\n💃\n✨'}
+      </Text>
+      <RNIBlurView
+        style={styles.effectOverlay}
+        blurConfig={{
+          mode: 'customBlurRadius',
+          blurEffectStyle: blurEffectStyleCurrent,
+          radius: blurRadius,
+        }}
+      />
+      <SafeAreaView style={styles.debugOverlayContainer}>
+        <ExampleItemCard
+          title={'Card Controls'}
+          style={styles.debugCard}
+        >
+          <ObjectPropertyDisplay
+            style={styles.debugCardBodyItem}
+            recursiveStyle={styles.debugDisplay}
+            object={{
+              blurEffectStyleCounter,
+              blurRadius: blurRadius.toFixed(2),
+              blurEffectStyleCurrent: {
+                [blurEffectStyleIndex]: blurEffectStyleCurrent,
+              },
+            }}
+          />
+          <Slider
+            style={[styles.slider, styles.debugCardBodyItem]}
+            minimumValue={0}
+            maximumValue={64}
+            minimumTrackTintColor={Colors.PURPLE.A700}
+            maximumTrackTintColor={`${Colors.PURPLE[900]}50`}
+            onValueChange={(newValue) => {
+              setBlurRadius(newValue);
+            }}
+          />
+          <CardButton
+            style={styles.debugCardBodyItem}
+            title={'Next Blur Effect'}
+            subtitle={'Apply next blur effect'}
+            onPress={() => {
+              setBlurEffectStyleCounter((prevValue) => prevValue + 1);
+            }}
+          />
+        </ExampleItemCard>
+      </SafeAreaView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'white',
+  },
+  label: {
+    fontSize: 72,
+  },
+  effectOverlay: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+  debugOverlayContainer: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    justifyContent: 'flex-end',
+    marginHorizontal: 12,
+  },
+  debugCardBodyItem: {
+    marginBottom: 6,
+  },
+  debugCard: {
+    backgroundColor: Colors.PURPLE[100],
+  },
+  debugDisplay: {
+    backgroundColor: `${Colors.PURPLE[200]}99`,
+  },
+  slider: {
+    flex: 1,
+    paddingVertical: 18,
+  },
+});