UI and layout

Declarative UI

What

You describe what the screen should look like for the current state, and the framework works out what to change on screen. You never update a label by hand.

Why

Flutter, React Native, Jetpack Compose and SwiftUI all work this way. It removes whole classes of bugs where the screen and the data disagree.

type Props = { name: string };

export function Greeting({ name }: Props) {
  return <Text>Hello, {name}</Text>;
}

Core components

Also called View, Text, Pressable

What

React Native renders real native views. View is a container, Text shows text, Image shows images, Pressable handles touches and ScrollView scrolls a small amount of content.

Why

Every screen is built from these, and they map to UIView and android.view.View, which is why the result looks and scrolls like a native app.

Flexbox and StyleSheet

Also called Flexbox, StyleSheet

What

Layout uses Flexbox, like CSS, with numbers in density-independent pixels. Styles are plain objects, usually created with StyleSheet.create.

Why

Rows, columns, spacing and alignment are all Flexbox properties, so knowing flex, flexDirection, justifyContent, alignItems and gap covers most layouts.

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 8,
    padding: 16,
  },
});

Rows, columns and stacks

Also called Row, Column, HStack, VStack

What

The basic layout containers place children horizontally, vertically or on top of each other, with spacing and alignment options.

Why

Almost every screen is nested rows and columns. Splitting a design into these boxes is the first step of building any screen.

<View style={styles.row}>
  <Image source={{ uri: user.avatar }} style={styles.avatar} />
  <Text style={{ flex: 1 }}>{user.name}</Text>
</View>

Lazy lists

Also called ListView.builder, FlatList, LazyColumn, virtualised list

What

A lazy list only builds the rows currently on screen, plus a few ahead, and recycles them as you scroll. Each row gets a stable key.

Why

Building thousands of rows at once uses lots of memory and makes scrolling stutter. Stable keys keep row state and animations attached to the right item.

<FlatList
  data={posts}
  keyExtractor={(post) => String(post.id)}
  renderItem={({ item }) => <PostRow post={item} />}
  ListEmptyComponent={<Text>No posts yet</Text>}
/>

Text input and forms

What

A text field shows a value from state and reports every change back. Keyboard type, autofill hints and validation messages make forms fast to fill in.

Why

Login, sign-up and checkout are forms, and small details like the email keyboard and autofill decide whether people finish them.

const [email, setEmail] = useState('');

<TextInput
  value={email}
  onChangeText={setEmail}
  placeholder="Email"
  keyboardType="email-address"
  autoCapitalize="none"
  autoComplete="email"
/>

Theming and dark mode

Also called dark mode, semantic colour, dynamic colour

What

A theme defines colours, typography and shapes in one place. Components read colours from the theme by role, such as primary or surface, and the app switches palettes when the system switches to dark mode.

Why

A theme keeps the app consistent and makes dark mode and brand changes a one-file job instead of a hunt through every screen.

const scheme = useColorScheme();
const colors = scheme === 'dark' ? darkColors : lightColors;

return (
  <View style={{ flex: 1, backgroundColor: colors.background }}>
    <Text style={{ color: colors.text }}>Hello</Text>
  </View>
);

Platform design guidelines

Also called Material Design, Human Interface Guidelines, HIG, Material 3, Cupertino

What

Material Design 3 is Google's design system for Android, and the Human Interface Guidelines are Apple's rules for iOS. They cover navigation patterns, spacing, typography, controls and touch target sizes.

Why

Users expect apps to behave like the rest of their phone. Following the guidelines avoids confusing navigation and some App Store review problems.

Example

Minimum touch targets are 48 by 48 dp on Android and 44 by 44 points on iOS. Android users expect the system back gesture to work everywhere; iOS users expect to swipe from the left edge to go back.

Safe areas and screen sizes

Also called edge-to-edge, insets, responsive layout, safe area, edge to edge, system bars, window size class, Dynamic Island

What

Safe areas, or insets, are the parts of the screen not covered by the notch, status bar, camera cutout or gesture bar. Responsive layouts adapt to small phones, large phones, foldables and tablets.

Why

Content under the status bar or home indicator is unreadable or untappable. Android 15 draws apps edge to edge by default, so insets must be handled on purpose.

Example

Flutter uses SafeArea and LayoutBuilder. React Native uses react-native-safe-area-context and useWindowDimensions. Compose uses WindowInsets and window size classes. SwiftUI respects safe areas by default and uses size classes.

Hot reload and previews

Also called Fast Refresh, Compose Preview, Xcode Previews, hot reload, hot restart, Live Edit

What

Tools that show code changes in a running app or an editor preview within a second or two, without rebuilding the whole app.

Why

Layout work is trial and error, and a fast loop makes it quick. Flutter has hot reload, React Native has Fast Refresh, Compose has @Preview and Live Edit, and SwiftUI has #Preview.