Centering is one of the most common layout tasks, and in React Native it's solved exclusively via flexbox properties – there's no CSS margin: auto equivalent for individual elements.

1. Description

Two axes, two properties: justifyContent centers along the MAIN axis (with the default flexDirection: 'column', that's VERTICAL), alignItems along the CROSS axis (HORIZONTAL). Setting both to 'center' centers a child fully in both directions.

2. Short example

<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
  <Text>Perfectly centered</Text>
</View>

3. Complete project: a centering cheat sheet

npx create-expo-app centering-demo
cd centering-demo

import { View, Text, StyleSheet } from 'react-native';

function Demo({ title, style }) {
  return (
    <View style={styles.section}>
      <Text style={styles.label}>{title}</Text>
      <View style={[styles.box, style]}>
        <View style={styles.dot} />
      </View>
    </View>
  );
}

export default function App() {
  return (
    <View style={styles.container}>
      <Demo title="Vertical only (justifyContent)" style={{ justifyContent: 'center' }} />
      <Demo title="Horizontal only (alignItems)" style={{ alignItems: 'center' }} />
      <Demo
        title="Both axes (fully centered)"
        style={{ justifyContent: 'center', alignItems: 'center' }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 60, paddingHorizontal: 16 },
  section: { marginBottom: 20 },
  label: { marginBottom: 6, color: '#374151' },
  box: { height: 100, backgroundColor: '#f3f4f6', borderRadius: 8 },
  dot: { width: 16, height: 16, borderRadius: 8, backgroundColor: '#2563eb' },
});

4. Explanation

• First box: only justifyContent: 'center' – the dot sits vertically centered but stays at the LEFT edge (no alignItems set → default 'stretch', so the dot starts at the left).
• Second box: only alignItems: 'center' – the mirror image, horizontally centered, vertically at the top.
• Third box: BOTH set – the dot sits exactly in the center in both directions.
• Centering a single child is the special case of flex: 1 on the ENTIRE screen or container – for centering MULTIPLE sibling elements relative to each other, flexDirection and possibly gap also matter.

5. Outputs