Skip to content

V99BottomSheet

A persistent bottom sheet shows information that supplements the primary content of the app.

I. Props

Name Type Default Description
title string - Header title of bottom sheet
snapPoints (`${number}%` | number)[] ['50%'] Set height BottomSheet relative to device height in percent or pixel ratio
children React.ReactNode - Add children content into BottomSheet
backdropBehavior BackdropPressBehavior 'close' Callback when user press backdrop
usePortal boolean true Use portal for container of BottomSheet
useBackHandler boolean true Enable handling when the back button is pressed on the device
pattern 'default' | 'search' | 'hButton' | 'vButton' default pattern of bottom sheet
index number -1 Initial snap index. You also could provide -1 to initiate bottom sheet in closed state and 0 to open

II. Usage

import { V99BottomSheet } from 'v99-bottom-sheet';

III. BottomSheet template:

1. Default

Description: * This pattern is full bottom sheet

BottomSheet Demo 1

Example

        <V99BottomSheet
            title={'Bottomsheet'}
            ref={defaultRef}
            snapPoints={[500]}
            filledButtonTitle={'button'}
            outlineButtonTitle={'button'}
            pattern={'default'}>
            <V99Box center backgroundColor={V99Colors.black400} fill>
                <V99Text>This is content</V99Text>
            </V99Box>
        </V99BottomSheet>

2. hButton

Description: * This pattern will include Children and 2 horizontal buttons

BottomSheet Demo 2

Example

        <V99BottomSheet
            title={'Bottomsheet'}
            ref={columnRef}
            snapPoints={[500]}
            filledButtonTitle={'Ok'}
            onPressFilledButton={()=>{
                console.log('On Press Ok')
            }}
            outlineButtonTitle={'Cancel'}
            onPressOutlineButton={()=>{
                console.log('On Press Cancel')
            }}
            pattern={'hButton'}>
            <V99Box center backgroundColor={V99Colors.black400} fill>
                <V99Text>This is content</V99Text>
            </V99Box>
        </V99BottomSheet>

3. vButton

Description: * This pattern will include Children and 2 vertical buttons

BottomSheet Demo 3

Example

        <V99BottomSheet
            title={'Bottomsheet'}
            ref={columnRef}
            snapPoints={[500]}
            filledButtonTitle={'Ok'}
            onPressFilledButton={()=>{
                console.log('On Press Ok')
            }}
            outlineButtonTitle={'Cancel'}
            onPressOutlineButton={()=>{
                console.log('On Press Cancel')
            }}
            pattern={'vButton'}>
            <V99Box center backgroundColor={V99Colors.black400} fill>
                <V99Text>This is content</V99Text>
            </V99Box>
        </V99BottomSheet>

Description: * This pattern will include Children and a search field BottomSheet Demo 4

Example

        <Observer>
            {()=>
                <V99BottomSheet
                    title={'Bottomsheet'}
                    ref={searchRef}
                    snapPoints={[500]}
                    filledButtonTitle={'button'}
                    outlineButtonTitle={'button'}
                    pattern={'search'}
                    searchPlaceHolder={'Hinted search text'}
                    searchValue={state.value}
                    onSearch={state.setValue}
                >
                    <ContentView/>
                </V99BottomSheet>
            }
        </Observer>