No CSS files — you style with JavaScript objects and lay out with Flexbox, which is the default in React Native. Learn StyleSheet, the flex model, and how it differs from the web.
Why: styles are JavaScript objects, not CSS. You can pass an inline object, but StyleSheet.create groups them, gives you autocomplete, and is slightly optimized. Property names are camelCase (backgroundColor, not background-color) and numbers are density-independent pixels.
import { View, Text, StyleSheet } from 'react-native'
function Box() {
return (
<View style={styles.box}>
<Text style={styles.label}>Styled</Text>
</View>
)
}
const styles = StyleSheet.create({
box: { padding: 16, backgroundColor: '#2DD4A0', borderRadius: 8 },
label: { color: 'white', fontSize: 16, fontWeight: '600' },
})Why: every View is a flex container already, and — unlike the web — the default flexDirection is column (top to bottom), not row. justifyContent aligns along the main axis, alignItems along the cross axis. flex: 1 makes a view expand to fill available space.
const styles = StyleSheet.create({
// A column that centers its children both ways
screen: {
flex: 1,
flexDirection: 'column', // the default — top to bottom
justifyContent: 'center', // main axis (vertical here)
alignItems: 'center', // cross axis (horizontal here)
},
})Why: switch flexDirection to "row" to lay children out horizontally. Use gap for even spacing between children (simpler than margins), and flex on children to share space proportionally. This row gives the first item twice the width of the second.
const styles = StyleSheet.create({
row: { flexDirection: 'row', gap: 12, padding: 12 },
big: { flex: 2, height: 50, backgroundColor: '#1A1A2E' },
small: { flex: 1, height: 50, backgroundColor: '#FF6B6B' },
})Why: the style prop accepts an array — later entries override earlier ones, and falsy entries are ignored, which makes conditional styling clean. This is how you express an "active" or "error" variant without string class names.
function Tag({ active }: { active: boolean }) {
return (
<View style={[styles.tag, active && styles.tagActive]}>
<Text>Tag</Text>
</View>
)
}
const styles = StyleSheet.create({
tag: { padding: 8, backgroundColor: '#eee' },
tagActive: { backgroundColor: '#2DD4A0' },
})