Uber_Clone/components/RideLayout.tsx

33 lines
1.6 KiB
TypeScript

import { icons } from "@/constants";
import { router } from "expo-router";
import { Image, Text, TouchableOpacity, View } from "react-native";
import {GestureHandlerRootView} from "react-native-gesture-handler";
import tw from "twrnc";
import Map from "@/components/Map";
import { useRef } from "react";
import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
const Ridelayout = ({title,children,snapPoints}:{snapPoints?:string[], title:string,children:React.ReactNode}) => {
const bottomSheetRef = useRef<BottomSheet>(null)
return(
<GestureHandlerRootView>
<View style={tw`flex-1 bg-white`} >
<View style={tw`flex flex-col h-full bg-blue-500`} >
<View style={tw`flex flex-row absolute z-10 top-16 items-center justify-start px-5`} >
<TouchableOpacity onPress={() => router.back()}>
<View style={tw`w-10 h-10 bg-white rounded-full items-center justify-center`} >
<Image source={icons.backArrow} resizeMode="contain" style={tw`w-6 h-6`} />
</View>
</TouchableOpacity>
<Text style={tw`text-xl font-JakartaSemiBold ml-5` }> {title ||"Go Back"}</Text>
</View>
<Map />
</View>
<BottomSheet keyboardBehavior="extend" ref={bottomSheetRef} snapPoints={ snapPoints || ["40%","85%"]} index={0} >
<BottomSheetView style={{flex:1,padding:20}} >{children}</BottomSheetView>
</BottomSheet>
</View>
</GestureHandlerRootView>
)
}
export default Ridelayout;