Comenzando con los Layouts de React Native

() translation by (you can also view the original English article)

En este tutorial, aprenderás como configurar aplicaciones Nativas de React y como implementar layouts utilizados comunmente en aplicaciones. Esto incluye el Layout Stack, el Layout Grid y el Layout Absolute. Voy a asumir que ya sabes lo básico de estilar una aplicación de React Native y cómo utilizar CSS en general, entonces no estaré demasiado en StyleSheet.create y cómo agregar estilo a diferentes elementos.

Puedes encontrar todo el código fuente para este tutorial en GitHub.

Configuración del Proyecto

Para hacer las cosas sencillas, utilizaremos React Native for Web. Con el React Native for Web Starter, podemos acelerar el proceso de un proyecto de React Native que corra en el browser. El código es 100% compatible con el proyecto React Native. Crearemos un componente separado para cada layout que vamos a implementar así puedes importarlos fácilmente a un proyecto normal de React Native si lo deseas. Simplemente usaremos React Native for Web porque es más simple de configurar y correr.

Puedes ejecutar los siguientes comandos para configurar el proyecto:

1	git clone https://github.com/grabcode/react-native-web-starter.git RNLayouts
2	cd RNLayouts
3	rm -rf .git
4	npm install

Una vez que terminó de instalar, navega dentro del directorio app/componenents. Aquí es donde están los archivos con los que trabajaremos primariamente.

Abre el archivo App.js y reemplaza el código por defecto con el siguiente:

import React, { Component } from 'react';

//import the components that we'll be creating here

export class App extends Component {
  render() {
    return (
        //use the components here
    );
  }
}

Luego, puedes importar los componentes que crearemos y luego renderizarlos desde este archivo. Solo recuerda que cualquier componente que guardamos dentro del directorio layouts no debería renderizarse con nada más. Por ejemplo, si tenemos layouts/StackLayouts.js, haz lo siguiente en App.js:

import React, { Component } from 'react';

//import the components that we'll be creating here
import StackLayout from './layouts/StackLayout';

export class App extends Component {
  render() {
    return (
        <StackLayout />
    );
  }
}

Puedes servir el proyecto ejecutando el siguiente comando:

1	npm run dev

Esto te permite acceder al browser a través de http://localhost:3000. Una carga de toda la página se disparará si haces un cambio a cualquiera de los archivos que están importados del archivo App.js.

Cómo Crear Diferentes Layouts

Los Layuouts en React Native usan un subset de Flexbox (Digo "subset" porque no todas las características que de la especificación de Flexbox están incluídas). Entonces si ya sabes Flexbox, ya puedes aplicar ese conocimiento en React Native. También vale la pena señalar que no hay floats o unidades basadas en porcentajes en React Native. Esto significa que solo podemos hacer layouts utilizando Flexbox y posicionamiento CSS.

Layout Stack (Apilado)

La primera clase de layout que vamos a implementar será el Layout Stack. Para orientación vertical, apila los elementos uno sobre otro, mientras que para orientación horizontal, los elementos se ubican lado a lado. Veamos la orientacion vertical primero:

Aquí está el código para logar el layour anterior:

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

var { height } = Dimensions.get('window');

var box_count = 3;
var box_height = height / box_count;

export default class VerticalStackLayout extends Component {
  render() {
    return (
        <View style={styles.container}>
            <View style={[styles.box, styles.box1]}></View>
            <View style={[styles.box, styles.box2]}></View>
            <View style={[styles.box, styles.box3]}></View>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column'
  },
  box: {
    height: box_height
  },
  box1: {
    backgroundColor: '#2196F3'
  },
  box2: {
    backgroundColor: '#8BC34A'
  },
  box3: {
    backgroundColor: '#e3aa1a'
  }
});   

Desmenuzando el código anterio, primero tenemos la altura de el espacio disponible para que utilice la app. Luego calculamos el alto que tendrá cada caja. Ya que tenemos tres cajas, lo dividimos por tres.

