Box Size

A simple reference for simultaneous width and height box sizing configurations, perfect for square elements like avatars, icons, status indicators, or fully automatic layout wrappers.

---

Size Utilities

Style Property / Function	Type / Value	Description
rncStyles.size_auto	{ height: "auto", width: "auto" }	Resizes both height and width automatically based on content.
rncStyles.size(value: number)	Function	Sets a uniform pixel square footprint (width and height match precisely).

---

Usage Example

SizePreview.tsx

import React from 'react';
import { View, Image, Text } from 'react-native';
import rncStyles from 'rncstyles';

export default function SizePreview() {
  return (
    <View style={{ gap: 16 }}>
      
      {/* Fixed Uniform Square Avatar Element */}
      <Image 
        source={{ uri: '[https://placeholder.com/avatar.png](https://placeholder.com/avatar.png)' }} 
        style={[rncStyles.size(48), { borderRadius: 24 }]} 
      />

      {/* Small Uniform Square Activity Indicator Dot */}
      <View style={[rncStyles.size(12), { backgroundColor: '#10b981', borderRadius: 6 }]} />

      {/* Auto Sizing Layout Wrapper Component */}
      <View style={[rncStyles.size_auto, { backgroundColor: '#f4f4f5' }]}>
        <Text>This box wraps tightly around its internal content nodes.</Text>
      </View>

    </View>
  );
}