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",

  },

});

Mudando o menu

 

Embrião do App Bombinhas SC 😍

Esse vídeo me impressionou mesmo! App com Componentes Topo e Conteúdo dentro do App()

 

Meu Primeiro App

 

Minha Visão - Exercício dO Segredo

 import React from "react";

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

import Img1 from "./assets/astrowater.png";

import Img2 from "./assets/freediving.png";

import Img3 from "./assets/techdiving.png";

import Img4 from "./assets/rn.png";

import Img5 from "./assets/uba.jpg";

import Img6 from "./assets/india.png";

import Img7 from "./assets/asclepio.png";

export default function App() {

  return (

    <View style={styles.container}>

      <View style={styles.year}>

        <Text style={styles.title1}>2022</Text>

        <View style={styles.line1}>

          <View>

            <Image source={Img2} style={styles.img1} />

            <Text style={styles.title2}>Janeiro</Text>

          </View>

          <View>

            <Image source={Img4} style={styles.img1} />

            <Text style={styles.title2}>Fevereiro</Text>

          </View>

          <View>

            <Image source={Img1} style={styles.img1} />

            <Text style={styles.title2}>Abril</Text>

          </View>

          <View>

            <Image source={Img3} style={styles.img1} />

            <Text style={styles.title2}>Julho</Text>

          </View>

        </View>

      </View>

      <View style={{ flexDirection: "row" }}>

        <View style={styles.year}>

          <Text style={styles.title1}>2023</Text>

          <View style={styles.line1}>

            <View>

              <Image source={Img5} style={styles.img1} />

              <Text style={styles.title2}>Fevereiro</Text>

            </View>

            <View>

              <Image source={Img6} style={styles.img1} />

              <Text style={styles.title2}>Julho</Text>

            </View>

          </View>

        </View>

        <View style={styles.year}>

          <Text style={styles.title1}>2030</Text>

          <View style={styles.line1}>

            <View>

              <Image source={Img7} style={styles.img1} />

              <Text style={styles.title2}>Março</Text>

            </View>

          </View>

        </View>

      </View>

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    alignItems: "center",

    backgroundColor: "rebeccapurple",

  },

  year: {

    alignItems: "center",

    paddingHorizontal: 145,

  },

  line1: {

    flex: 1,

    flexDirection: "row",

    marginTop: 5,

    alignItems: "center",

  },

  line2: {

    flex: 1,

    flexDirection: "row",

    marginTop: 5,

    alignItems: "center",

  },

  title1: {

    fontSize: 42,

    fontWeight: "bold",

    color: "white",

    marginTop: 30,

    marginBottom: 20,

  },

  title2: {

    fontSize: 30,

    color: "white",

    alignItems: "center",

  },

  img1: {

    width: 300,

    height: 200,

    borderRadius: 20,

    borderWidth: 2,

    borderColor: "white",

    marginRight: 5,

  },

});