Example React Native "gap"

App.tsx

import React from 'react';
import type {PropsWithChildren} from 'react';
import {SafeAreaView, Text, ScrollView, StyleSheet, View} from 'react-native';

function Row({children}: PropsWithChildren): JSX.Element {
  return (
    <View
      style={{
        flexDirection: 'row',
        columnGap: 15,
      }}>
      {children}
    </View>
  );
}

function App(): JSX.Element {
  return (
    <SafeAreaView style={{flex: 1}}>
      <ScrollView contentContainerStyle={styles.container}>
        <Text style={{fontSize: 39, fontWeight: '900'}}>
          What's new in React Native?
        </Text>
        <Row>
          <View style={styles.box} />
          <View style={styles.box} />
          <View style={styles.box} />
        </Row>
        <Row>
          <View style={styles.box} />
        </Row>
        <Row>
          <View style={styles.box} />
          <View style={styles.box} />
        </Row>
        <Row>
          <View style={styles.box} />
        </Row>
        <Row>
          <View style={styles.box} />
          <View style={styles.box} />
        </Row>
        <Row>
          <View style={styles.box} />
          <View style={styles.box} />
          <View style={styles.box} />
        </Row>
        <Row>
          <View style={styles.box} />
        </Row>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 15,
    rowGap: 15,
  },
  box: {
    flexGrow: 1,
    height: 100,
    borderRadius: 10,
    backgroundColor: 'white',
    elevation: 16,
    shadowColor: '#000',
    shadowRadius: 10,
    shadowOffset: {height: 10, width: 0},
    shadowOpacity: 0.17,
  },
});

export default App;