1	var { height } = Dimensions.get('window');
2
3	var box_count = 3;
4	var box_height = height / box_count;

Para el markup, las cajas deberán estar contenidas en un contenedor. Los estilos comunes se declaran en un objeto box, y los colores de background únicos se aplican a objetos con nombres únicos (box1, box2, box3):

<View style={styles.container}>
    <View style={[styles.box, styles.box1]}></View>
    <View style={[styles.box, styles.box2]}></View>
    <View style={[styles.box, styles.box3]}></View>
</View>

Para utilizar Flexbox, debes utilizar la propiedad flex en el contenedor. El valor es la cantidad de espacio que consumirá. Si es 1, significa que va a consumir todo el espacio disponible, siempre que no tenga hermanos. Echaremos un vistazo a un ejemplo utilizando flex con hermanos más adelante.

flexDirection te permite especificar el eje primario del layout. Por defecto, está configurado como column. Configurando flexDirection como column significa que los hijos del contenedor se ordenarán verticalmente (apilados uno sobre otro) mientras que configurado como row significa que los hijos se dispondrán horizontalmente (lado a lado). Para lograr alturas similares, configura la altura del box con el valor que calculamos anteriormente.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column'
  },
  box: {
    height: box_height //set this one
  },
  box1: {
    backgroundColor: '#2196F3'
  },
  box2: {
    backgroundColor: '#8BC34A'
  },
  box3: {
    backgroundColor: '#e3aa1a'
  }
}); 

Aquí hay una imagen que te ayudará a visualizar cómo el contenido fluirá en base a la flexDirection que especifiques.

Illustration of flexDirection row and column

El método que mostré recién es la forma manual de hacer las cosas. Utilizando Dimensions para computar el ancho o el alto de los elementos fallará si tu app soporta orientaciones de dispositivo tanto portrait como landscape. Eso es porque tan pronto como el usuario gira el dispositivo, el ancho o la altura que computaste anteriormente estará mal. React Native no lo recalculará automáticamente por ti, por eso tu app terminará viéndose extraña.

Flexbox en realidad puede hacer los cálculos por ti si le provees los valores correctos. Para obtener el mismo layout que antes sin utilizar Dimensions, todo lo que tienes que hacer es especificar flex: 1 para todas las cajas en lugar de especificar el height:

1	box: {
2	flex: 1
3	},

Ahora un ejemplo del uso de flex con hermanos. Ahora tenemos tres hermanos con el mismo valor de flex. Esto significa que los tres van a compartir de manera igual el espacio desde que el valor de flex es el mismo. (Realmente puedes utilizar cualquier valor de flex mientras que los elementos hijos tengan el mismo valor.)

Utilizando este conocimiento, puedes lograr layouts con header, contenido y footer.

//header
box1: {
    flex: 1,
    backgroundColor: '#2196F3'
},
//content
box2: {
    flex: 10,
    backgroundColor: '#8BC34A'
},
//footer
box3: {
    flex: .5,
    backgroundColor: '#e3aa1a'
}

Así es como lucirá:

Nota que esto será estático. Entonces si tu contenido principal es más alto que la altura máxima disponible, entonces el resto de tu contenido quedará oculto. Si esperas que tu contenido sea superior a ese límite, puedes utilizar el componente ScrollView para generar automáticamente una barra de scroll vertical como en las páginas web.

Layouts Stack Horizontales

Para implementar layouts de apilamiento horizontal, todo lo que tienes que hacer es cambiar la flexDirection a row.

1	container: {
2	flex: 1,
3	flexDirection: 'row'
4	},

Si cambiamos el valor flex de la caja nuevamente a 1, esto resulta en lo siguiente.

La única cosa que cambió es la flexDirection, que ahora está configurada como row. Ya que todas las cajas están configuradas con flex:1, van a tener el mismo ancho y alto. Todas las ideas del layout de stack vertical son igualmente aplicables a este.

Justificar el Contenido

Si quieres controlar la distribución de los hijos dentro de un contenedor, utiliza la propiedad justifyContent en el contenedor.

