Styling feels like CSS, with a few differences.
Direct answer
React Native styles are JavaScript objects passed to the style prop, usually created with StyleSheet.create. Layout uses Flexbox, and the default direction is column. Property names use camelCase, such as backgroundColor.
Example
import { View, Text, StyleSheet } from "react-native";
export default function Card() {
return (
<View style={styles.card}>
<Text style={styles.title}>Hello</Text>
</View>
);
}
const styles = StyleSheet.create({
card: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
padding: 16,
borderRadius: 12,
backgroundColor: "#fff",
},
title: { fontSize: 18, fontWeight: "600" },
});
Differences from CSS
| CSS | React Native |
|---|---|
background-color | backgroundColor |
| default row | default column |
| no units | numbers are density-independent pixels |
| cascade | no inheritance except some text styles |
Platform differences
import { Platform } from "react-native";
const shadow = Platform.select({
ios: { shadowOpacity: 0.2, shadowRadius: 6 },
android: { elevation: 4 },
});
Where Teyro fits
Teyro's React Native for Beginners course turns this into short lessons you can play in a few minutes a day. It has 80 lessons, and you can start free.
The bottom line
Think Flexbox, write objects, test on both platforms.
