Most Used React Native CSS Properties: Complete Cheat Sheet
By codenavigators |
Published on 25 March 2025
Most Used React Native CSS Properties: Complete Cheat Sheet
Styling in React Native is key to building visually appealing mobile applications. This cheat sheet covers the most useful React Native CSS properties to help you design modern and responsive UIs.
📏 Layout & Dimensions
Property
Description
Example
width
Set the width of an element
width: 200
height
Set the height of an element
height: 300
flex
Flex grow/shrink behavior
flex: 1
flexDirection
Axis direction (row/column)
flexDirection: 'row'
justifyContent
Align children (main axis)
justifyContent: 'center'
alignItems
Align children (cross axis)
alignItems: 'center'
alignSelf
Align self within parent
alignSelf: 'flex-end'
padding
Padding (all sides)
padding: 10
margin
Margin (all sides)
margin: 10
🎨 Colors & Background
Property
Description
Example
backgroundColor
Background color
backgroundColor: '#ff5733'
color
Text color
color: '#000'
opacity
Set transparency (0-1)
opacity: 0.8
borderColor
Border color
borderColor: '#227B94'
borderWidth
Border thickness
borderWidth: 2
🔤 Text Styling
Property
Description
Example
fontSize
Text size (in points)
fontSize: 16
fontWeight
Text weight (normal, bold)
fontWeight: 'bold'
textAlign
Text alignment
textAlign: 'center'
lineHeight
Line height
lineHeight: 24
letterSpacing
Space between letters
letterSpacing: 1.5
textDecorationLine
Underline or strikethrough
textDecorationLine: 'underline'
📦 Borders & Radius
Property
Description
Example
borderRadius
Rounded corners
borderRadius: 10
borderWidth
Border thickness
borderWidth: 1
borderStyle
Border style (solid, dashed)
borderStyle: 'dashed'
🔄 Positioning
Property
Description
Example
position
relative, absolute
position: 'absolute'
top, bottom, left, right
Set element position
top: 10
zIndex
Layer stacking
zIndex: 99
🌟 Other Useful Properties
Property
Description
Example
shadowColor
Shadow color (iOS)
shadowColor: '#000'
shadowOffset
Shadow position (iOS)
shadowOffset: { width: 2, height: 4 }
shadowOpacity
Shadow transparency (iOS)
shadowOpacity: 0.5
elevation
Shadow depth (Android)
elevation: 5
overflow
Overflow behavior
overflow: 'hidden'
📚 Conclusion
Mastering these React Native CSS properties will streamline your development process and help you create polished mobile interfaces. By understanding and using these essential properties, you can improve the appearance and functionality of your React Native applications. Stay tuned to our blog for more coding guides and tutorials!
