npx expo install @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler

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

export default function App() {
  const bottomSheetRef = useRef<BottomSheet>(null);
  const snapPoints = useMemo(() => ['25%', '50%'], []);

  const handleOpen = useCallback(() => {
    bottomSheetRef.current?.expand();
  }, []);

  return (
    <View style={{ flex: 1 }}>
      <Button title="افتح" onPress={handleOpen} />
      <BottomSheet
        ref={bottomSheetRef}
        snapPoints={snapPoints}
        backgroundStyle={{ backgroundColor: '#1a1a2e' }}
        handleIndicatorStyle={{ backgroundColor: '#a78bfa' }}
      >
        <View style={{ padding: 16 }}>
          <Text style={{ color: '#fff' }}>محتوى البوتوم شيت</Text>
        </View>
      </BottomSheet>
    </View>
  );
}