View/SafeAreaView and Text

O ponto de partida em um projeto React Native é o arquivo "App.js", e é ele que iremos percorrer nesta aula.

Ajustando o arquivo

O arquivo em questão já vem com um conteúdo padrão. Porém, para melhor entendimento, iremos limpar o arquivo deixando-o como se vê abaixo:

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

export default function App() {
  return (
    <Text>Olá!</Text>
  );
}

Conhecendo alguns componentes

O único componente deixado foi o 'Text' , que serve para inserir um texto na tela, similar à tag 'p' do HTML. Porém, na tela o texto sumiu e, para resolver essa questão será criado um componente.

Acompanhando a aula, implemente o componente abaixo:

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

export default function App() {
  return (
    <SafeAreaView>
      <Welcome />
    </SafeAreaView>
  );
}

function Welcome() {
  return (
    <View>
      <Text>Bem vindo</Text>
    </View>
  )
}

O componente 'View' encapsula outros componentes, tornando-se similar à tag 'div' no HTML. Já o 'SafeAreaView' é um tipo de 'View' que encapsula os elementos em uma área segura, para não haver conflito com outros elementos da tela que não fazem parte do aplicativo.

Nota:

O 'SafeAreaView' é uma funcionalidade disponível apenas para plataformas iOS. Uma alternativa para o Android pode ser implementada conforme o link: How to use SafeAreaView for Android devices.