Skip to content
S42UI - Server Driven UI for React Native

box

El componente box actúa como un contenedor. Similar a los view en React Native, box permite agrupar elementos, aplicando estilos personalizados que definen cómo se presentan y comportan. Es fundamental para estructurar la interfaz de usuario, ofreciendo opciones de personalización como sombras, bordes, rellenos y alineación. Un box siempre debe estar contenido dentro del componente body para garantizar su correcto funcionamiento en la estructura de la aplicación.

Props

shadow

Indica el nivel de sombra que queremos aplicar a nuestro box

enum(‘2’, ‘4’, ‘8’, ‘12’, ‘16’, ‘20’, ‘24’)

<box shadow="8">
  <text>Hola mundo</text>
</box>

style

La propiedad style permite darle estilo a los boxes, como así tambien definir comportamiento de como acomodar los elementos contenidos.

Propiedades:

  • backgroundColor: hexadecimal con el color de fondo.
  • borderBottomColor: hexadecimal con el color del border inferior.
  • borderRadius: indica el radio de los borders
  • borderBottomEndRadius: indica el número de radio que se debe aplicar al borde inferior
  • borderBottomLeftRadius: indica el número de radio que se debe aplicar al borde inferior izquierdo
  • borderBottomRightRadius: indica el número de radio que se debe aplicar al borde inferior derecho
  • borderBottomWidth: indica el tamaño del borde inferior
  • borderWidth: indica el ancho del borde
  • borderColor: indica el color del border en hexadecimal
  • borderRightColor: indica el color del borde derecho
  • borderRightWidth: indica el ancgi del borde derecho
  • borderStyle: indica el tipo de borde. enum(‘solid’, ‘dotted’, ‘dashed’)
  • padding: indica la distancia entre el borde del box y los elementos contenidos.
  • paddingHorizontal: indica la distancia horizontal del box y los elementos contenidos.
  • paddingVertical: indica la distancia vertical del box y los elementos contenidos.
  • border: indica la distancia entre el box y los elementos al rededor
  • alignContent: enum(‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘space-between’, ‘space-around’, ‘space-evenly’)
  • alignItems: enum(‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’)
  • alignSelf: enum(‘auto’, ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’)
  • justifyContent: enum(‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’, ‘space-evenly’)
  • flex: number
  • margin: margen

Ejemplo

<screen>
  <meta>
    <header>Box Example</header>
  </meta>
  <body>
    <box shadow="24" style="borderWidth:'1'; padding:'4'; borderColor:'#000'">
      <link to="/productDetail.xml?id=2">
        <image
          uri="https://http2.mlstatic.com/D_NQ_NP_665877-MLA74913737478_032024-O.webp"
          width="100"
          height="100"
          style="borderWidth='0'; borderColor='#000000'; borderRadius: 20"
          blurRadius="0"
          resizeMode="cover"
        />
      </link>
    </box>
  </body>
</screen>