Utility Props | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
If you are starting a new project, please try gluestack-ui for better performance and new design.
Utility Props
Style props are a way to alter the style of a component by simply passing props to it. It helps to save time by providing helpful shorthand ways to style components.
Style Props
The following table shows a list of every style prop and the properties within each group.
Margin and padding
Playground

Prop
CSS Equivalent
Theme Key
m, margin
margin
space
mt, marginTop
margin-top
space
mr, marginRight
margin-right
space
mb, marginBottom
margin-bottom
space
ml, marginLeft
margin-left
space
mx
margin-left and margin-right
space
my
margin-top and margin-bottom
space
p, padding
padding
space
pt, paddingTop
padding-top
space
pr, paddingRight
padding-right
space
pb, paddingBottom
padding-bottom
space
pl, paddingLeft
padding-left
space
px
padding-left and padding-right
space
py
padding-top and padding-bottom
space
Color and background color
Playground

Prop
CSS Equivalent
Theme Key
color
color
colors
bg, background
background
colors
bgColor
background-color
colors
opacity
opacity
-

Note: Above props can be written in the format: [color]:alpha.[opacityToken], this gets converted into RGBA color format and the opacityToken is mapped to

Playground
Typography
Playground

Prop
CSS Equivalent
Theme Key
fontFamily
font-family
fonts
fontSize
font-size
fontSizes
fontWeight
font-weight
fontWeights
lineHeight
line-height
lineHeights
letterSpacing
letter-spacing
letterSpacings
textAlign
text-align
-
fontStyle
font-style
-
textTransform
text-transform
-
textDecoration
text-decoration
-
Layout, width and height
Playground

Prop
CSS Equivalent
Theme Key
w, width
width
sizes
h, height
height
sizes
minW, minWidth
min-width
sizes
maxW, maxWidth
max-width
sizes
minH, minHeight
min-height
sizes
maxH, maxHeight
max-height
sizes
d, display
display
-
boxSize
width, height
sizes
verticalAlign
vertical-align
-
overflow
overflow
-
overflowX
overflowX
-
overflowY
overflowY
-
Flexbox
Playground

Prop
CSS Equivalent
Theme Key
alignItems, *align
align-items
-
alignContent
align-content
-
justifyItems
justify-items
-
justifyContent, *justify
justify-content
-
flexWrap, *wrap
flex-wrap
-
flexDirection, flexDir, *direction
flex-direction
-
flex
flex
-
flexGrow
flex-grow
-
flexShrink
flex-shrink
-
flexBasis
flex-basis
-
justifySelf
justify-self
-
alignSelf
align-self
-
order
order
-
Borders
Playground

Prop
CSS Equivalent
Theme Field
borderWidth
border-width
borderWidths
borderStyle
border-style
borderStyles
borderColor
border-color
colors
borderTop
border-top
borders
borderTopWidth
border-top-width
borderWidths
borderTopStyle
border-top-style
borderStyles
borderTopColor
border-top-color
colors
borderRight
border-right
borders
borderRightWidth
border-right-width
borderWidths
borderRightStyle
border-right-style
borderStyles
borderRightColor
border-right-color
colors
borderBottom
border-bottom
borders
borderBottomWidth
border-bottom-width
borderWidths
borderBottomStyle
border-bottom-style
borderStyles
borderBottomColor
border-bottom-color
colors
borderLeft
border-left
borders
borderLeftWidth
border-left-width
borderWidths
borderLeftStyle
border-left-style
borderStyles
borderLeftColor
border-left-color
colors
Borders Radius
Playground

Prop
CSS Equivalent
Theme Field
borderRadius, rounded
border-radius
radii
borderTopLeftRadius, roundedTopLeft
border-top-left-radius
radii
borderTopRightRadius, roundedTopRight
border-top-right-radius
radii
borderBottomRightRadius, roundedBottomRight
border-bottom-right-radius
radii
borderBottomLeftRadius, roundedBottomLeft
border-bottom-left-radius
radii
borderTopRadius, roundedTop
border-top-left-radius & border-top-right-radius
radii
borderRightRadius, roundedRight
border-top-right-radius & border-bottom-right-radius
radii
borderBottomRadius, roundedBottom
border-bottom-left-radius & border-bottom-right-radius
radii
borderLeftRadius, roundedLeft
border-top-left-radius & border-bottom-left-radius
radii
Position
Playground

Prop
CSS Equivalent
Theme Field
pos,position
position
-
zIndex
z-index
zIndices
top
top
space
right
right
space
bottom
bottom
space
left
left
space
Shadow
Playground

Prop
CSS Equivalent
Theme Field
shadow
box-shadow
shadows
Underscore Props
Internal Props
Provides a way to pass props to child components inside Composite components.
Playground

Prop
Type
Description
_stack
Passed props will be provided to child.
_text
Passed props will be provided to child.
Interaction Props
Provides a way to pass props on certain interaction.
Playground

Prop
Type
Description
_disabled
Same as the component
Passed props will be applied on disabled state.
_focus
Same as the component
Passed props will be applied on focused state.
_hover
Same as the component
Passed props will be applied on hovered state.
_invalid
Same as the component
Passed props will be applied on invalid state.
_pressed
Same as the component
Passed props will be applied on pressed state.
Platform Props
Provides a way to pass props based on Platform (android, ios or web).
Playground

Prop
Type
Description
_android
Same as the component
Passed props will be applied on android.
_ios
Same as the component
Passed props will be applied on ios.
_web
Same as the component
Passed props will be applied on web.
Nativebase logo
MadeWithNativeBase