React Nativeで魅力的なボトムシートを実装！`react-native-bottom-sheet`入門

目次

1. ボトムシートとは？
2. React Native Bottom Sheetの特徴
3. インストール方法
4. 基本的な使用方法
5. まとめ

---

ボトムシートとは？

ボトムシートは、モバイルアプリケーションのUIデザインパターンの1つで、画面の下部からスライドアップして表示されるコンテンツのレイヤーを指します。これは、ユーザーに追加の情報やアクションを提供するための方法として使用されます。ボトムシートは、メニューオプション、ナビゲーション、または情報の詳細など、さまざまな目的で使用されます。

React Native Bottom Sheetの特徴

react-native-bottom-sheetは、以下のような特徴を持っています：

• モーダル表示ビュー、Bottom Sheet Modal
• スムーズなジェスチャーインタラクションとスナッピングアニメーション
• iOSとAndroidのシームレスなキーボード処理
• FlatList、SectionList、ScrollView、Viewのスクロールインタラクションをサポート
• Expoと互換性があります
• TypeScriptで書かれています

インストール方法

yarn add @gorhom/bottom-sheet@^4

依存関係:

yarn add react-native-reanimated react-native-gesture-handler

Expoを使用している場合:

expo install react-native-reanimated react-native-gesture-handler

基本的な使用方法

以下は、基本的なボトムシートの実装例です：

import React from 'react';
import { View, Text, Button } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';

const App = () => {
  const bottomSheetRef = useRef(null);

  const handleOpenSheet = () => {
    bottomSheetRef.current.snapTo(1);
  };

  return (
    <View style={{ flex: 1 }}>
      <Button title="Open Bottom Sheet" onPress={handleOpenSheet} />
      <BottomSheet
        ref={bottomSheetRef}
        index={0}
        snapPoints={['25%', '50%', '75%']}
      >
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>This is the content of the Bottom Sheet</Text>
        </View>
      </BottomSheet>
    </View>
  );
};

export default App;

まとめ

react-native-bottom-sheetを使用すると、React Nativeアプリケーションに魅力的なボトムシートを簡単に追加することができます。このライブラリの多彩な特徴と簡単な実装方法を活用して、ユーザーエクスペリエンスを向上させましょう！

---

いいねやコメントがあれば、大変助かります！質問やフィードバックもお気軽にどうぞ！🚀