native-base
Version:
Essential cross-platform UI components for React Native
1,636 lines (1,635 loc) • 131 kB
TypeScript
import * as tools from './tools';
import type { StyledProps } from '../theme/types';
import type { ColorModeOptions } from './../core/color-mode/types';
export interface ComponentTheme {
baseStyle?: ((props: any) => StyledProps) | StyledProps;
sizes?: Record<string, ((props: any) => StyledProps) | StyledProps>;
variants?: Record<string, ((props: any) => StyledProps) | StyledProps>;
defaultProps?: Record<string, any>;
}
declare const theme: {
components: {
Progress: {
baseStyle: (props: Record<string, any>) => {
overflow: string;
_filledTrack: {
shadow: number;
height: string;
display: string;
alignItems: string;
justifyContent: string;
rounded: string;
_text: {
color: string;
fontWeight: string;
};
};
_light: {
bg: string;
_filledTrack: {
bg: string;
};
};
_dark: {
bg: string;
_filledTrack: {
bg: string;
};
};
};
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: {
baseStyle: (props: Record<string, any>) => {
borderWidth: number;
borderRadius: string;
p: number;
_light: {
bg: string;
borderColor: string;
_checked: {
borderColor: string;
_icon: {
color: string;
};
_hover: {
borderColor: string;
_icon: {
color: string;
};
_disabled: {
borderColor: string;
_icon: {
color: string;
};
};
};
_pressed: {
borderColor: string;
_icon: {
color: string;
};
};
};
_hover: {
borderColor: string;
_disabled: {
borderColor: string;
};
};
_pressed: {
borderColor: string;
};
_invalid: {
borderColor: string;
};
};
_dark: {
bg: string;
borderColor: string;
_checked: {
borderColor: string;
_icon: {
color: string;
};
_hover: {
borderColor: string;
_icon: {
color: string;
};
_disabled: {
borderColor: string;
_icon: {
color: string;
};
};
};
_pressed: {
borderColor: string;
_icon: {
color: string;
};
};
};
_hover: {
borderColor: string;
_disabled: {
borderColor: string;
};
};
_pressed: {
borderColor: string;
};
_invalid: {
borderColor: string;
};
};
_stack: {
direction: string;
alignItems: string;
space: number;
_web: {
cursor: string;
};
};
_disabled: {
opacity: string;
_icon: {
bg: string;
};
_stack: {
opacity: string;
};
};
_focusVisible: {
_web: {
style: {
outlineWidth: string;
outlineColor: any;
outlineStyle: string;
};
};
};
};
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;
};
};
RadioGroup: {
baseStyle: () => {
alignItems: string;
};
};
ScaleFade: {
baseStyle: {
initial: {
opacity: number;
scale: number;
};
animate: {
opacity: number;
scale: number;
transition: number;
};
exit: {
opacity: number;
scale: number;
transition: number;
};
};
};
Select: {
baseStyle: () => {
_light: {
customDropdownIconProps: {
color: string;
mr: string;
};
_hover: {
borderColor: string;
};
_focus: {
borderColor: string;
};
_disabled: {
bg: string;
placeholderTextColor: string;
};
_invalid: {
borderColor: string;
};
};
_dark: {
customDropdownIconProps: {
color: string;
mr: string;
};
_hover: {
borderColor: string;
};
_focus: {
borderColor: string;
};
_disabled: {
bg: string;
placeholderTextColor: string;
};
_invalid: {
borderColor: string;
};
};
customDropdownIconProps: {
size: string;
p: string;
};
_webSelect: {
style: {
appearance: string;
WebkitAppearance: string;
MozAppearance: string;
position: string;
width: string;
height: string;
opacity: number;
zIndex: number;
};
};
_web: {
pointerEvents: string;
};
_disabled: {
opacity: string;
};
_actionSheetBody: {
w: string;
};
_actionSheetContent: {};
};
defaultProps: {
optimized: boolean;
};
};
SelectItem: {
baseStyle: {
p: string;
px: string;
borderRadius: string;
minH: string;
};
};
SimpleGrid: {
baseStyle: {};
defaultProps: {};
};
Skeleton: {
baseStyle: (props: Record<string, any>) => {
startColor: any;
endColor: string;
overflow: string;
fadeDuration: number;
speed: number;
h: string;
w: string;
};
};
SkeletonText: {
baseStyle: (props: Record<string, any>) => {
startColor: any;
endColor: string;
fadeDuration: number;
w: string;
speed: number;
flexDirection: string;
_line: {
h: number;
rounded: string;
};
};
defaultProps: {
lines: number;
space: number;
};
};
SliderFilledTrack: {
baseStyle: ({ orientation, isReversed, sliderTrackPosition, size, colorScheme, }: any) => {
left: number | undefined;
bottom: number | undefined;
right: number | undefined;
top: number | undefined;
style: {
height: any;
width: any;
};
_light: {
bg: string;
};
_dark: {
bg: string;
};
};
defaultProps: {
colorScheme: string;
};
};
SliderThumb: {
baseStyle: (props: any) => {
borderRadius: string;
zIndex: number;
alignItems: string;
justifyContent: string;
scaleOnPressed: number;
_interactionBox: {
position: string;
borderRadius: string;
zIndex: number;
};
_stack: {
direction: string;
alignItems: string;
justifyContent: string;
space: number;
};
_light: {
bg: string;
_hover: {
_web: {
outlineWidth: string;
outlineColor: any;
outlineStyle: string;
};
};
_focus: {
_web: {
outlineWidth: string;
outlineColor: any;
outlineStyle: string;
};
};
_pressed: {
_interactionBox: {
borderWidth: string;
borderColor: string;
};
};
};
_dark: {
bg: string;
_hover: {
_web: {
outlineWidth: string;
outlineColor: any;
outlineStyle: string;
};
};
_focus: {
_web: {
outlineWidth: string;
outlineColor: any;
outlineStyle: string;
};
};
_pressed: {
_interactionBox: {
borderWidth: string;
borderColor: string;
};
};
};
_web: {
cursor: string;
};
};
defaultProps: {
colorScheme: string;
};
sizes: {
lg: {
_interactionBox: string;
};
md: {
_interactionBox: string;
};
sm: {
_interactionBox: string;
};
};
};
SliderTrack: {
baseStyle: ({ isVertical, size }: any) => {
borderRadius: string;
overflow: string;
style: {
height: any;
width: any;
};
_pressable: {
alignItems: string;
justifyContent: string;
height: any;
width: any;
py: string | undefined;
px: string | undefined;
};
_light: {
bg: string;
};
_dark: {
bg: string;
};
};
};
Slider: {
baseStyle: (props: any) => {
alignItems: string;
justifyContent: string;
height: string | undefined;
width: string | undefined;
_disabled: {
opacity: number;
_web: {
cursor: string;
};
};
};
defaultProps: {
size: string;
};
sizes: {
lg: {
thumbSize: number;
sliderTrackHeight: number;
_interactionBox: {
p: string;
};
};
md: {
thumbSize: number;
sliderTrackHeight: number;
_interactionBox: {
p: string;
};
};
sm: {
thumbSize: number;
sliderTrackHeight: number;
_interactionBox: {
p: string;
};
};
};
};
Slide: {
baseStyle: {
h: string;
pointerEvents: string;
_overlay: {
style: {
overflow: string;
};
};
};
defaultProps: {
duration: number;
placement: string;
overlay: boolean;
_overlay: {
isOpen: boolean;
};
};
};
SlideFade: {
defaultProps: {
duration: number;
offsetX: number;
offsetY: number;
};
};
Spinner: {
baseStyle: {
color: string;
};
sizes: {
sm: string;
lg: string;
};
defaultProps: {
size: string;
};
};
Square: {
baseStyle: {
alignItems: string;
justifyContent: string;
};
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;
};
};
};
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: {
baseStyle: (props: Record<string, any>) => {
_disabled: {
opacity: number;
};
_invalid: {
borderWidth: number;
borderRadius: number;
};
onThumbColor: string;
offThumbColor: string;
_light: {
offTrackColor: string;
onTrackColor: string;
_hover: {
offTrackColor: string;
onTrackColor: string;
};
_invalid: {
borderColor: string;
};
};
_dark: {
offTrackColor: string;
onTrackColor: string;
_hover: {
offTrackColor: string;
onTrackColor: string;
};
_invalid: {
borderColor: string;
};
};
};
sizes: {
sm: {
style: {
transform: {
scale: number;
}[];
};
};
md: {};
lg: {
style: {
transform: {
scale: number;
}[];
};
margin: number;
};
};
defaultProps: {
size: string;
colorScheme: string;
};
};
Tabs: {
baseStyle: (props: Record<string, any>) => {
activeTabStyle: {
justifyContent: string;
alignItems: string;
mb: string;
flexDirection: string;
_text: {
fontSize: string;
fontWeight: string;
};
};
inactiveTabStyle: {
justifyContent: string;
alignItems: string;
mb: string;
flexDirection: string;
_text: {
color: any;
fontSize: string;
fontWeight: string;
};
};
activeIconProps: {
color: any;
name: string;
mx: number;
};
inactiveIconProps: {
name: string;
mx: number;
};
};
variants: {
outline: (props: Record<string, any>) => {
activeTabStyle: {
borderColor: any;
_text: {
color: any;
};
_hover: {
bg: any;
};
borderBottomWidth: number;
};
inactiveTabStyle: {
borderColor: string;
borderBottomWidth: number;
_hover: {
bg: any;
};
};
tabBarStyle: {
borderBottomWidth: number;
borderColor: any;
};
};
filled: (props: Record<string, any>) => {
activeTabStyle: {
borderColor: any;
_text: {
color: any;
};
_hover: {
bg: any;
};
borderBottomWidth: number;
bg: any;
};
inactiveTabStyle: {
borderColor: string;
borderBottomWidth: number;
_hover: {
bg: any;
};
};
tabBarStyle: {
borderBottomWidth: number;
borderColor: any;
};
};
'filled-outline': (props: Record<string, any>) => {
activeTabStyle: {
borderColor: any;
_text: {
color: any;
};
_hover: {
bg: any;
};
borderBottomWidth: number;
};
inactiveTabStyle: {
borderColor: string;
borderBottomWidth: number;
_hover: {
bg: any;
};
};
tabBarStyle: {
borderBottomWidth: number;
borderColor: any;
bg: any;
};
};
};
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: {
solid: (props: Record<string, any>) => {
_text: {
color: string;
};
_icon: {
color: string;
};
bg: string;
borderWidth: string;
borderColor: string;
borderRadius: string;
};
subtle: (props: Record<string, any>) => {
_text: {
color: string;
};
_icon: {
color: string;
};
_light: {
bg: string;
};
_dark: {
bg: string;
};
borderWidth: string;
borderRadius: string;
borderColor: string;
};
outline: (props: Record<string, any>) => {
_light: {
_text: {
color: string;
};
_icon: {
color: string;
};
borderColor: string;
};
_dark: {
_text: {
color: string;
};
_icon: {
color: string;
};
borderColor: string;
};
borderRadius: string;
borderWidth: string;
};
};
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: {
baseStyle: () => {
_light: {
color: string;
};
_dark: {
color: string;
};
fontWeight: string;
fontFamily: string;
fontStyle: string;
fontSize: string;
letterSpacing: string;
lineHeight: string;
};
defaultProps: {};
};
AppBar: {
baseStyle: (props: Record<string, any>) => {
bg: any;
px: number;
};
defaultProps: {
colorScheme: string;
};
};
TextArea: {
baseStyle: {
multiline: boolean;
p: string;
textAlignVertical: string;
h: string;
};
defaultProps: {
size: string;
variant: string;
};
};
TextField: {
baseStyle: (props: Record<string, any>) => {
_errorMessageProps: {
mt: number;
ml: number;
fontSize: string;
color: string;
};
_helperTextProps: {
mt: number;
ml: number;
fontSize: string;
color: any;
};
};
defaultProps: {
component: string;
};
};
Toast: {
baseStyle: (props: Record<string, any>) => {
bg: any;
p: string;
rounded: string;
shadow: number;
_stack: {
margin: string;
position: string;
space: number;
alignItems: string;
justifyContent: string;
pointerEvents: string;
};
_overlay: {};
_presenceTransition: {
animate: {
opacity: number;
transition: {
easing: import("react-native").EasingFunction;
duration: number;
};
};
exit: {
opacity: number;
scale: number;
transition: {
easing: import("react-native").EasingFunction;
duration: number;
};
};
};
_title: {
color: string;
fontWeight: number;
};
_description: {
color: string;
fontWeight: number;
};
};
defaultProps: {};
};
TypeAheadSearchItem: {
baseStyle: (props: Record<string, any>) => {
backgroundColor: any;
_focus: {
backgroundColor: any;
};
_disabled: {
backgroundColor: string;
};
};
};
View: {
baseStyle: {};
defaultProps: {};
};
Wrap: {};
ZStack: {
baseStyle: {};
defaultProps: {};
};
Tooltip: {
baseStyle: () => {
py: number;
px: number;
shadow: number;
rounded: string;
_text: {
fontSize: string;
};
_light: {
bg: string;
_text: {
color: string;
};
};
_dark: {
bg: string;
_text: {
color: string;
};
};
};
};
PopoverCloseButton: {
baseStyle: () => {
position: string;
right: number;
top: number;
zIndex: number;
p: string;
bg: string;
borderRadius: string;
_web: {
outlineWidth: number;
cursor: string;
};
_icon: {
size: string;
};
_light: {
_icon: {
color: string;
};
_hover: {
bg: string;
};
_pressed: {
bg: string;
};
};
_dark: {
_icon: {
color: string;
};
_hover: {
bg: string;
};
_pressed: {
bg: string;
};
};
};
};
PopoverBody: {
baseStyle: () => {
p: string;
shadow: string;
_light: {
bg: string;
_text: {
color: string;
};
};
_dark: {
bg: string;
_text: {
color: string;
};
};
};
};
PopoverContent: {
baseStyle: () => {
_light: {
borderColor: string;
_text: {
color: string;
};
};
_dark: {
borderColor: string;
_text: {
color: string;
};
};
borderWidth: number;
rounded: string;
overflow: string;
};
};
PopoverHeader: {
baseStyle: () => {
_web: {
accessibilityRole: string;
};
p: string;
borderBottomWidth: string;
_text: {
fontSize: string;
fontWeight: string;
lineHeight: string;
};
_light: {
bg: string;
borderColor: string;
_text: {
color: string;
};
};
_dark: {
bg: string;
borderColor: string;
_text: {
color: string;
};
};
};
};
PopoverArrow: {
baseStyle: () => {
_light: {
bg: string;
borderColor: string;
};
_dark: {
bg: string;
borderColor: string;
};
};
};
PopoverFooter: {
baseStyle: () => {
p: string;
shadow: string;
flexDirection: string;
justifyContent: string;
flexWrap: string;
borderTopWidth: number;
_light: {
bg: string;
borderColor: string;
};
_dark: {
bg: string;
borderColor: string;
};
};
};
FlatList: {
baseStyle: {};
defaultProps: {};
};
KeyboardAvoidingView: {
baseStyle: {};
defaultProps: {};
};
ScrollView: {
baseStyle: {};
defaultProps: {};
};
SectionList: {
baseStyle: {};
defaultProps: {};
};
StatusBar: {
baseStyle: {};
defaultProps: {};
};
Accordion: {
baseStyle: (props: Record<string, any>) => {
borderWidth: number;
borderColor: any;
borderRadius: string;
};
};
AccordionItem: {};
AccordionIcon: {};
AccordionSummary: {
baseStyle: (props: Record<string, any>) => {
borderTopWidth: number;
borderTopColor: any;
p: number;
_hover: {
bg: any;
};
_expanded: {
bg: string;
borderBottomColor: any;
_text: {
color: string;
};
};
_disabled: {
bg: any;
};
};
};
AccordionDetails: {
baseStyle: {
p: number;
};
};
Actionsheet: {
defaultProps: {
size: string;
justifyContent: string;
animationPreset: string;
};
};
ActionsheetContent: {
baseStyle: () => {
alignItems: string;
px: number;
py: number;
borderRadius: string;
roundedTop: number;
_light: {
_dragIndicator: {
bg: string;
};
};
_dark: {
_dragIndicator: {
bg: string;
};
};
_dragIndicator: {
height: number;
width: number;
borderRadius: number;
};
_dragIndicatorWrapper: {
pt: number;
pb: number;
mt: number;
width: string;
alignItems: string;
collapsable: boolean;
};
_dragIndicatorWrapperOffSet: {
py: number;
collapsable: boolean;
};
};
};
ActionsheetItem: {
baseStyle: () => {
width: string;
justifyContent: string;
_stack: {
space: number;
};
p: number;
_text: {
fontSize: string;
fontWeight: string;
};
_disabled: {
opacity: number;
};
_light: {
bg: string;
_icon: {
color: string;
};
_text: {
color: string;
};
_hover: {
bg: string;
};
_pressed: {
bg: string;
};
_focusVisible: {
_web: {
outlineWidth: string;
style: {
boxShadow: string;
};
bg: string;
};
bg: string;
};
};
_dark: {
bg: string;
_icon: {
color: string;
};
_text: {
color: string;
};
_hover: {
bg: string;
};
_pressed: {
bg: string;
};
_focusVisible: {
_web: {
outlineWidth: string;
style: {
boxShadow: string;
};
bg: string;
};
};
};
};
};
Alert: {
baseStyle: {
alignItems: string;
justifyContent: string;
p: number;
space: number;
borderRadius: string;
};
variants: {
subtle: (props: Record<string, any>) => {
_light: {
bg: any;
_icon: {
color: string;
};
};
_dark: {
bg: any;
_icon: {
color: string;
};
};
};
solid: (props: Record<string, any>) => {
_light: {
bg: any;
};
_dark: {
bg: any;
};
_icon: {
color: string;
};
};
'left-accent': (props: Record<string, any>) => {
borderLeftWidth: number;
_light: {
bg: any;
_icon: {
color: string;
};
borderLeftColor: string;
};
_dark: {
bg: any;
_icon: {
color: string;
};
borderLeftColor: string;
};
};
'top-accent': (props: Record<string, any>) => {
borderTopWidth: number;
_light: {
bg: any;
_icon: {
color: string;
};
borderTopColor: string;
};
_dark: {
bg: any;
_icon: {
color: string;
};
borderTopColor: string;
};
};
outline: (props: Record<string, any>) => {
borderWidth: number;
_light: {
_icon: {
color: string;
};
borderColor: string;
};
_dark: {
_icon: {
color: string;
};
borderColor: string;
};
};
'outline-light': (props: Record<string, any>) => {
borderWidth: number;
_light: {
_icon: {
color: string;
};
borderColor: string;
};
_dark: {
_icon: {
color: string;
};
borderColor: string;
};
};
};
defaultProps: {
colorScheme: string;
variant: string;
};
};
AlertIcon: {
baseStyle: {
size: number;
};
};
AspectRatio: {
baseStyle: {};
defaultProps: {
ratio: number;
};
};
Avatar: {
baseStyle: (props: Record<string, any>) => {
bg: string;
position: string;
justifyContent: string;
alignItems: string;
borderRadius: string;
_text: {
fontWeight: number;
color: string;
};
_image: {
borderRadius: string;
alt: string;
_alt: {
fontWeight: number;
};
style: {
height: string;
width: string;
};
};
_light: {
borderColor: string;
};
_dark: {
borderColor: string;
};
};
sizes: {
xs: {
width: any;
height: any;
_text: {
fontSize: string;
};
_badgeSize: any;
};
sm: {
width: any;
height: any;
_text: {
fontSize: string;
};
_badgeSize: any;
};
md: {
width: any;
height: any;
_text: {
fontSize: string;
};
_badgeSize: any;
};
lg: {
width: any;
height: any;
_text: {
fontSize: string;
};
_badgeSize: any;
};
xl: {
width: any;
height: any;
_text: {
fontSize: string;
};
_badgeSize: any;
};
'2xl': {
width: any;
height: any;
_text: {
fontSize: string;
};
_badgeSize: any;
};
};
defaultProps: {
size: string;
};
};
AvatarBadge: {
baseStyle: () => {
borderRadius: string;
borderWidth: number;
bg: string;
size: number;
position: string;
right: number;
bottom: number;
_light: {
borderColor: string;
};
_dark: {
borderColor: string;
};
};
};
AvatarGroup: {
baseStyle: ({ isVertical }: Record<string, any>) => {
flexDirection: string;
space: number;
_avatar: {
borderWidth: number;
};
_hiddenAvatarPlaceholder: {
_text: {
color: string;
};
};
_light: {
_avatar: {
borderColor: string;
};
_hiddenAvatarPlaceholder: {
bg: string;
};
};
_dark: {
_avatar: {
borderColor: string;
};
_hiddenAvatarPlaceholder: {
bg: string;
};
};
};
defaultProps: {
isVertical: boolean;
};
};
Badge: {
baseStyle: {
flexDirection: string;
space: number;