native-base
Version:
Essential cross-platform UI components for React Native
1,657 lines (1,656 loc) • 42.4 kB
TypeScript
export declare const v3CompatibleTheme: {
borders: {
none: number;
'1px': string;
'2px': string;
'4px': string;
};
breakpoints: {
base: number;
sm: number;
md: number;
lg: number;
xl: number;
};
colors: {
contrastThreshold: number;
white: string;
black: string;
lightText: string;
darkText: string;
rose: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
pink: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
fuchsia: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
purple: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
violet: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
indigo: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
blue: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
lightBlue: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
darkBlue: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
cyan: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
teal: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
emerald: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
green: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
lime: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
yellow: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
amber: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
orange: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
red: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
warmGray: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
trueGray: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
gray: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
coolGray: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
blueGray: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
dark: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
danger: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
error: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
success: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
warning: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
muted: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
primary: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
info: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
secondary: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
light: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
tertiary: {
'50': string;
'100': string;
'200': string;
'300': string;
'400': string;
'500': string;
'600': string;
'700': string;
'800': string;
'900': string;
};
};
radii: {
none: number;
sm: number;
md: number;
lg: number;
xl: number;
pill: number;
full: number;
};
letterSpacings: {
xxs: number;
xs: number;
sm: number;
md: number;
lg: number;
xl: number;
'2xl': number;
'3xl': number;
'4xl': number;
'5xl': number;
};
lineHeights: {
'3': string;
'4': string;
'5': string;
'6': string;
'7': string;
'8': string;
'9': string;
'10': string;
none: number;
shorter: number;
short: number;
base: number;
tall: number;
taller: string;
};
fontWeights: {
hairline: number;
thin: number;
light: number;
normal: number;
medium: number;
semibold: number;
bold: number;
extrabold: number;
black: number;
};
fonts: {};
fontSizes: {
xxs: number;
xs: number;
sm: number;
md: number;
lg: number;
xl: number;
'2xl': number;
'3xl': number;
'4xl': number;
'5xl': number;
'6xl': number;
'7xl': number;
'8xl': number;
'9xl': number;
};
sizes: {
'0': string;
'1': string;
'2': string;
'3': string;
'4': string;
'5': string;
'6': string;
'7': string;
'8': string;
'9': string;
'10': string;
'12': string;
'16': string;
'20': string;
'24': string;
'32': string;
'40': string;
'48': string;
'56': string;
'64': string;
'72': string;
'80': string;
'96': string;
px: string;
'0.5': string;
'1.5': string;
'2.5': string;
'3.5': string;
'3xs': string;
'2xs': string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
container: {
sm: string;
md: string;
lg: string;
xl: string;
};
};
space: {
'0': string;
'1': string;
'2': string;
'3': string;
'4': string;
'5': string;
'6': string;
'7': string;
'8': string;
'9': string;
'10': string;
'12': string;
'16': string;
'20': string;
'24': string;
'32': string;
'40': string;
'48': string;
'56': string;
'64': string;
'72': string;
'80': string;
'96': string;
px: string;
'0.5': string;
'1.5': string;
'2.5': string;
'3.5': string;
};
components: {
FlatList: {
baseStyle: {};
defaultProps: {};
};
KeyboardAvoidingView: {
baseStyle: {};
defaultProps: {};
};
ScrollView: {
baseStyle: {};
defaultProps: {};
};
SectionList: {
baseStyle: {};
defaultProps: {};
};
StatusBar: {
baseStyle: {};
defaultProps: {};
};
Accordion: {};
AccordionItem: {};
AccordionIcon: {};
AccordionSummary: {};
AccordionDetails: {
baseStyle: {
p: number;
};
};
Actionsheet: {
defaultProps: {
size: string;
};
};
ActionsheetContent: {
baseStyle: {
alignItems: string;
p: number;
borderRadius: string;
roundedTop: number;
_dragIndicator: {
bg: string;
height: number;
width: number;
borderRadius: number;
};
};
};
ActionsheetItem: {
defaultProps: {
variant: string;
};
};
Alert: {
baseStyle: {
alignItems: string;
justifyContent: string;
p: number;
space: number;
borderRadius: string;
_actionProps: {
alignSelf: string;
ml: string;
};
_text: {
fontSize: string;
lineHeight: number;
color: string;
};
};
variants: {};
defaultProps: {
colorScheme: string;
variant: string;
};
};
AlertDescription: {
baseStyle: {
_text: {
fontSize: string;
};
flexShrink: number;
};
};
AlertTitle: {
baseStyle: {
_text: {
fontSize: string;
lineHeight: number;
fontWeight: string;
};
};
};
AlertIcon: {
baseStyle: {
size: number;
};
};
Avatar: {
sizes: {
'2xs': {
width: string;
height: string;
fontSize: string;
};
xs: {
width: string;
height: string;
fontSize: string;
};
sm: {
width: string;
height: string;
fontSize: string;
};
md: {
width: string;
height: string;
fontSize: string;
};
lg: {
width: string;
height: string;
fontSize: string;
};
xl: {
width: string;
height: string;
fontSize: string;
};
'2xl': {
width: string;
height: string;
fontSize: string;
};
full: {
width: string;
height: string;
fontSize: string;
};
};
defaultProps: {
size: string;
};
};
AvatarBadge: {};
AvatarGroup: {};
Badge: {
baseStyle: {
px: number;
_text: {
fontSize: string;
fontWeight: string;
};
};
variants: {};
defaultProps: {
variant: string;
colorScheme: string;
};
};
Box: {
baseStyle: {};
defaultProps: {};
};
Breadcrumb: {
baseStyle: {
width: string;
height: string;
display: string;
flexDirection: string;
};
defaultProps: {
direction: string;
wrap: string;
};
};
Button: {
variants: {};
sizes: {
lg: {
px: number;
py: number;
_text: {
fontSize: string;
};
};
md: {
px: number;
py: number;
_text: {
fontSize: string;
};
};
sm: {
px: number;
py: number;
_text: {
fontSize: string;
};
};
xs: {
px: number;
py: number;
_text: {
fontSize: string;
};
};
};
defaultProps: {
variant: string;
size: string;
colorScheme: string;
};
};
ButtonGroup: {
baseStyle: {
direction: string;
};
defaultProps: {
space: number;
};
};
Center: {
sizes: {
xs: {
height: number;
width: number;
};
sm: {
height: number;
width: number;
};
md: {
height: number;
width: number;
};
lg: {
height: number;
width: number;
};
xl: {
height: number;
width: number;
};
'2xl': {
height: number;
width: number;
};
};
};
Checkbox: {
sizes: {
lg: {
_icon: {
size: number;
};
_text: {
fontSize: string;
};
};
md: {
_icon: {
size: number;
};
_text: {
fontSize: string;
};
};
sm: {
_icon: {
size: number;
};
_text: {
fontSize: string;
};
};
};
defaultProps: {
defaultIsChecked: boolean;
size: string;
colorScheme: string;
};
};
CircularProgress: {
sizes: {
xs: {
height: number;
width: number;
};
sm: {
height: number;
width: number;
};
md: {
height: number;
width: number;
};
lg: {
height: number;
width: number;
};
xl: {
height: number;
width: number;
};
'2xl': {
height: number;
width: number;
};
};
defaultProps: {
thickness: number;
colorScheme: string;
size: string;
};
};
Code: {
baseStyle: {
_text: {
fontFamily: string;
fontSize: string;
};
borderRadius: string;
px: number;
py: number;
};
variants: {};
defaultProps: {
variant: string;
colorScheme: string;
};
};
Container: {
baseStyle: {
maxWidth: string;
};
};
Divider: {
defaultProps: {
orientation: string;
size: number;
};
};
Fade: {
defaultProps: {
entryDuration: number;
exitDuration: number;
};
};
FAB: {
baseStyle: {
shadow: number;
};
defaultProps: {
variant: string;
colorScheme: string;
rounded: string;
zIndex: number;
placementProps: {
'top-right': {
top: number;
right: number;
position: string;
};
'top-left': {
top: number;
left: number;
position: string;
};
'bottom-right': {
bottom: number;
right: number;
position: string;
};
'bottom-left': {
bottom: number;
left: number;
position: string;
};
};
p: number;
placement: string;
};
};
Flex: {
defaultProps: {
flexDirection: string;
};
};
FormControl: {};
FormControlLabel: {
baseStyle: {
_text: {
fontSize: string;
};
astrickColor: string;
mb: number;
mr: number;
};
};
FormControlHelperText: {};
FormControlErrorMessage: {
baseStyle: {
mt: number;
_text: {
fontSize: string;
color: string;
};
};
};
Heading: {
sizes: {
'4xl': {
fontSize: (string | null)[];
};
'3xl': {
fontSize: (string | null)[];
};
'2xl': {
fontSize: (string | null)[];
};
xl: {
fontSize: (string | null)[];
};
lg: {
fontSize: (string | null)[];
};
md: {
fontSize: string;
};
sm: {
fontSize: string;
};
xs: {
fontSize: string;
};
};
defaultProps: {
size: string;
};
};
HStack: {
baseStyle: {};
defaultProps: {};
};
VStack: {
baseStyle: {};
defaultProps: {};
};
Icon: {
sizes: {
xxs: number;
xs: number;
sm: number;
md: number;
lg: number;
xl: number;
'2xl': number;
'3xl': number;
'4xl': number;
'5xl': number;
'6xl': number;
};
defaultProps: {
size: string;
color: string;
};
};
IconButton: {
baseStyle: {
borderRadius: string;
};
sizes: {
lg: {
p: number;
};
md: {
p: number;
};
sm: {
p: number;
};
};
defaultProps: {
variant: string;
size: string;
};
};
Image: {
baseStyle: {
maxWidth: string;
};
sizes: {
'2xs': {
size: number;
};
xs: {
size: number;
};
sm: {
size: number;
};
md: {
size: number;
};
lg: {
size: number;
};
xl: {
size: number;
};
'2xl': {
size: number;
};
full: {
size: string;
};
};
defaultProps: {};
};
Input: {
defaultProps: {
size: string;
variant: string;
};
variants: {};
sizes: {
'2xl': {
fontSize: string;
};
xl: {
fontSize: string;
};
lg: {
fontSize: string;
};
md: {
fontSize: string;
};
sm: {
fontSize: string;
};
xs: {
fontSize: string;
};
};
};
Kbd: {
defaultProps: {};
};
Link: {
baseStyle: {
width: string;
height: string;
};
};
List: {};
ListItem: {
baseStyle: {
py: number;
borderColor: string;
};
defaultProps: {
start: number;
};
};
ListIcon: {
baseStyle: {
mr: number;
size: string;
};
};
Menu: {};
MenuGroup: {};
MenuItem: {
defaultProps: {
_disabled: {
opacity: number;
};
};
};
Modal: {
baseStyle: {
width: string;
height: string;
justifyContent: string;
alignItems: string;
};
sizes: {
sm: {
contentSize: {
width: string;
};
};
md: {
contentSize: {
width: string;
};
};
lg: {
contentSize: {
width: string;
};
};
full: {
contentSize: {
width: string;
};
};
};
defaultProps: {
size: string;
closeOnOverlayClick: boolean;
};
};
ModalContent: {};
ModalHeader: {
baseStyle: {
pb: number;
pr: number;
_text: {
fontSize: string;
fontWeight: string;
};
};
};
ModalBody: {};
ModalFooter: {
baseStyle: {
py: number;
flexDirection: string;
justifyContent: string;
flexWrap: string;
pr: number;
};
};
ModalOverlay: {
baseStyle: {
position: string;
left: number;
top: number;
opacity: number;
right: number;
bottom: number;
};
};
ModalCloseButton: {};
NumberInput: {
defaultProps: {
size: string;
step: number;
min: null;
max: null;
defaultValue: string;
keepWithinRange: boolean;
clampValueOnBlur: boolean;
focusInputOnChange: boolean;
getAriaValueText: boolean;
};
};
NumberInputStepper: {};
PinInput: {
sizes: {
'2xl': {
fontSize: string;
p: number;
width: string;
height: string;
textAlign: string;
borderRadius: string;
};
xl: {
fontSize: string;
p: number;
width: string;
height: string;
textAlign: string;
borderRadius: string;
};
lg: {
fontSize: string;
p: number;
width: string;
height: string;
textAlign: string;
borderRadius: string;
};
md: {
fontSize: string;
p: number;
width: string;
height: string;
textAlign: string;
borderRadius: string;
};
sm: {
fontSize: string;
p: number;
width: string;
height: string;
textAlign: string;
borderRadius: string;
};
xs: {
fontSize: string;
p: number;
width: string;
height: string;
textAlign: string;
borderRadius: string;
};
};
defaultProps: {
placeholder: string;
size: string;
manageFocus: boolean;
space: number;
};
};
PopoverCloseButton: {};
PopoverBody: {};
PopoverContent: {};
PopoverHeader: {
baseStyle: {
p: number;
_text: {
fontWeight: number;
};
};
};
PopoverArrow: {};
PopoverFooter: {};
Progress: {
defaultProps: {
colorScheme: string;
size: string;
rounded: string;
min: number;
max: number;
value: number;
isIndeterminate: boolean;
};
sizes: {
xs: {
height: number;
};
sm: {
height: number;
};
md: {
height: number;
};
lg: {
height: number;
};
xl: {
height: number;
};
'2xl': {
height: number;
};
};
};
Radio: {
sizes: {
lg: {
_icon: {
size: number;
};
_text: {
fontSize: string;
};
};
md: {
_icon: {
size: number;
};
_text: {
fontSize: string;
};
};
sm: {
_icon: {
size: number;
};
_text: {
fontSize: string;
};
};
};
defaultProps: {
defaultIsChecked: boolean;
size: string;
colorScheme: string;
};
};
ScaleFade: {
defaultProps: {
duration: number;
initialScale: number;
};
};
Select: {
baseStyle: {
customDropdownIconProps: {
size: number;
mr: number;
};
_actionSheetContent: {};
};
defaultProps: {
variant: string;
};
};
SelectItem: {
baseStyle: {
p: number;
px: number;
borderRadius: number;
minH: number;
};
};
SimpleGrid: {
baseStyle: {};
defaultProps: {};
};
Skeleton: {
defaultProps: {
variant: string;
};
};
SliderFilledTrack: {};
SliderThumb: {};
SliderTrack: {};
Slider: {
defaultProps: {
size: string;
};
sizes: {
lg: {
thumbSize: number;
sliderSize: number;
};
md: {
thumbSize: number;
sliderSize: number;
};
sm: {
thumbSize: number;
sliderSize: number;
};
};
};
Slide: {
defaultProps: {
duration: number;
placement: string;
};
};
SlideFade: {
defaultProps: {
duration: number;
offsetX: number;
offsetY: number;
};
};
Spinner: {
baseStyle: {
color: string;
};
sizes: {
sm: string;
lg: string;
};
defaultProps: {
size: string;
};
};
Stack: {
baseStyle: {};
defaultProps: {};
sizes: {
gutter: number;
'2xs': number;
xs: number;
sm: number;
md: number;
lg: number;
xl: number;
'2xl': number;
};
};
Stat: {
defaultProps: {
_statLabel: {
fontSize: string;
};
_statNumber: {
fontSize: string;
fontWeight: string;
my: number;
};
_statHelpText: {
_text: {
color: string;
fontSize: string;
};
flexDirection: string;
alignItems: string;
};
_statGroup: {
flexWrap: string;
space: number;
justifyContent: string;
};
};
};
Switch: {
sizes: {
sm: {
style: {
transform: {
scale: number;
}[];
};
};
md: {};
lg: {
style: {
transform: {
scale: number;
}[];
};
margin: number;
};
};
defaultProps: {
size: string;
colorScheme: string;
};
};
Tabs: {
variants: {};
sizes: {
sm: {
activeTabStyle: {
_text: {
fontSize: string;
};
py: number;
px: number;
};
inactiveTabStyle: {
_text: {
fontSize: string;
};
py: number;
px: number;
};
};
md: {
activeTabStyle: {
_text: {
fontSize: string;
};
py: number;
px: number;
};
inactiveTabStyle: {
_text: {
fontSize: string;
};
py: number;
px: number;
};
};
lg: {
activeTabStyle: {
_text: {
fontSize: string;
};
py: number;
px: number;
};
inactiveTabStyle: {
_text: {
fontSize: string;
};
py: number;
px: number;
};
};
};
defaultProps: {
size: string;
variant: string;
colorScheme: string;
};
};
Tag: {
variants: {};
baseStyle: {
_text: {
fontWeight: string;
};
alignItems: string;
justifyContent: string;
flexDirection: string;
display: string;
};
sizes: {
sm: {
minH: number;
minW: number;
_text: {
fontSize: string;
};
p: number;
borderRadius: string;
};
md: {
minH: number;
minW: number;
_text: {
fontSize: string;
};
borderRadius: string;
p: number;
};
lg: {
minH: number;
minW: number;
_text: {
fontSize: string;
};
borderRadius: string;
p: number;
};
};
defaultProps: {
size: string;
variant: string;
colorScheme: string;
};
};
Text: {
defaultProps: {};
};
AppBar: {
defaultProps: {
colorScheme: string;
};
};
TextArea: {
baseStyle: {
multiline: boolean;
px: number;
py: number;
totalLines: number;
_ios: {
h: number;
};
};
};
TextField: {
defaultProps: {
component: string;
};
};
Toast: {
defaultProps: {};
};
TypeAheadSearchItem: {};
View: {
baseStyle: {};
defaultProps: {};
};
Wrap: {};
ZStack: {
baseStyle: {};
defaultProps: {};
};
Tooltip: {};
};
config: {};
};