Nessa aula, vamos iniciar a estrutura da página de sucesso.

1- Dentro da pasta Pages, vamos criar uma pasta Disarmed (com os arquivos básicos: index.jsx e styles.js)

import React from "react";

export default function Disarmed() {
  return
}

2- Vamos criar os estilos dos componentes que serão utilizados. Inicialmente vamos criar o Container e a Logo

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;
  background-color: ${({ theme }) => theme.colors.black};
  padding-top: ${getStatusBarHeight() + RFValue(50)}px;
`;

export const Logo = styled.Image`
  width: ${RFValue(270)}px;
  height: ${RFValue(50)}px;
  margin: 0 auto;
`;

3- Agora podemos inserí-los no index.jsx dessa pasta Disarmed:

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

import logoImg from "../../assets/logoDark.png";

export default function Disarmed() {

  return (
    <Container>
      <Logo source={logoImg} style={{ resizeMode: "contain" }} />
    </Container>
  );
}

4- Vamos inserir a imagem de sucesso e o título da página

export const Title = styled.Text`
  color: white;
  margin-top: ${RFValue(70)}px;
  font-size: ${RFValue(32)}px;
  font-family: ${({ theme }) => theme.fonts.bold};
  text-align: center;
`;

export const SucessImg = styled.Image`
  width: ${RFValue(270)}px;
  height: ${RFValue(150)}px;
  margin: 0 auto;
  margin-top: ${<Stack.Screen name="Start" component={Start} />
        <Stack.Screen name="Rules" component={Rules} />
        <Stack.Screen name="PlayAlone" component={PlayAlone} />
        <Stack.Screen name="PlayTogether" component={PlayTogether} />
        <Stack.Screen name="Disarmed" component={Disarmed} />
        <Stack.Screen name="Exploded" component={Exploded} />RFValue(50)}px;
`;

5- No index.jsx, podemos inserir esses elementos que acabamos de estilizar: