Getting Started

Components

Themes

Please understand this website is built in react, the components are in react native. There may be slight differences!

Drawer

A drawer or a sheet(not a bottom sheet, since it can be everywhereee)

visible and setVisible must be set in the parent component. It is for extension of the modal onclick like in this example!
1
Install by running this command!
npx uni-ui-kit install drawer
2
Import the component!
import Drawer from '../lib/ui/dialog';
Properties table
backdrop?
backdrop
Backdrop color and opacity
backdropPressHidesModal?
boolean
Whether pressing the backdrop would hides the drawer
children?
background
Children(most of the time, the children of drawer won't be string, so there is no optimization here)
direction
React.ReactNode
Location of the modal
header?
top, right, bottom, left
Header string(might need to adjust for the best visual)
notchVisible?
string
If a block of gray is visible or not(indicator of a drawer)
setVisible
boolean
State action(to extend the drawer component)
visible
SetState<boolean>
State value
widthOrHeight
State<boolean>
Width in left right drawer, height in top bottom sheet
Library data types
backdrop
{ color: string, opacity: string }
Backdrop color and opacity(0-1) for the modal and drawer.