Nessa aula vamos criar a página de Regras, que vai conter o texto explicativo dos dois modos de jogo.

1 - Criar dentro da pasta pages, uma pasta chamada rules. Dentro dessa pasta (rules) vamos criar a estrutura padrão que são os arquivos: index.jsx e styles.js.

2- Vamos criar a estrutura padrão do arquivo index.jsx:

import React from "react";

export default function Rules() {
  return;
}

3- No arquivo styles.js, vamos criar um container que vai armazenar os estilos dos elementos:

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

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

4- No arquivo index.jsx, vamos importar o container:

import React from "react";

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

5- Agora vamos inserir o ícone (seta) para retornar para a página anterior. Ele é do expo vector icon, que instalamos anteriormente. Então vamos importar o “material icon” de dentro do expo vector icon. Primeiro vamos no styles.js

import { MaterialIcons } from "@expo/vector-icons";

Caso você queira ver outras famílias de ícones diferentes, veja na documentação: https://icons.expo.fyi/