A continuación hay cinco valores posibles que pueden ser utilizados con esta propiedad. En los siguientes ejemplos, el alto de cada uno de los hijos se disminuye para demostrar como cada uno se vería. No vas a poder ver ninguna diferencia si el valor de flex era 1 para cada uno de los hijos, porque van a terminar consumiendo todo el espacio disponible.

flex-start: los elementos hijos se alinean al punto de inicio. Mira el fondo blanco justo debajo del último hijo. Así es como sabes que está utilizando flex-start porque todos los hijos están alineados a partir del punto de inicio. Esto deja un espacio vacío en el final.

flex-end: los elementos hijos se alinean a partir de la línea final. Mira que esta vez el espacio vacío está en el punto de inicio.

center: los elementos hijos se ubican a partir del centro. Esta vez el espacio en blanco se distribuye de igual manera entre el punto inicial y el final.

space-around: los elementos hijos se distribuyen de manera tal que haya la misma cantidad de espacio en blanco alrededor de cada uno. Esto significa que los elementos en la parte exterior van a tener menos espacio en su lado exterior y el espacio entre dos hijos se duplica.

space-between: los elementos hijos se distribuyen de manera tal que haya la misma cantidad de espacio entre cada uno de ellos.

Como habrás notado, cada uno de estas propiedades de estilo depende del alto o el ancho de los elementos hijos. Depende del ancho si el flexDirection es row, y del alto si el flexDirection es column.

Por ejemplo, space-between realmente no tendrá ningún efecto en un layout de stack vertical si cada elemento hijo está utilizando flex para controlar la altura. Esto es porque no hay más espacio para el hueco entre cada elemento hijo para que consuma.

Alinear Items

A primera vista, justifyContent y alignItems puede parecer que hacen lo mismo. También comparten tres valores posibles: flex-start, flex-end, y center, con el agregado del valor stretch.

La principal diferencia entre justifyContent y alignItems es el eje con el que los hijos se distribuyen. Como vimos antes, justifyContent siempre utiliza el eje primario cuando distribuye los elementos hijos. Pero alignItems utiliza el eje opuesto al primario.

Ya sabemos que el eje está determinado por el flexDirection que se configuró. Entonces si el flexDirection es row, el eje primario va de izquierda a derecha. Esto significa que el eje que cruza irá de arriba hacia abajo. Por otro lado, si flexDirection es column entonces el eje que cruza irá de izquierda a derecha.

A continuación hay algunos ejemplos de justifyContent y alignItems implementado lado a lado con flexDirection en row. El primero utiliza justifyContent mientras que el segundo utiliza alignItems.

flex-start: el posicionamiento de los elementos es el mismo, por lo que la implementación de alignItems luce exactamente igual que justifyContent.

justifyContent and alignItems flex-start

flex-end: ahora comenzamos a ver una diferencia. En primera instancia, es al final de la línea en la primera fila, mientras que en segunda instancia parece estar en la línea de comienzo de la última fila.

center: center tiene la misma idea de los valores que utilizamos hasta ahora. En la primera instancia, los items están centrados en el eje-x mientras que en segunda, los items están centrados en el eje-y.

justifyContent and alignItems center

stretch: utiliza esto para tener los elementos hijos estirados para cubrir el contenedor. Este es el valor por default de alignItems, entonces especificar este valor es opcional. Ya hemos visto como funciona esto cuando lo implementamos en layouts de stack vertical y horizontal.

Aqui está el código utilizado en los ejemplos anteriores. Simplemente juega con los valores de flexDirection, justifyContent y alignItems si quieres ver como lucen:

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

