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,

  },

});