Getting Started

Components

Themes

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

Dialog

A dialog, just like rn modal but with more animation properties and stability!

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 dialog
2
Import the component!
import Dialog from '../lib/ui/dialog';
Properties table
animationProperties?
animationProperties
Animation properties for the modal intro and outro
backdrop?
backdrop
Backdrop view color and opacity
backdropPressHidesModal?
boolean
Whether tapping on the modal will close the modal or not
children?
React.ReactNode
Children(Optimized variants for string)
header?
React.ReactNode
Header component
footer?
{title: string, action?: ()=>void}
Footer button which will also hides the modal on press
setVisible
SetState<boolean>
React state action
visible
State<boolean>
React state
variant
variant
Variant(can extend it from the file)
Library data types
animationProperties
{ animationDuration: number, animationType: animationType, oneDirectionAnimation: boolean }
Animation properties for the generated animations. ./utils/animation_types.ts. One directional animation means if the translate comes from one direction it will go back to that direction.
animationType
slideFromLeft, slideFromRight, slideFromBottom, slideFromTop, scale, fade
Animation generated from ./utils/animation_types.ts. Most of the config are provided via animationProperties. You can directly tweaks things in the file!
backdrop
{ color: string, opacity: string }
Backdrop color and opacity(0-1) for the modal and drawer.
background
{ color: string, opacity: string }
Background color and opacity(0-1) for the modal and drawer.
Variants
primary, secondary, tertiary, success, warning, error, ghost
Colors will change according to theme(light, dark). Use when it is intended.
CheckboxDrawer