Snippets

Overriding Default Conversion Methods

React Native Smart Styles allows you to override the default conversion method for dimension properties such as width and height. By default, numerical values are scaled relative to the axis they're sitting on. However, you can specify a different scaling basis using prefixes:

• h Prefix: Use this prefix to indicate that the value should be calculated relative to the screen height. For instance, h50 will calculate the value as 50 units relative to the height of the screen.

• w Prefix: This prefix can be used when you want the value to explicitly be calculated based on the screen width, which is useful when working with dimensions that must maintain consistent scaling with width.

Example of Overriding Conversion

When designing a UI element like a circle that needs to maintain its aspect ratio regardless of screen dimensions, you might specify:

const styles = SmartStyles.create({
    circle: {
        width: 'h100',  // Ensures the width of the circle is always 100 units relative to the screen height
        height: 100     // Automatically calculated relativly to the screen height
    },
    widthCircle: {
        width: 100,     // Automatically calculated relativly to the screen width
        height: 'w100'  // Ensures the height of the circle is always 100 units relative to the screen width
    }
});

This feature is particularly useful for maintaining design integrity across devices with varying aspect ratios and dimensions.