react-native-blur: матовое стекло и backdrop blur для React Native и Expo

⚡ Главное за 5 секунд - Библиотека react-native-blur от nguyenduy1412 даёт backdrop blur и frosted glass для React Native и Expo на iOS и Android. - Доступна на GitHub; установка через npm, yarn, pnpm или bun, затем pod install для iOS. - Ограничение: из-за нативного кода не работает в Expo Go — нужен development build или EAS Build. ### 🔍 Что обнаружено На GitHub опубликован проект react-native-blur — нативный Fabric-компонент для React Native CLI и Expo без JS-зависимостей. На iOS используется UIVisualEffectView с системными стилями, на Android — цепочка RenderEffect (Gaussian blur + цветовая матрица), откалиброванная по скриншотам iOS: средняя ошибка 1.95/255 на 187 образцах цвета. Поддерживаются два режима: backdrop (размывает то, что позади вьюхи — оверлеи, заголовки, таб-бары) и content (размывает внутренний контент, включая целый экран или видео). Для Android присутствует отдельный механизм для SurfaceView-плееров, например expo-video и react-native-video. Минимальные требования: React Native 0.76 с новой архитектурой (Fabric), iOS 15.1, Android API 31 (Android 12) для полноценного блюра. На старых Android-версиях остаются только tint и обводка. Для Expo проверен SDK 57. Один пропс intensity от 0 до 100 управляет размытием, цветом и бликом одновременно; доступны светлая и тёмная темы, а также настройка tintColor, blurRadius и saturation. Для веба предусмотрен фолбэк на CSS backdrop-filter. ### 💡 Почему это важно Большинство существующих blur-библиотек для React Native ломаются на Android в трёх типичных случаях: не размывают оверлеи, не видят видео из SurfaceView и выглядят иначе, чем на iOS. Здесь backdrop mode записывает всё, что отрисовано позади вьюхи, и размывает это, поэтому шапки, карточки, попапы и кнопки ведут себя на Android так же, как на iOS. content mode автоматически подхватывает SurfaceView-плееры, так что видео, включая Play/Stop поверх него, размывается корректно. Это готовое кросс-платформенное решение для приложений, где нужен «стеклянный» интерфейс. ### 🧩 Контекст Проблема видео на Android возникает из-за того, что SurfaceView, в котором играет ролик, система компонует поверх окна приложения — библиотеки, делающие снимок view-tree, такой слой просто не видят. Поэтому видео остаётся чётким за «стеклом». react-native-blur обходит это, работая на уровне нативного рендера. На Android также доступна имитация системных материалов iOS, включая блик по краю, который создаёт эффект «толщины» стекла. Калибровка по 187 цветам даёт визуальную близость к оригиналу. Для разработчиков это снижает необходимость писать обходные костыли под каждую платформу.

🔗 Читать на github.com