SwiftUI Blur filter with Expo UI

BlurExampleWithExpoUI.tsx

import { Group, Host, RNHostView } from '@expo/ui/swift-ui';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import Animated, { useAnimatedProps, useSharedValue, withTiming } from 'react-native-reanimated';

const AnimatedGroup = Animated.createAnimatedComponent(Group);

const STEP = 4;
const MAX_RADIUS = 40;

export default function Playground() {
  const radius = useSharedValue(0);

  const adjust = (delta: number) => {
    const next = Math.min(MAX_RADIUS, Math.max(0, radius.value + delta));
    radius.value = withTiming(next, { duration: 200 });
  };

  const animatedProps = useAnimatedProps(() => ({
    modifiers: [{ $type: 'blur', radius: radius.value }],
  }));

  return (
    <View style={styles.container}>
      <Host style={styles.host} ignoreSafeArea="all">
        <AnimatedGroup animatedProps={animatedProps}>
          <RNHostView matchContents>
            <View style={styles.box} />
          </RNHostView>
        </AnimatedGroup>
      </Host>

      <View style={styles.row}>
        <Pressable style={styles.button} onPress={() => adjust(-STEP)}>
          <Text style={styles.buttonLabel}>- blur</Text>
        </Pressable>
        <Pressable style={styles.button} onPress={() => adjust(STEP)}>
          <Text style={styles.buttonLabel}>+ blur</Text>
        </Pressable>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 40,
    gap: 24,
  },
  host: {
    height: 120,
  },
  box: {
    width: 120,
    height: 120,
    backgroundColor: '#0a84ff',
  },
  row: {
    flexDirection: 'row',
    gap: 12,
  },
  button: {
    paddingVertical: 10,
    paddingHorizontal: 16,
    borderRadius: 8,
    backgroundColor: '#e5e5ea',
  },
  buttonLabel: {
    fontSize: 15,
    fontWeight: '600',
  },
});