1
resposta

Titulo da cesta por baixo do entalhe do celular

Olá, tudo bem? Estou realizando a parte de adicionar estilo no título da cesta e gostaria de saber como faze para deixar o titulo localizado na parte a baixo da linha onde fica as notificações.

Titulo fica por baixo da camera

Gostaria de saber se há alguma maneira de deixar esse titulo pra baixo da linha do entalhe, visto que muitos aparelhos hoje em dia são assim. Segue um exemplo: A barra de endereço seria como se fosse o titulo da cesta, se posicionando para baixo da linha de notificações e do entalhe do celular

1 resposta

Olá, Raphael.

Tudo bem?

Isso acontece porque você precisa adicionar a <statusBar /> do próprio React Native no App, isso para android e precisa adicionar também o <SafeAreaView> e envolver o código do App isso para iOS, para deixar correta a barra superior.

Isso foi ensinado nesse curso no vídeo: https://cursos.alura.com.br/course/react-native-comecando-zero/task/97005 apartir do minuto 1:33.

O código do App fica assim corrigido:

import React from 'react';
import { StatusBar, SafeAreaView } from "react-native";

import Cesta from "./src/telas/Cesta";

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

Espero ter ajudado. Bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software