export default class AlignItems extends Component {
  render() {
    return (
      <View style={styles.wrapper}>
        <View style={styles.container}>
            <View style={[styles.box, styles.box1]}></View>
            <View style={[styles.box, styles.box2]}></View>
            <View style={[styles.box, styles.box3]}></View>
        </View>
        <View style={styles.container2}>
            <View style={[styles.box, styles.box1]}></View>
            <View style={[styles.box, styles.box2]}></View>
            <View style={[styles.box, styles.box3]}></View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1
  },
  container: {
    flex: .5,
    flexDirection: 'row',
    justifyContent: 'flex-start', //replace with flex-end or center
    borderBottomWidth: 1,
    borderBottomColor: '#000'
  },
  container2: {
    flex: .5,
    flexDirection: 'row',
    alignItems: 'flex-start' //replace with flex-end or center
  },
  box: {
    width: 100,
    height: 100
  },
  box1: {
    backgroundColor: '#2196F3'
  },
  box2: {
    backgroundColor: '#8BC34A'
  },
  box3: {
    backgroundColor: '#e3aa1a'
  }
}); 

Si quieres espeificar la alineación de elementos individuales dentro de un contenedor, puedes utilizar la propiedad alignSelf. Todos los valores posibles para align-items son aplicables también a esta propiedad. Entonces, por ejemplo, puedes alinear un solo elemento a la derecha de su contenedor, mientras que el resto se alineará a la izquierda.

Layout Grilla

React Native realmente no viene con un sistema de layout de grilla, pero Flexbox es lo suficientemente flexible como para crear uno. Utilizando las cosas que aprendimos hasta ahora, podemos crear layouts de Gillas utilizando Flexbox. Aquí hay un ejemplo:

Y este es el código que crea ese layout:

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

export default class GridLayout extends Component {
  render() {
    return (
      <View style={styles.container}>
          <View style={styles.row}>
            <View style={[styles.box, styles.box2]}></View>
            <View style={[styles.box, styles.box3]}></View>
            <View style={[styles.box, styles.two]}></View>
          </View>
          
          <View style={styles.row}>
            <View style={[styles.box, styles.two]}></View>
            <View style={[styles.box, styles.box2]}></View>
            <View style={[styles.box, styles.box3]}></View>
          </View>

          <View style={styles.row}>
            <View style={[styles.box, styles.box2]}></View>
            <View style={[styles.box, styles.two]}></View>
            <View style={[styles.box, styles.box3]}></View>
          </View>

          <View style={styles.row}>
            <View style={[styles.box, styles.box2]}></View>
            <View style={[styles.box]}></View>
            <View style={[styles.box, styles.box3]}></View>
          </View>

          <View style={styles.row}>
            <View style={[styles.box, styles.box2]}></View>
            <View style={[styles.box]}></View>
          </View>

          <View style={styles.row}>
            <View style={[styles.box]}></View>
          </View>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  row: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 10
  },
  box: {
    flex: 1,
    height: 100,
    backgroundColor: '#333',
  },
  box2: {
    backgroundColor: 'green'
  },
  box3: {
    backgroundColor: 'orange'
  },
  two: {
    flex: 2
  }
});

Del código anterior, puedes ver como emulamos lo que usualmente se hace en los frameworks de grillas de CSS. Cada fila se contiene en una vista separada, y cada elemento de la grilla está dentro de ellas. Un valor por default de flex en 1 se aplica a cada item para que compartan equitativamente el espacio disponible en cada fila. Pero para los items que necesitan ocupar mayor espacio, se aplica un valor más grande de flex. Esto automáticamente ajusta el ancho de los otros items para acomodar todos los items.

Si quieres agregar espacio entre cada item en una fila, puedes agregar padding a cada uno y luego crear una caja dentro de cada uno.

Esto resulta en lo siguiente:

Layout Absoluto

React Native solo soporta posicionamiento absolute y relative. Esto no debería limitarte, sin embargo, porque siempre puedes combinar estas con Flexbox para posicionar los diferentes elementos donde los quieras.

Veamos cómo lograríamos lo siguiente:

Podemos lograr esto fácilmente si tenemos control absoluto sobre los valores de posicionamiento disponibles en el browser. Pero como estamos en React Native, necesitamos pensar en esto primero de la forma Flexbox y luego utilizar el posicionamiento de CSS para las cajas menores.

