React Native: What are React Native's layout systems?

Flexbox (default):

1<View style={{
2  flex: 1,
3  flexDirection: "row",
4  justifyContent: "center",
5  alignItems: "center",
6}}>
7  <Text>Hello</Text>
8</View>

Differences from web CSS:

• Default flexDirection is column
• No display: grid
• Percentage values work differently
• flex: 1 is shorthand for flexGrow: 1

Positioning:

• position: "absolute" (not "fixed")
• No z-index (use rendering order)
• No float (use flexbox)

Platform-specific:

• Use Platform.select for padding
• Handle safe areas with SafeAreaView