Components & layout

Components & layout

Cross-platform UIs are trees of components (React Native) or widgets (Flutter). You compose small pieces — text, images, buttons, containers — into screens, using flexbox-style layout.

Example (React Native):

function Greeting() {
  return (
    <View style={{ padding: 16 }}>
      <Text>Hello, mobile!</Text>
    </View>
  );
}

Key points

• Screens are trees of components/widgets.
• Compose small pieces into bigger ones.
• Layout is flexbox-style (rows, columns, flex).

Try it: sketch a screen as a tree of components.