Botão usando Pressable ao invés de Button

 

REFERÊNCIAS:

Styling a React Native button:

https://docs.expo.dev/ui-programming/react-native-styling-buttons/

Color Names Supported by All Browsers

https://www.w3schools.com/cssref/css_colors.asp

Custom navigators

https://reactnavigation.org/docs/custom-navigators/

import React from "react";

import { View, Image, Text, StyleSheet, Pressable } from "react-native";

import Capa from "../../assets/mapa_bombinhas.jpg";

export default function TelaInicial(props) {

  return (

    <View style={styles.container}>

      <View style={styles.principal}>

        <Text style={styles.title}>Bombinhas - SC - Brasil</Text>

        <Text style={styles.subtitle1}>Viva ao máximo esse encanto!</Text>

        <Image source={Capa} style={styles.img} />

        <View>

          <Pressable

            style={styles.button}

            onPress={() => props.navigation.navigate("Conheça")}

          >

            <Text style={styles.text}>Conheça</Text>

          </Pressable>

          <Pressable

            style={styles.button}

            onPress={() => props.navigation.navigate("Compras")}

          >

            <Text style={styles.text}>Compras</Text>

          </Pressable>

          <Pressable

            style={styles.button}

            onPress={() => props.navigation.navigate("Aventura")}

          >

            <Text style={styles.text}>Aventura</Text>

          </Pressable>

        </View>

      </View>

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    alignItems: "center",

    padding: 5,

  },

  principal: {

    alignItems: "center",

    backgroundColor: "white",

    width: 400,

    borderRadius: 10,

  },

  img: {

    width: 400,

    height: 200,

    marginTop: 10,

    marginBottom: 10,

  },

  title: {

    fontWeight: "bold",

    fontSize: 22,

    marginTop: 5,

  },

  subtitle1: {

    fontSize: 18,

  },

  //novidade aqui

  button: {

    alignItems: "center",

    justifyContent: "center",

    paddingVertical: 12,

    paddingHorizontal: 32,

    borderRadius: 4,

    elevation: 3,

    backgroundColor: "black",

  },

  text: {

    fontSize: 16,

    lineHeight: 21,

    fontWeight: "bold",

    letterSpacing: 0.25,

    color: "white",

  },

});