Vamos começar criando projeto com a opção blank:

expo init exercicio-stylesheet

Com o projeto criado podemos já partir para a edição do componente App.js. Vamos modificar o texto e ajustar os estilos inicias da tela:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Minha jornada no React Native</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'flex-start',
    paddingHorizontal: 16,
    paddingTop: 80
  },
  title: {
    borderBottomColor: '#121212',
    borderBottomWidth: 1,
    color: '#121212',
    fontSize: 24,
    paddingBottom: 8
  }
});

Vamos criar uma <View> para abrigar os items com os assuntos que estamos estudando:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Minha jornada no React Native</Text>
      <View style={styles.itemGrid}>

      </View>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'flex-start',
    paddingHorizontal: 16,
    paddingTop: 80
  },
  title: {
    borderBottomColor: '#121212',
    borderBottomWidth: 1,
    color: '#121212',
    fontSize: 24,
    paddingBottom: 8
  },
  itemGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginTop: 10,
  }
});

Para adicionar os assuntos podemos criar um novo componente nesse mesmo arquivo (por questão de simplicidade) chamado Item. Esse novo componente precisará de uma prop que chamaremos de text, para o assunto, e outra que chamaremos de bgColor, que será usada para definir a cor de fundo do item:

Obs.: repare que também podemos usar estilos inline nos componentes.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

function Item(props) {
  return (
    <View style={{
      backgroundColor: props.bgColor,
      borderRadius: 16,
      marginTop: 16,
      marginRight: 16,
      padding: 16,
      width: '100%',
    }}>
      <Text style={{ fontWeight: '700' }}>{props.text}</Text>
    </View>
  )
}

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Minha jornada no React Native</Text>
      <View style={styles.itemGrid}>

      </View>
      <StatusBar style="auto" />
    </View>
  );
}

// ...

Agora que temos um componente Item podemos inclui-lo no componente App onde inseriremos todos os itens da nossa lista, colocando as cores apropriadas:

// ...

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Minha jornada no React Native</Text>
      <View style={styles.itemGrid}>
        <Item text='Fundamentos do React Native' bgColor='#00ff9f' />
        <Item text='Expo e Expo CLI' bgColor='#00ff9f' />
        <Item text='Estilização com StyleSheet' bgColor='#00ff9f' />
        <Item text='Navegação' bgColor='#f64348' />
        <Item text='ScrollView e FlatList' bgColor='#f64348' />
        <Item text='Periféricos' bgColor='#f64348' />
        <Item text='Styled Components' bgColor='#f64348' />
        <Item text='Temas e Estilos Globais' bgColor='#f64348' />
        <Item text='Consumo de APIs' bgColor='#f64348' />
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

// ...