Utilizando Flexbox, esto puede lograrse de dos maneras. Puedes o bien utilizar row o column para el flexDirection del contenedor principal. Como acomodes los diferentes elementos dependerá del método que elijas. Aquí vamos a utilizar row para el flexDirection entonces la pantalla estará dividida en tres columnas. La primer columna contendrá la caja naranja, la segunda columna contendrá las negra, gris y verde, y la tercera contendrá las pequeñas cajas azul y púrpura.

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

export default class Positioning extends Component {
  render() {
      return (
      <View style={styles.container}>

        <View style={styles.left}>
          <View style={[styles.box, styles.big_orange_box]}>
          </View>
        </View>
          
        <View style={styles.middle}>
          <View style={[styles.box, styles.big_black_box]}>
            <View style={[styles.inner_box, styles.red_box]}></View>
          </View>        
          <View style={[styles.big_gray_box]}></View>
          <View style={[styles.box, styles.big_green_box]}>
            <View style={[styles.inner_box, styles.orange_box]}></View>
          </View>
        </View>
  
        <View style={styles.right}>
          <View style={[styles.box, styles.big_lightblue_box]}>
            <View style={[styles.inner_box, styles.black_box]}></View>
          </View>
          <View style={[styles.inner_box, styles.purple_box]}></View>
        </View>
        
      </View>
    );
  }
}

Si ya sabes cómo cada elemento se dispondrá, es solo una cuestión de aplicar las cosas que aprendimos hasta ahora. Después de todo, no necesitamos realmente aplicar posicionamiento CSS en las cajas grandes, solo en las chicas.

La primera columna solo tiene la caja naranja, entonces aplicando justifyContent:'center' a su contenedor debería hacer el truco. En caso de que lo hayas olvidado, el default de flexDirection es column. Esto significa que poniendo justifyContent como center, el hijo se alineará en el centro del eje-y.

La segunda columna es básicamente la misma idea que la primera, solo que esta vez no queremos alinear todas las cajas al centro. Lo que queremos es que tengan el mismo espacio entre ellas, y justifyContent: 'space-between' hace el trabajo. Pero al mismo tiempo queremos centrar todos los hijos en el eje-x por lo que utilizamos alignItems: 'center'.

La única parte complicada acá es que no debes aplicar ninguna propiedad width a la caja gris porque queremos estirar todo para que ocupe todo el ancho de su padre. Como no aplicamos ningún width, debemos aplicar alignSelf: 'stretch' a la caja gris para que consuma todo el ancho de su padre.

A continuación, para posicionar la pequeña caja roja apenas afuera de su posición relativa, utilizamos position: relative y luego aplicamos valores de top y left porque su posición relativa está en la esquina superior izquierda de su padre.

Y para la pequeña caja naranja, utilizamos position: 'absolute' porque necesitamos alinearla a la esquina superior derecha de su padre. Esto funciona porque los elementos con posición absoluta en React Native están acoplados a su padre.

La tercera columna básicamente aplica la misma idea por lo que no voy a explicarlo.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row'
  },
  left: {
    flex: 1,
    justifyContent: 'center'
  },
  middle: {
    flex: 5,
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  right: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-end'
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: '#333'
  },
  big_green_box: {
    backgroundColor: 'green'
  },
  big_orange_box: {
    backgroundColor: 'orange'
  },
  big_lightblue_box: {
    backgroundColor: '#03A9F4'
  },
  big_gray_box: {
    height: 100,
    alignSelf: 'stretch',
    backgroundColor: '#ccc'
  },  
  inner_box: {
    width: 20,
    height: 20,
  },
  red_box: {
    position: 'relative',
    backgroundColor: 'red',
    top: 10,
    left: 10
  },
  orange_box: {
    position: 'absolute',
    backgroundColor: 'orange',
    top: 10,
    right: 10
  },
  purple_box: {
    position: 'absolute',
    backgroundColor: 'purple',
    bottom: 10,
    right: 10
  },
  black_box: {
    position: 'relative',
    backgroundColor: 'black'
  }
});   

