NahuelDev23 Blog

Fundamentos de diseño de `position` en React Native

En React Native, las propiedades de diseño relacionadas con position funcionan de manera similar a CSS, pero con ciertas diferencias clave debido a su naturaleza de renderizado nativo. Aquí tienes una descripción detallada:

Propiedades `position` en React Native

position: 'relative' (Comportamiento predeterminado):
- Es el valor predeterminado para todos los componentes.
- Los elementos se posicionan en el flujo normal del diseño, respetando el espacio ocupado por otros componentes.
- Las propiedades de desplazamiento (top, left, right, bottom) se aplican en relación a su posición original dentro del contenedor.
position: 'absolute':
- Los elementos se eliminan del flujo normal del diseño.
- Se posicionan en relación al borde de su contenedor padre más cercano con posición explícita.
- No afectan la posición de otros elementos en el diseño.

Diferencias entre React Native y CSS

Sin z-index implícito en absolute:
- En CSS, los elementos con position: absolute pueden tener un z-index implícito (por encima de elementos relativos). En React Native, debes usar zIndex explícitamente para controlar la superposición.
Renderizado nativo:
- En React Native, las posiciones y dimensiones no siempre dependen de un flujo DOM, ya que se trabaja con vistas nativas.
Flexbox por defecto:
- React Native utiliza Flexbox como sistema de diseño principal, lo que influye en cómo se calculan los tamaños y posiciones.

Ejemplo: Comportamiento de `relative` y `absolute` con cuadros anidados

Vamos a crear un ejemplo con un contenedor padre y tres cuadros de colores que demuestren el comportamiento de position: relative y position: absolute.

Código de Ejemplo

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

const PositionExample = () => {
  return (
    <View style={styles.container}>
      {/* Contenedor Padre */}
      <View style={styles.parent}>
        {/* Cuadro 1 - Relative (flujo normal) */}
        <View style={[styles.box, styles.box1]}>
          <Text style={styles.text}>Relative</Text>
        </View>
        {/* Cuadro 2 - Absolute (arriba a la izquierda del padre) */}
        <View style={[styles.box, styles.box2]}>
          <Text style={styles.text}>Absolute</Text>
        </View>
        {/* Cuadro 3 - Absolute (abajo a la derecha del padre) */}
        <View style={[styles.box, styles.box3]}>
          <Text style={styles.text}>Bottom Right</Text>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f8f8f8',
  },
  parent: {
    width: 300,
    height: 300,
    backgroundColor: '#d9d9d9',
    borderWidth: 2,
    borderColor: '#aaa',
    position: 'relative', // Base para los hijos
  },
  box: {
    width: 100,
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box1: {
    backgroundColor: 'skyblue',
    position: 'relative', // En el flujo normal
  },
  box2: {
    backgroundColor: 'tomato',
    position: 'absolute', // Sale del flujo
    top: 0,
    left: 0,
  },
  box3: {
    backgroundColor: 'gold',
    position: 'absolute', // Sale del flujo
    bottom: 0,
    right: 0,
  },
  text: {
    color: '#fff',
    fontWeight: 'bold',
  },
});

export default PositionExample;

Explicación del Ejemplo

parent (Contenedor padre):
- Es un contenedor con un tamaño fijo (300x300), y sus hijos se posicionan en relación a él.
- Tiene position: relative, que es necesario para que los hijos con position: absolute se posicionen en su interior.
box1 (Relative):
- Este cuadro se mantiene en el flujo normal del diseño.
- Su posición depende del flujo del Flexbox dentro del contenedor padre.
box2 (Absolute - Top Left):
- Este cuadro se posiciona en la esquina superior izquierda del contenedor padre.
- No afecta la posición del resto de los cuadros.
box3 (Absolute - Bottom Right):
- Este cuadro se posiciona en la esquina inferior derecha del contenedor padre.
- Como position: absolute, tampoco afecta a otros elementos.

Resultado Visual Esperado

Un contenedor gris (parent) con tres cuadros:
- Cuadro azul en la parte superior (flujo normal, relative).
- Cuadro rojo fijo en la esquina superior izquierda (sale del flujo, absolute).
- Cuadro amarillo fijo en la esquina inferior derecha (sale del flujo, absolute).

Conceptos Clave

Uso de relative: Es ideal para mantener un diseño fluido dentro de un contenedor.
Uso de absolute: Útil para superposiciones, posicionamiento fijo o diseños complejos.
Flexibilidad: React Native combina position con Flexbox, permitiendo un diseño dinámico y adaptable.

absolute

Teniendo en cuenta este ejemplo :

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

