import { StatusBar, SafeAreaView, StyleSheet, Text, View } from 'react-native';

import Cesta from './src/telas/cesta';

export default function App() {

  return (

    <View>

      <SafeAreaView>

      <StatusBar style="auto" />

      <Text >Primeiro programa</Text>

      <Cesta/>           ---- IMPORTA O COMPONENTE CESTA QUE FOI CRIADO 

      </SafeAreaView>

    </View>

  );

}

// export default function App() {

//   return (

//     <View style={styles.container}>

//       <Text>AI ZE DA MANGA</Text>

//       <StatusBar style="auto" />

//       <Cesta/>

//     </View>

//   );

// }

// const styles = StyleSheet.create({

//   container: {

//     flex: 1,

//     backgroundColor: '#fff',

//     alignItems: 'center',

//     justifyContent: 'center',

//   },

// });

import React from "react";

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

import icone from "../../assets/icone.jpg"

function Cesta() {

  return <Image source={icone} style={estilos.topo} />

}

const estilos = StyleSheet.create({

  topo: {

    width: '100%',

    height: "70%",

  }

});

export default Cesta;

import React from "react";

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

import icone from "../../assets/icone.jpg"

function Cesta() {

  return <Image source={icone} style={estilos.topo} />

}

// pega a largura da tela 

const Witdh = Dimensions.get('screen').width;

const estilos = StyleSheet.create({

  topo: {

    width: '100%',

    height: Witdh,

  }

});

export default Cesta;

import React from "react";

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

import icone from "../../assets/icone.jpg"

function Cesta() {

    // usado esse marcador no retorno pode agrupar diversos componentes ja que so pode retornar 1

    return<>

        <Image source={icone} style={estilos.topo} />

        <Text>Titulo da imagem </Text>

    </>

}

const Witdh = Dimensions.get('screen').width;

const estilos = StyleSheet.create({

  topo: {

    width: '100%',

    height: Witdh,

  }

});

export default Cesta;

import { StatusBar, SafeAreaView, StyleSheet, Text,   TextInput , Label } from 'react-native';

import Cesta from './src/telas/cesta';

import { useFonts, Inter_900Black , Bangers_400Regular} from '@expo-google-fonts/inter';

acima é importado a fonte

export default function App() {

  let [fontsLoaded] = useFonts({

    Bangers_400Regular,

    // aqui carrega as fopntes

  });

  if (!fontsLoaded) {

   se não for carregada retorna esse texto

    return <Text>Houve um erro com a fonte</Text>;

  }

  return (

      <SafeAreaView>

      {/* <Text style={{ fontFamily: 'Bangers_400Regular', fontWeight:"bold", fontSize: 40 , textAlign: 'center' , color: "gray" }} > Mon Premier Programme APP </Text> */}

      <TextInput></TextInput>

      <StatusBar style="auto" />

      {/* essa cesta eh um componente importado  */}

      <Cesta/>      

      </SafeAreaView>

  );

}

// export default function App() {

//   return (

//     <View style={styles.container}>

//       <Text>AI ZE DA MANGA</Text>

//       <StatusBar style="auto" />

//       <Cesta/>

//     </View>

//   );

// }

// const styles = StyleSheet.create({

//   container: {

//     flex: 1,

//     backgroundColor: '#fff',

//     alignItems: 'center',

//     justifyContent: 'center',

//   },

// });

import React from "react";

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

import icone from "../../assets/icone.jpg";

import { Colors } from "react-native/Libraries/NewAppScreen";

import foto_perfil from "../../assets/foto_perfil.jpg";

const items = [

  { name: "Lucas", image: foto_perfil },

  { name: "Fontini", image: foto_perfil },

  { name: "Lucas3", image: foto_perfil },

  { name: "Lucas4", image: foto_perfil }

];

function Itens() {

  return (

// INCUINDO COMPONENTE E ITERANDO SOBRE UM ARRAY COM NOME E IMAGEM

    <ScrollView contentContainerStyle={styles.container}>

      {items.map(({ name, image }) => (

        <View style={styles.item} key={name}>

          <Image source={image} style={styles.image} />

          <Text  style={styles.texto} >{name}</Text>

        </View>

      ))}

    </ScrollView>

  );

}

const styles = StyleSheet.create({

    item: {

      flexDirection: "row",

      alignItems: "center",

      marginBottom: 20

    },

    image: {

      top: 10,

      left: "25%",

      width: 100,

      height: 100

    },

    texto:{

    top: 50,

    left: "30%",

    width: 100,

    height: 100,

    color: 'gray',

    fontWeight: 'bold',

    }

  });

  export default Itens;