Snippets

Combining Dimensional Prefixes with Rounding ('r')

In React Native Smart Styles, you have the flexibility to specify dimensions relative to the screen's height ('h') or width ('w'), and you can also ensure these values are rounded to the nearest whole number by using the 'r' snippet. This combination enhances the precision and adaptability of your styling.

How It Works

• h Prefix(optional): Indicates that the value should be calculated relative to the screen height.
• w Prefix(optional): Indicates that the value should be calculated relative to the screen width.
• r Suffix(optional): Indicates that the resulting value should be rounded to the nearest whole number.

You can combine these prefixes and the suffix in a flexible format, such as 'h50r', 'w50r', 'h 50r', or 'h 50 r'. This flexibility ensures ease of use while maintaining the accuracy of style dimensions.

Usage Example

Here's an example demonstrating how to use these combinations in your style sheets:

const styles = SmartStyles.create({
  circle: {
    width: 'h100r',  // Calculates 100 units relative to the screen height and rounds the result
    height: 'h100r'  // Ensures the height matches the width, maintaining a perfect circle
  },
  rectangle: {
    width: 'w200r',  // Calculates 200 units relative to the screen width and rounds the result
    height: 'h50 r'  // Demonstrates flexibility in spacing and still applies rounding
  }
});

Benefits

Combining 'h' or 'w' with 'r' allows for:

• Dynamic calculation of dimensions that are perfectly tailored to the device's screen size.
• Ensured rounding to whole numbers, promoting a cleaner and more consistent rendering of UI elements.
• Flexibility in syntax, accommodating varying coding styles or preferences.

This powerful combination of functionality supports sophisticated and adaptable layouts in your React Native applications.