Prop de ancho nativo de React

En React Native, si necesitamos establecer cualquier dimensión de un componente es agregando un ancho y una altura fijos al estilo, en este artículo estableceremos el ancho de cualquier componente usando los accesorios de ancho. 

Sintaxis:

style={{
        width: dimension, height: dimension,
      }} />

Hay tres tipos de ancho de cota como se menciona a continuación:

1. Dimensiones fijas: todas las dimensiones en React Native no tienen unidades y representan píxeles independientes de la densidad aquí, solo se debe usar el número sin procesar.
2. Dimensiones flexibles: aquí use el estilo flexible en el componente para tener espacio disponible, se manipula a sí mismo para capturar el espacio.
3. Dimensiones porcentuales: esta opción debe usarse cuando desea que ese componente llene una determinada parte de la pantalla, pero no desea usar el flex.

Ahora comencemos con la implementación:

Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.

npm install -g expo-cli

Paso 2: ahora cree un proyecto con el siguiente comando.

expo init myapp

Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, myapp

cd myapp

Estructura del proyecto:

Ejemplo:

import React from 'react';
import { View } from 'react-native';
  
const WidthCompo= () => {
  
  return (
    <View style={{ height: '100%' }}>
      <View style={{
        width: '15%', height: '15%', backgroundColor: 'yellow'
      }} />
      <View style={{ flex: 3, backgroundColor: 'green' }} />
      <View style={{
        width: 150, height: 150, backgroundColor: 'purple'
      }} />
    </View>
  );
};
  
export default WidthCompo;

Producción:

Referencia: https://reactnative.dev/docs/height-and-width