A continuación, intentemos implementar un layout con header y footer fijos. Esto se encuentra comunmente en apps que tienen una navegación por pestañas; las pestañas se fijan al pie de la página mientras que el contenido principal se puede scrollear.

Para lograr esto, necesitamos utilizar el componente ScrollView para que el contenido principal vaya sobre el alto del contenedor, React Native automáticamente generará la barra de scroll vertical. Esto nos permite agregar marginTop y marginBottom al contenido principal para que el header y el footer fijos no obstruyan el contenido principal. También, nota que los valores de left y right del header y el footer se configuran en 0 para que podamos utilizar el ancho total del dispositivo.

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

export default class FixedHeaderFooter extends Component {
  render() {
      return (
      <View style={styles.container}>
        <View style={[styles.header]}></View>
        <ScrollView>
          <View style={[styles.content]}>
            <View style={[styles.box]}></View>
            <View style={[styles.box]}></View>
            <View style={[styles.box]}></View>
            <View style={[styles.box]}></View>
            <View style={[styles.box]}></View>
            <View style={[styles.box]}></View>
            <View style={[styles.box]}></View>
          </View>
        </ScrollView>
        <View style={[styles.footer]}></View>
      </View>
  	);
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center'
  },
  header: {
    height: 40,
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    backgroundColor: '#03A9F4',
    zIndex: 10
  },
  content: {
    alignItems: 'center',
    marginTop: 50,
    marginBottom: 40
  },
  footer: {
    height: 40,
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: '#8BC34A'
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: '#333',
    marginBottom: 10
  }
});      

Así es como lucirá:

Librerías de Terceros

React Native tiene una gran comunidad por detrás, entonces no sería raro que algunas librerías ya hayan sido creadas para simplificar la implementación de los layouts. En esta sección, los introduciré a una librería llamada React Native Easy Grid. También la puedes utilizar para describir cómo quieres disponer tu app haciendo uso de los componentes Grid, Row y Col.

Puedes instalarlo con el siguiente comando:

1	npm install react-native-easy-grid --save

Importa la librería y extrae los diferentes componentes en tu archivo.

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

import { Col, Row, Grid } from "react-native-easy-grid";

El componente Grid se utiliza para envolver todo. Col se utiliza para crear una columna, y Row se utiliza para crear filas. Puedes especificar una propiedad size para ambos Row y Col, sin embargo a continuación solo utilizamos Row. Si el tamaño no se especifica, dividirá equitativamente el espacio disponible entre instancias de Col.

En este caso, hay solo dos, entonces toda la pantalla se divide en dos columnas. La primera columna se divide luego en dos filas. Aquí especificamos un size, pero puedes saltearlo si solo necesitas filas del mismo tamaño, como hicimos antes.

export default class FlexboxGridLibrary extends Component {
  
  render() {
    return (
        <Grid>
            <Col>
                <Row size={50} style={styles.orange_box}></Row>
                <Row size={50} style={styles.green_box}></Row>
            </Col>
            <Col style={styles.gray_box}></Col>
        </Grid>
    );
  }
  
}

Una vez que está hecho, todo lo que tienes que hacer es agregar estilo para las filas y columnas:

const styles = StyleSheet.create({
  orange_box: {
    backgroundColor: 'orange'
  },
  green_box: {
    backgroundColor: 'green'
  },
  gray_box: {
    backgroundColor: 'gray'
  }
});

Como habrás notado, React Native Easy Grid tiene una API muy intuitiva.

Conclusión

En este tutorial, aprendiste como configurar apps con React Native. Específicamente, aprendiste cómo utilizar el Flexbox de React Native para posicionar cosas. También aprendiste cómo utilizar React Native Easy Grid, lo que hace más sencilla la implementación de Flexbox.

En un tutorial futuro, voy a poner todo lo que aprendiste en práctica recreando elementos UI que se encuentran comunmente en apps: cosas como calendarios, listas y navegaciones por pestañas.