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

export default function FlexEjemplo() {
  return (
    <View style={styles.container}>
      <Text style={styles.boxOne}>one</Text>
      <Text style={styles.boxTwo}>two</Text>
      <Text style={styles.boxThree}>three</Text>
      <Text style={styles.boxFour}>four</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
	//cuando los elementos tienen flex, en automatico sale un scroll como pasaria en un flatlist, solo tienen que tener sus parents también flex  
	
	  /*Todo los componentes son por default flex, y todo los que esta dentro de un flex lo hereda*/
	  flex: 1,/*Esto hace que se expanda el texto a encontrar todo al mismo tiempo*/
    paddingTop: 40,
    backgroundColor: '#ddd',
    flexDirection: 'row',/*aqui haces que se acomode vertical u horizontal*/
    justifyContent: 'space-around',/*alineación en el eje primario segun flexdirection sea row o column*/ 
	/*space around no funciona si hay flex en los hijos*/
    alignItems: 'center',/*esto es alignación en el eje secundario*/
    height: '100%',
  },
  boxOne: {
	flex: 0.2,
    backgroundColor: 'violet',
    padding: 10,
  },
  boxTwo: {
	flex: 1,
    backgroundColor: 'gold',
    padding: 20,
  },
  boxThree: {
	flex: 0.5,
    backgroundColor: 'coral',
    padding: 30,
  },
  boxFour: {
	flex: 1.3,
    backgroundColor: 'skyblue',
    padding: 40,
  }
});