概要

このリポジトリは「Expo Progressive Blur」として、React Native（特にExpo環境）向けにiOSのネイティブアプリで見られるような段階的に強くなるブラー効果を持つヘッダーコンポーネントを提供します。主要な要素は、グラデーションマスクのための MaskedView、実際のぼかしを担う expo-blur の BlurView、そしてスクロールに同期してアニメーションを行う react-native-reanimated の組み合わせです。TypeScriptで書かれており、ヘッダーの高さやぼかしの強さ、マスクのグラデーションを簡単に調整できます。特にiOSのビジュアルに近い表現を目指しており、アプリ内で自然な半透明レイヤー表現を実現します。

リポジトリの統計情報

スター数: 27
フォーク数: 1
ウォッチャー数: 27
コミット数: 6
ファイル数: 10
メインの言語: TypeScript

主な特徴

iOSスタイルの「プログレッシブブラー」ヘッダーをReact Nativeで再現
MaskedView + BlurView を組み合わせ、部分的に強さが変わるブラーを実現
react-native-reanimated を使った高性能なスクロール同期アニメーション
TypeScriptで型安全に実装、Expo管理ワークフローとの親和性が高い

技術的なポイント

このコンポーネントが面白いのは、単純にBlurViewを載せるだけでなく「マスク」と「アニメーション」を併用している点です。MaskedViewにグラデーションマスクを適用すると、BlurViewの効果がヘッダー内で段階的に乗るため、上部は強く、下部は弱くといった滑らかな遷移が可能になります。これにより単一の均一なぼかしでは得られない層感（layered translucency）を表現できます。

アニメーションには react-native-reanimated を使い、スクロール位置（Shared Value）を直接ネイティブ側で扱うことで、JSスレッド依存を避けつつ滑らかなトランジションを実現します。一般的なパターンは ScrollView や FlatList の onScroll を useAnimatedScrollHandler で受け、スクロール値を基にマスクのオフセットや BlurView の不透明度（あるいは半径）を補間することです。これによりヘッダーはスクロールに連動して「だんだんブラーが強くなる」自然な挙動を示します。

パフォーマンス面では、expo-blur がネイティブ側で処理を行うため見た目の品質は良好ですが、BlurView と MaskedView の組み合わせはオーバードロー（画面上の重複描画）を増やす可能性があります。対処法としてはブラーを適用する領域を必要最小限に限定する、アニメーション更新をShared Valueのみに閉じる、あるいは不必要に高いブラー半径を避ける等が有効です。また、プラットフォーム差異も意識が必要です — iOSでは UIVisualEffectView によるネイティブなブラーが効きやすい一方、Androidでは表現やパフォーマンスが異なるため見た目を調整するオプションを用意しておくと良いでしょう。

設計上のポイントとしては、コンポーネントを小さな責務に分け、マスクの定義（グラデーションストップ）やブラー強度、ヘッダーの高さなどをプロップで外から制御できるようにすること。TypeScriptで型を定義しておけば、他の開発者が導入する際の学習コストが下がります。Expo管理下で動作するため、導入も比較的簡単で、既存のスクロールビューに差し替えるだけで効果を得られる点も実用的です。

プロジェクトの構成

主要なファイルとディレクトリ：

.gitignore: file
.vscode: dir
README.md: file
app.json: file
app: dir
- （アプリのエントリやサンプル実装が含まれるディレクトリ）
package.json: file
tsconfig.json: file
assets: dir
LICENSE: file
その他テストや設定ファイル等 1–2 個

※ リポジトリは比較的コンパクトにまとまっており、TypeScript の型定義とサンプルアプリ（app ディレクトリ）を中心に、コンポーネントの実装と利用例が含まれる構成です。

まとめ

Expo環境でiOSらしい階層的ブラーを手軽に導入できる実用的なコンポーネント集。

リポジトリ情報：

名前: expo-progressive-blur
説明: ✨ iOS-like progressive blur effect for React Native
スター数: 27
言語: TypeScript
URL: https://github.com/rit3zh/expo-progressive-blur
オーナー: rit3zh
アバター: https://avatars.githubusercontent.com/u/119659853?v=4

READMEの抜粋：

🚀 Expo Progressive Blur

This component recreates the modern, layered Apple-style translucent headers you’ll find across iOS apps like Settings, Wallet, and Music now entirely in React Native

🧠 Overview

The Progressive Blur Header uses:

MaskedView → for applying a gradient-based mask on top of the header background.
BlurView (expo-blur) → to add real-time iOS-like material blur.
react-native-reanimated → to animate the header opaci…

Expo Progressive Blur — iOS風プログレッシブブラー（React Native）