1- A primeira coisa que vamos fazer é criar a pasta start, dentro da pasta pages.

2- Na pasta start, vamos criar o index.jsx e styles.js

3- Agora vamos instalar a extensão “React-Native/React/Redux snippets for es6/es7” para nos auxiliar a gerar as estruturas básicas do app. (Instalar em extensões)

4- Agora vamos começar a criar a estrutura básica no arquivo Start>index.jsx.

• Vamos alterar o nome do arquivo App.js para App.jsx

import React from "react";

export default function Start() {
  return;
}

5- No arquivo styles.js, vamos importar algumas ferramentas do styled components e criar o primeiro componente, que é o container. Ele vai fazer a manipulação da view para que o background preencha todo espaço disponível dependendo do tamanho da tela e da barra de status.

5.1 - Vamos instalar aqui duas libs que serão úteis para lidarmos com a densidade de pixel.

npx expo install react-dom

npm i react-native-responsive-fontsize

npm i react-native-iphone-x-helper

import styled from "styled-components";
import { RFValue } from "react-native-responsive-fontsize";
import { getStatusBarHeight } from "react-native-iphone-x-helper";

export const Container = styled.View`
  flex: 1;
  padding-top: ${getStatusBarHeight() + RFValue(50)}px;
  background-color: #131313;

`;

6 - Para que possamos visualizar o progresso do nosso desenvolvimento, primeiro vamos importar o container de styles.js para o return do arquivo index.jsx, para que possamos ter uma visualização, então ele vai ficar assim:

import React from "react";
import {Container} from './styles'

export default function Start() {
  return <Container></Container>;
}

7 - Importar o start para o App.js para testar. Quando criamos o projeto, ele traz uma estrutura padrão, mas vamos apagar e deixar ele assim: chamando o start no return.