import { ThemeToggle } from "@/components/theme-toggle"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Sheet, useSheet } from "@/components/ui/sheet"; import { Ionicons } from "@expo/vector-icons"; import { Stack } from "expo-router"; import * as React from "react"; import { Keyboard, KeyboardAvoidingView, Platform, ScrollView, Text, TouchableWithoutFeedback, View, } from "react-native"; import { SafeAreaView } from "react-native-safe-area-context"; type IoniconName = React.ComponentProps["name"]; const FeedbackForm = () => { const [selectedRating, setSelectedRating] = React.useState( null ); const [feedbackText, setFeedbackText] = React.useState(""); const { close } = useSheet(); const handleSubmit = () => { console.log({ rating: selectedRating, feedback: feedbackText }); close(); }; return ( We'd love to hear your thoughts on our application. How would you rate your experience? {[1, 2, 3, 4, 5].map((rating) => ( ))} Your comments ); }; const SettingsList = () => { return ( {[ { icon: "person-outline" as IoniconName, label: "My Account" }, { icon: "notifications-outline" as IoniconName, label: "Notifications", }, { icon: "lock-closed-outline" as IoniconName, label: "Privacy" }, { icon: "moon-outline" as IoniconName, label: "Theme" }, { icon: "globe-outline" as IoniconName, label: "Language", }, { icon: "help-circle-outline" as IoniconName, label: "Help & Support" }, { icon: "information-circle-outline" as IoniconName, label: "About" }, { icon: "log-out-outline" as IoniconName, label: "Logout" }, ].map((item, index) => ( ))} ); }; const LargeSheetContent = () => { const { close } = useSheet(); return ( Section Title This sheet can be opened from different sides and with different sizes. Try the various examples below to see how it adapts to different use cases. Tip The sheet component follows platform-specific guidelines for animations and interactions, providing a native feel on both iOS and Android. Features: {[ "Multiple side options (left, right, top, bottom)", "Customizable sizes", "Smooth animations", "Keyboard aware", "Backdrop press to close", "Platform-specific styling", ].map((feature, index) => ( {feature} ))} Demo Content: {Array(10) .fill(0) .map((_, i) => ( Content item {i + 1} Additional description for this content item ))} ); }; export default function SheetExampleScreen() { const [rightSheetOpen, setRightSheetOpen] = React.useState(false); const [leftSheetOpen, setLeftSheetOpen] = React.useState(false); const [topSheetOpen, setTopSheetOpen] = React.useState(false); const [bottomSheetOpen, setBottomSheetOpen] = React.useState(false); const [feedbackSheetOpen, setFeedbackSheetOpen] = React.useState(false); const [settingsSheetOpen, setSettingsSheetOpen] = React.useState(false); const [largeSheetOpen, setLargeSheetOpen] = React.useState(false); return ( <> , }} /> Sheet A versatile sheet component that can slide in from any side of the screen. Side Variations setRightSheetOpen(false)} title="Right Sheet" description="This sheet slides in from the right" side="right" size="medium" > This is a right sheet example. It slides in from the right side of the screen. setLeftSheetOpen(false)} title="Left Sheet" description="This sheet slides in from the left" side="left" size="medium" > This is a left sheet example. It slides in from the left side of the screen. setTopSheetOpen(false)} title="Top Sheet" description="This sheet slides in from the top" side="top" size="medium" > This is a top sheet example. It slides in from the top of the screen. setBottomSheetOpen(false)} title="Bottom Sheet" description="This sheet slides in from the bottom" side="bottom" size="medium" > This is a bottom sheet example. It slides in from the bottom of the screen. Sheet with Form setFeedbackSheetOpen(false)} title="Feedback" description="Share your thoughts with us" side="bottom" size="large" > Sheet with List setSettingsSheetOpen(false)} title="Settings" description="Manage your preferences" side="right" size="medium" > Large Sheet with Complex Content setLargeSheetOpen(false)} title="Detailed Information" description="Learn more about our features" side="right" size="large" > ); }