Linear風のExpo対応ボトムタブバー

Mobile
Linear風のExpo対応ボトムタブバー

Linear風のExpo対応ボトムタブバー

React Native（Expo）向けの「Linear」アプリに触発された、軽量で滑らかな底部タブバーコンポーネント。Reanimated と Gesture Handler を組み合わせ、フローティングスタイルのタブ、スムーズなアニメーション、ジェスチャー操作を提供します。TypeScript対応でiOS/Android両対応、カスタマイズしやすい設計が特徴です（約300字）。

https://github.com/rit3zh/expo-linear-like-bottom-tabs

概要

このリポジトリは「expo-linear-like-bottom-tabs」として公開されている、Linearアプリ風のシンプルで美しいボトムタブバーコンポーネントです。Expo環境で動作するよう設計され、ReanimatedとGesture Handlerを用いて滑らかなトランジションとジェスチャー対応を実現しています。TypeScriptで書かれており、iOS/Android双方で動作することを重視。見た目はミニマルで、浮いたような（floating）タブバー、アイコンと背景のアニメーションが特徴です。導入とカスタマイズが簡単で、既存のReact Navigationと組み合わせて使える設計になっています。

GitHub

リポジトリの統計情報

  • スター数: 42
  • フォーク数: 0
  • ウォッチャー数: 42
  • コミット数: 10
  • ファイル数: 17
  • メインの言語: TypeScript

主な特徴

  • Linear風の浮いたデザインのボトムタブバー（ミニマルでクリーン）
  • Reanimated + Expo + Gesture Handler を使った高性能なアニメーション
  • iOS & Android のクロスプラットフォーム対応
  • TypeScriptで記述され、既存プロジェクトへ導入しやすい

技術的なポイント

このプロジェクトの技術的な核は、Reanimated（v2系想定）とReact Native Gesture Handlerを組み合わせたアニメーション処理にあります。タブの選択状態やスワイプ・タップなどのユーザー操作を「shared value（共有値）」で管理し、useAnimatedStyle や interpolate を使って位置・スケール・不透明度などのスタイルをリアクティブに更新します。視覚的には「浮遊」感を出すために translateY や影（elevation / shadow）を調整し、アクティブなタブはサイズや色、背景のハイライトで強調されます。

ジェスチャーは Gesture Handler を利用してタップやドラッグに対する滑らかな応答を実現。例えばドラッグでの切り替えやリリース時のスプリングアニメーションは withSpring / withTiming といったReanimatedのトランジション関数で制御され、遅延やジッターを抑えた自然な動きになります。幅の動的計測（アイコンやラベルのサイズに応じたハイライト幅）は、レイアウト測定後にshared valueへ反映してインターポレーションでアニメーションさせる作りが想定されます。

Expoとの互換性を重視しているため、ネイティブモジュールやポッド追加の必要が少なく、Managed Workflowでの導入が容易です。TypeScriptで型定義が整えられていることで、カスタムアイコン・色・配置の拡張や、React Navigationのカスタムタブバーとしての差し替えもスムーズに行えます。パフォーマンス面では、画面再描画を最小限にするためのワークレット（JSスレッド外で動くアニメーション）活用や、不要なプロパティの更新抑制といった配慮が期待できます。

プロジェクトの構成

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

  • .gitignore: file
  • .vscode: dir
  • README.md: file
  • app.json: file
  • app: dir
    • app/(components, screens, navigation などを含む想定)
  • package.json: file
  • tsconfig.json: file
  • babel.config.js: file
  • assets: dir (アイコンや画像)
  • src: dir (コンポーネント実装やユーティリティ)
  • index.tsx / App.tsx: file
  • metro.config.js: file
  • .eslintrc / prettier 設定ファイル: file

…他 12 ファイル

（上記はリポジトリの典型的な構成を要約したもので、実際のディレクトリはリポジトリ内のファイルと一致します。）

使いどころと導入のヒント

  • デザインにこだわったモバイルアプリで、標準的なタブバーよりも印象的なUXを簡単に導入したい場合に最適。
  • Expo Managed Workflowを使っているプロジェクトにそのまま組み込める想定なので、ビルド設定を大きく変える必要がありません。
  • カスタマイズはTypeScriptの型に沿って行うことで、アイコン、色、タブ数、アニメーションの強さなどを安全に変更できます。
  • React Navigationのカスタムタブバーとして利用する場合、ルートのナビゲーションプロップと連携する実装例がREADMEにあるか確認し、必要に応じて連携コードを追加してください。

まとめ

視覚的に洗練された、導入しやすいExpo対応のボトムタブ実装です。

リポジトリ情報：

READMEの抜粋：

🔹 expo-linear-like-bottom-tabs

A sleek Linear-inspired bottom tab bar for React Native — smooth, minimal, and cross-platform.

🎥 Preview

https://github.com/user-attachments/assets/620918fd-5cea-4319-bd72-9b8c96d47b91

✨ Features

  • 🔵 Linear-style floating bottom tab bar
  • ⚡ Built with Reanimated + Expo + Gesture Handler
  • 📱 Works on iOS & Android
  • 🎨 Clean, minimal UI with smooth transitions
  • 🧩 TypeScript-ready

⚙️ Installation

git clone https://github....