Nós precisamos agora fazer o nosso botão padrão. Nós vamos lá no nosso “index.jsx” de “DefaultButton” para criar. Nós vamos estar criando ele com algumas props, para ele ser 100% manipulável.

Uma das coisas que vamos receber também é o handle que ficará em onPress, que será alguma ação, por exemplo, navegação.

import React from "react";
import { StyleSheet, Text, TouchableOpacity } from "react-native";

export default function DefaultButton({
  buttonText,
  handlePress,
  width,
  height,
}) {
  return (
    <TouchableOpacity
      activeOpacity={0.7}
      onPress={handlePress}
    >
      <Text>{buttonText}</Text>
    </TouchableOpacity>
  );
}

Agora vamos apenas colocar os estilos. No nosso botão, vamos usar modulação de estilo, que será a mistura do estilo padrão e de um estilo inline, que vai ser manipulado através de props. (Esse estilo é reconhecido e definido através das [ ], que envolve os dois estilos (Normal e inline)

import React from "react";
import { StyleSheet, Text, TouchableOpacity } from "react-native";

export default function DefaultButton({
  buttonText,
  handlePress,
  width,
  height,
}) {
  return (
    <TouchableOpacity
      style={[styles.button, { width: width, height: height }]}
      activeOpacity={0.7}
      onPress={handlePress}
    >
      <Text style={styles.buttonText}>{buttonText}</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    alignItems: "center",
    justifyContent: "center",
    borderWidth: 1,
    borderColor: "#FFFFFF",
    borderRadius: 10,
    marginBottom: 20,
  },
  buttonText: {
    color: "#FFFFFF",
    fontWeight: "bold",
    fontSize: 20,
  },
});

Com isso, podemos colocar ele no nosso start. Vamos aproveitar para criar um handle vazio, para que a gente não tenha erro ao clicar e renderizar ele.

import React from "react";
import { View, Text, StyleSheet, Image, ScrollView } from "react-native";
import { useNavigation } from "@react-navigation/native";

import DefaultButton from "../../components/Common/DefaultButton";
import LifeStatus from "../../components/Common/LifeStatus";

export default function Start() {
	
	const handleNavAppExplanation = () => {
    console.log("Testando o clique");
  };

  return (
    <View style={styles.container}>
      <ScrollView style={styles.scroll} showsVerticalScrollIndicator={false}>
        <View style={{ alignItems: "center" }}>
          <Image
            source={require("../../assets/icons/logo3.png")}
            style={styles.logo}
          />
          <LifeStatus />
          <Text style={styles.description}>
            Vamos transformar sua vida {"\\n"} em um jogo, buscando sempre {"\\n"}{" "}
            o melhor nível.
          </Text>
          <DefaultButton
            buttonText={"Continuar"}
						handlePress={handleNavAppExplanation}
            width={250}
            height={50}
          />
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "rgba(21, 21, 21, 0.98)",
  },
  logo: {
    width: 300,
    height: 60,
    marginTop: 60,
    marginBottom: 20,
  },
  description: {
    color: "#FFFFFF",
    fontSize: 20,
    textAlign: "center",
    marginVertical: 60,
  },
});

Agora, podemos visualizar que está tudo correto. E também podemos verificar que ao clicar, vamos ver no console do vscode o retorono que queremos.