Style Properties

Style properties in React-JUCE generally aim to match the behavior and experience of writing CSS or writing a StyleSheet with React Native. It's important to note, however, that these style properties are not proper CSS, and that we have no notion of parsing CSS stylesheets. In React-JUCE, these properties are simple directives passed to the underlying juce::Component heirarchy that yield behavior that matches much of the CSS specificiation.

At present, these style properties are applied as a top-level prop to any given component, as you would with any other prop. In the future, we may adopt an API closer to that of React Native's StyleSheet.

Layout Props

Property

Support

Spec

flex

Yes

Flexbox

flex-grow

Yes

Flexbox

flex-shrink

Yes

Flexbox

flex-basis

Yes

Flexbox

flex-direction

Yes

Flexbox

justify-content

Yes

Flexbox

align-items

Yes

Flexbox

align-content

Yes

Flexbox

align-self

Yes

Flexbox

flex-wrap

Yes

Flexbox

position

Yes

Flexbox

left

Yes

Flexbox

top

Yes

Flexbox

right

Yes

Flexbox

bottom

Yes

Flexbox

width

Yes

Flexbox

height

Yes

Flexbox

min-width

Yes

Flexbox

min-height

Yes

Flexbox

max-width

Yes

Flexbox

max-height

Yes

Flexbox

aspect-ratio

Yes

Flexbox

direction

Yes

Flexbox

overflow

Yes

Flexbox

margin

Yes

Flexbox

margin-left

Yes

Flexbox

margin-top

Yes

Flexbox

margin-right

Yes

Flexbox

margin-bottom

Yes

Flexbox

margin-start

Yes

Flexbox

margin-end

Yes

Flexbox

margin-horizontal

Yes

Flexbox

margin-vertical

Yes

Flexbox

padding

Yes

Flexbox

padding-left

Yes

Flexbox

padding-top

Yes

Flexbox

padding-right

Yes

Flexbox

padding-bottom

Yes

Flexbox

padding-start

Yes

Flexbox

padding-end

Yes

Flexbox

padding-horizontal

Yes

Flexbox

padding-vertical

Yes

Flexbox

View Props

Property

Support

Spec

border-left-width

Planned (#143)

MDN border-width

border-right-width

Planned (#143)

MDN border-width

border-top-width

Planned (#143)

MDN border-width

border-bottom-width

Planned (#143)

MDN border-width

border-left-color

Planned (#143)

MDN border-color

border-right-color

Planned (#143)

MDN border-color

border-top-color

Planned (#143)

MDN border-color

border-bottom-color

Planned (#143)

MDN border-color

border-bottom-left-radius

Planned (#143)

MDN border-radius

border-bottom-right-radius

Planned (#143)

MDN border-radius

border-top-left-radius

Planned (#143)

MDN border-radius

border-top-right-radius

Planned (#143)

MDN border-radius

border-width

Planned (#143)

MDN border-width

border-color

Planned (#143)

MDN border-color

border-radius

Planned (#143)

MDN border-radius

background-color

Partial (#84)

MDN background-color

opacity

Yes

juce::Component::setAlpha