export const PositionScreen = () => {
  return (

    <View style={styles.container}>

      <View style={styles.greenBox} />
      <View style={styles.purpleBox} />
      <View style={styles.redBox} />
    </View>
  );
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#28c4d9',
  },
  purpleBox: {
    width: 100,
    height: 100,
    backgroundColor: '#5856d6',
    borderWidth: 10,
    borderColor: 'white',
  },
  redBox: {
    position: 'absolute',
    left: 200,
    width: 100,
    height: 100,
    backgroundColor: 'red',
    borderWidth: 10,
    borderColor: 'white',
  },
  greenBox: {
    backgroundColor: 'green',
    borderWidth: 10,
    borderColor: 'white',
    // position: 'absolute',
    // top: 0,
    // left: 0,
    // right: 0,
    // bottom: 0,
    ...StyleSheet.absoluteFillObject,
  },

});

Explicación del Ejemplo

El código ilustra cómo se pueden posicionar elementos en una pantalla utilizando propiedades de position en React Native, con un enfoque en cómo absolute y relative afectan su disposición.

Claves del Ejemplo:

Contenedor Principal (container):
- Ocupa todo el espacio disponible en la pantalla (flex: 1).
- Tiene un fondo azul claro (#28c4d9).
Cajas:
- Caja Verde (greenBox):
  - Cubre todo el contenedor porque usa StyleSheet.absoluteFillObject.
  - Esto es equivalente a usar:
```
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
```
    pero absoluteFillObject es un helper que aplica automáticamente estas propiedades para un fondo o superposición completa.
  - La caja verde se posiciona detrás de las demás debido a que está declarada primero y no tiene zIndex.
- Caja Morada (purpleBox):
  - Tiene position: 'relative' (por defecto).
  - Se renderiza en el flujo normal del diseño.
  - Es la segunda capa (sobre la caja verde).
- Caja Roja (redBox):
  - Usa position: 'absolute', lo que la elimina del flujo normal y la posiciona en left: 200.
  - Se posiciona encima de las demás porque absolute lo hace más independiente.

Diferencias entre `absoluteFillObject` y configuración manual de `position`

Configuración Manual:

position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,

Requiere que especifiques todas las propiedades de manera explícita.
Funciona igual que absoluteFillObject, pero es más propenso a errores si olvidamos definir alguna propiedad (por ejemplo, top o left).

Helper `absoluteFillObject`:

...StyleSheet.absoluteFillObject

Es un helper integrado en React Native que aplica automáticamente:

{
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
}

Es más limpio, conciso y reutilizable.
Ideal para crear fondos, superposiciones, o posicionar elementos que cubren todo un contenedor.

Cómo Crear un Background

La greenBox en el ejemplo demuestra cómo implementar un fondo que cubra todo el contenedor usando ambas técnicas. Aquí hay un desglose:

Usando Configuración Manual:

greenBox: {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  backgroundColor: 'green',
  borderWidth: 10,
  borderColor: 'white',
},

Usando `absoluteFillObject`:

greenBox: {
  ...StyleSheet.absoluteFillObject,
  backgroundColor: 'green',
  borderWidth: 10,
  borderColor: 'white',
},

Cuándo Usar Cada Técnica

Configuración Manual:
- Útil cuando necesitas un control más granular y solo especificar ciertas propiedades (top, left, etc.).
- Por ejemplo, cuando un elemento debe cubrir solo parte del contenedor.
absoluteFillObject:
- Ideal cuando necesitas que un elemento cubra todo el espacio de su contenedor padre.
- Más limpio y menos código repetitivo.

Resultado Visual

En este ejemplo:

La caja verde ocupa toda la pantalla como fondo.
La caja morada aparece en el flujo normal del diseño, centrada y sobre la caja verde.
La caja roja aparece flotando en el lado derecho (a 200 unidades del borde izquierdo) y encima de las demás.

Fundamentos de diseño de position en React Native

Propiedades position en React Native

Diferencias entre React Native y CSS

Ejemplo: Comportamiento de relative y absolute con cuadros anidados

Código de Ejemplo

Explicación del Ejemplo

Resultado Visual Esperado

Conceptos Clave

absolute

Explicación del Ejemplo

Claves del Ejemplo:

Diferencias entre absoluteFillObject y configuración manual de position

Configuración Manual:

Helper absoluteFillObject:

Cómo Crear un Background

Usando Configuración Manual:

Usando absoluteFillObject:

Cuándo Usar Cada Técnica

Resultado Visual

Fundamentos de diseño de `position` en React Native

Propiedades `position` en React Native

Ejemplo: Comportamiento de `relative` y `absolute` con cuadros anidados

Diferencias entre `absoluteFillObject` y configuración manual de `position`

Helper `absoluteFillObject`:

Usando `absoluteFillObject`: