Render Error

je besoin d'aide

import { View, Text, SafeAreaView, StyleSheet, TouchableOpacity, Image} from 'react-native'
import React, { useRef } from 'react'
import Colors from '@/constants/Colors';
import { Feather } from '@expo/vector-icons';
import { Ionicons } from '@expo/vector-icons';
import BottomSheet from './BottomSheet';
import { BottomSheetModal } from '@gorhom/bottom-sheet';

const CustomHeader = () => {
  const bottomSheetRef = useRef<BottomSheetModal>(null);
  const openModal=() =>{
    bottomSheetRef.current?.present();
  };
  return (
    <SafeAreaView style={styles.safeArea}>
      <BottomSheet ref={bottomSheetRef}/>
      <View style={styles.container}>
        <TouchableOpacity onPress={openModal}>
            <Image style={styles.bike}source={require('@/assets/images/bike.png')}/>
        </TouchableOpacity>

        <TouchableOpacity style={styles.titleContainer} onPress={openModal}>
          <Text style={styles.title}>Delivery . Now</Text>
          <View style={styles.locationName}>
            <Text style={styles.subtitle}>Selected Location</Text>
            <Ionicons name="chevron-down-outline" size={20} color={Colors.primary} />
          </View>
        </TouchableOpacity>

        <TouchableOpacity style={styles.profileButton}>
          <Feather name="search" size={20} color={Colors.primary} />
        </TouchableOpacity>
      </View>
    </SafeAreaView >
  );
};

const styles = StyleSheet.create ({
    safeArea:{
        flex: 1,
        backgroundColor: '#fff',
    },
    container:{
        height: 60,
        backgroundColor: '#fff',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 20,
        gap: 20,
    },
    bike:{
        width: 30,
        height: 30,
    },
    titleContainer:{
      flex: 1,
    },
    title:{
      fontSize: 14,
      color: Colors.grey2,
    },
    profileButton:{
      backgroundColor: Colors.lightGrey,
      padding: 10,
      borderRadius: 50,
    },
    subtitle:{
      fontSize: 17,
      fontWeight: 'bold'
    },
    locationName:{
      flexDirection: 'row'
    },
});

export default CustomHeader;

Ce que j'obtiens

PanGesturreHandler must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized