Shorthand properties (Upcoming)

We plan to introduce object-based shorthand properties to make layout styling more expressive and less repetitive.

Object syntax

You will be able to define spacing using descriptive keys:

const styles = StyleSheet.create({
  box: {
    padding: {
      top: 10,
      bottom: 20,
    },
    margin: {
      block: "1rem",
      inline: "2rem",
    },
  },
});

How it expands

These shorthand objects will be expanded into standard React Native properties:

{
  paddingTop: 10,
  paddingBottom: 20,
  marginTop: "1rem",
  marginBottom: "1rem",
  marginLeft: "2rem",
  marginRight: "2rem",
}

Supported concepts

• Directional: top, bottom, left, right
• Logical: block, inline
• Grouped: horizontal, vertical

Why object syntax?

• Improved type safety
• Clear and self-documenting styles
• Better compatibility with rem processing
• Avoids ambiguity of positional arrays

Status

This feature is currently not yet implemented and is part of Fluffle’s upcoming roadmap.