Skip to main content

Style

Styles accepted by most components (thanks to a style prop) are defined using style functions that prepare required object for React Native. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g backgroundColor rather than background-color.

The style prop accepts values returned by the style() constructor. That's the simplest way to pass styles. You can also pass an array or list of styles - the last style in the array has precedence, so you can use this to mix & inherit styles.

⚠️ Note that when a component grows in complexity, it is often cleaner to use StyleSheet.create to define several styles in one place.

We have made different style constructors because React Native have various components that accept different styles props. For example View doesn't accept color (only Text does).

Table of Contents

Style Example

Since an example is worth a thousand words...

open ReactNative

let styles = {
open Style
StyleSheet.create({
"container": viewStyle(
~maxHeight=600.->dp,
~width=80.->pct,
~justifyContent=#"flex-start",
~alignItems=#center,
~margin=auto,
(),
),
"cornerThing": viewStyle(
~position=#absolute,
~top=100.->dp,
~right=-20.->dp,
~transform=[rotate(~rotate=4.->deg)],
(),
),
"text": textStyle(~textTransform=#uppercase, ()),
})
}

@react.component
let make = (~isSomething) =>
<View style={styles["container"]}>
<View style={styles["cornerThing"]}>
<Text
style={
open Style
arrayOption([
Some(styles["text"]),
isSomething ? Some(style(~opacity=0.05, ())) : None,
])
}
/>
</View>
</View>

Style Units

size

size is required in various style props, to be specified as density-independant pixels, (dp function - also known as logical pixels), percentage (pct function) or also auto (inline string, edge case for margin).

As soon as Style module is open, you can make size in various ways as you can see in these random examples

  • ~height=10.5->dp (= ~height=dp(10.5))
  • ~width=55.->pct (= ~width=pct(55.))
  • ~margin=auto

offset

offset is used for shadowOffset & textShadowOffset.

Eg: ~shadowOffset=offset(~height=2., ~width=4.)

angle

angle is used for transforms. It can be expressed in degrees (deg function) or in radians (rad function):

  • 20.->deg (eg: rotateX(~rotateX=20.->deg)
  • 0.5.->rad (eg: rotateZ(~rotateZ=0.5->rad)

Style Functions

Style.style

For convenience, this function allows you to prepare a style object with all styles available in React Native. The nice side of this is that you can use this function & not think about what component is going to use it. On the other hand, this function can trigger React Native error screen (eg: if you pass color to a View component).

style accepts all the Style Props:

⚠️ Internally, React Native codebase types for this function are called ____DangerouslyImpreciseStyle_Internal. That's why we created new functions: viewStyle, textStyle & imageStyle.

Style.viewStyle

This function accepts all React Native styles below:

Style.textStyle

This function accepts all React Native styles below:

Style.imageStyle

This function accepts all React Native styles below:

Style Props

Layout Style Props

Official documentation

alignContent

Accepts one of the following values:

  • #"flex-start" (default)
  • #"flex-end"
  • #center
  • #stretch
  • #"space-around"
  • #"space-between"

Controls how rows align in the cross direction, overriding the alignContent of the parent.

alignItems

Accepts one of the following values:

  • #"flex-start"
  • #"flex-end"
  • #center
  • #stretch (default)
  • #baseline

Aligns children in the cross direction. For example, if children are flowing vertically, alignItems controls how they align horizontally.

alignSelf

Accepts one of the following values:

  • #auto (default)
  • #"flex-start"
  • #"flex-end"
  • #center
  • #stretch
  • #baseline

Controls how a child aligns in the cross direction, overriding the alignItems of the parent.

aspectRatio

Accepts a float.

Aspect ratio controls the size of the undefined dimension of a node. Aspect ratio is a non-standard property only available in react native and not CSS.

  • On a node with a set width/height, aspect ratio controls the size of the unset dimension
  • On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset
  • On a node with a measure function, aspect ratio works as though the measure function measures the flex basis
  • On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset
  • Aspect ratio takes min/max dimensions into account

bottom

Accepts a size.

Number of logical pixels to offset the bottom edge of this component.

direction

Accepts one of the following values:

  • #inherit (default)
  • #ltr
  • #rtl

direction specifies the directional flow of the user interface. The default is #inherit, except for root node which will have value based on the current locale.

Only for

  • iOS

display

Accepts one of the following values:

  • #flex (default)
  • #none

Sets the display type of this component. It works similarly to display in CSS, but only supports flex and none.

_end

Accepts a size

When the direction is ltr, end is equivalent to right. When the direction is rtl, end is equivalent to left. This style takes precedence over the left and right styles.

flex

Accepts a float.

In React Native flex does not work the same way that it does in CSS. flex is a number rather than a string, and it works according to the Yoga implementation.

When flex is a positive number, it makes the component flexible and it will be sized proportional to its flex value. So a component with flex set to 2 will take twice the space as a component with flex set to 1.

When flex is 0, the component is sized according to width and height and it is inflexible.

When flex is -1, the component is normally sized according width and height. However, if there's not enough space, the component will shrink to its minWidth and minHeight.

flexBasis

Accepts a margin.

flexDirection

Accepts one of the following values:

  • #row
  • #"row-reverse"
  • #column (default)
  • #"column-reverse"

flexDirection controls which directions children of a container go. row goes left to right, column goes top to bottom, and you may be able to guess what the other two do.

flexGrow

Accepts a float.

flexShrink

Accepts a float.

flexWrap

Accepts one of the following values:

  • #wrap (default)
  • #nowrap

flexWrap controls whether children can wrap around after they hit the end of a flex container.

height

Accepts a size.

sets the height of this component.

justifyContent

Accepts one of the following values:

  • #"flex-start" (default)
  • #"flex-end"
  • #center
  • #"space-around"
  • #"space-between"
  • #"space-evenly"

justifyContent aligns children in the main direction. For example, if children are flowing vertically, justifyContent controls how they align vertically.

left

Accepts a size.

number of logical pixels to offset the left edge of this component.

margin

Accepts a margin.

Setting margin has the same effect as setting each of marginTop, marginLeft, marginBottom, and marginRight.

marginBottom

Accepts a margin.

marginEnd

Accepts a margin.

When direction is ltr, marginEnd is equivalent to marginRight. When direction is rtl, marginEnd is equivalent to marginLeft.

marginHorizontal

Accepts a margin.

Setting marginHorizontal has the same effect as setting both marginLeft and marginRight.

marginLeft

Accepts a margin.

marginRight

Accepts a margin.

marginStart

Accepts a margin.

When direction is ltr, marginStart is equivalent to marginLeft. When direction is rtl, marginStart is equivalent to marginRight.

marginTop

Accepts a margin.

marginVertical

Accepts a margin.

Setting marginVertical has the same effect as setting both marginTop and marginBottom.

maxHeight

Accepts a size.

maximum height for this component, in logical pixels.

maxWidth

Accepts a size.

Maximum width for this component, in logical pixels.

minHeight

Accepts a size.

Minimum height for this component, in logical pixels.

minWidth

Accepts a size.

Minimum width for this component, in logical pixels.

overflow

Accepts one of the following values:

  • #visible (default)
  • #hidden
  • #scroll

overflow controls how children are measured and displayed. #hidden causes views to be clipped while #scroll causes views to be measured independently of their parents main axis.

padding

Accepts a size.

Setting padding has the same effect as setting each of paddingTop, paddingBottom, paddingLeft, and paddingRight.

paddingBottom

Accepts a size.

paddingEnd

Accepts a size.

When direction is ltr, paddingEnd is equivalent to paddingRight. When direction is rtl, paddingEnd is equivalent to paddingLeft.

paddingHorizontal

Accepts a size.

Setting paddingHorizontal is like setting both of paddingLeft and paddingRight.

paddingLeft

Accepts a size.

paddingRight

Accepts a size.

paddingStart

Accepts a size.

When direction is ltr, paddingStart is equivalent to paddingLeft. When direction is rtl, paddingStart is equivalent to paddingRight.

paddingTop

Accepts a size.

paddingVertical

Accepts a size.

Setting paddingVertical is like setting both of paddingTop and paddingBottom.

position

Accepts one of the following values:

  • #absolute
  • #relative (default)

position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always just relative to the parent.

If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have absolute position.

If you want to position a child relative to something that is not its parent, just don't use styles for that. Use the component tree.

Accepts a size.

Number of logical pixels to offset the right edge of this component.

start

Accepts a size.

When the direction is ltr, start is equivalent to left. When the direction is rtl, start is equivalent to right.

This style takes precedence over the left, right, and end styles.

top

Accepts a size.

Number of logical pixels to offset the top edge of this component.

width

Accepts a size.

Sets the width of this component.

zIndex

Accepts an int.

zIndex controls which components display on top of others. Normally, you don't use zIndex. Components render according to their order in the document tree, so later components draw over earlier ones. zIndex may be useful if you have animations or custom modal interfaces where you don't want this behavior.

It works like the CSS z-index property - components with a larger zIndex will render on top. Think of the z-direction like it's pointing from the phone into your eyeball.

Shadow Style Props

Official documentation

Use elevation style props for Android.

shadowColor

Accepts a Color.t (string).

Sets the drop shadow color

Only for

  • iOS

You can see it as CSS box-shadow color

shadowOffset

Accepts an offset.

Sets the drop shadow offset

Only for

  • iOS

You can see it as CSS box-shadow offsets

shadowOpacity

Accepts a float.

Sets the drop shadow opacity (multiplied by the color's alpha component)

Only for

  • iOS

You can see it as CSS box-shadow color alpha value

shadowRadius

Accepts a float.

Sets the drop shadow blur radius

Only for

  • iOS

You can see it as CSS box-shadow blur radius

Transform Style Props

Official documentation

⚠️ We only included transform prop as other have been deprecated.

transform

Accepts an array of transform.

Keep in mind that order or transformation matters.

  • perspective(~perspective=float)
  • rotate(~rotate=angle)
  • rotateX(~rotateX=angle)
  • rotateY(~rotateY=angle)
  • rotateZ(~rotateZ=angle)
  • scale(~scale=float)
  • scaleX(~scaleX=float)
  • scaleY(~scaleY=float)
  • translateX(~translateX=float)
  • translateY(~translateY=float)
  • skewX(~skewX=angle)
  • skewY(~skewY=angle)
Transform Examples
Transform with multiple transform
open Style
style(
~transform=[
perspective(~perspective=1000.),
rotateX(~rotateX=20.->deg),
rotateZ(~rotateZ=0.5->rad),
scale(~scale=0.95),
],
(),
)
Transform with an animated value
open Style
style(
~transform=[
rotateY(
~rotateY={
open Animated.Interpolation
scrollYAnimatedValue->interpolate(
config(
~inputRange=[0., 200.],
~outputRange=["-10deg", "-14deg"]->fromStringArray,
~extrapolateLeft=#clamp,
~extrapolate=#identity,
~extrapolateRight=#extend,
(),
),
)
}->Animated.StyleProp.angle,
),
scale(
~scale={
open Animated.Interpolation
scrollYAnimatedValue->interpolate(
config(
~inputRange=[0., 200.],
~outputRange=[0.8, 0.75]->fromFloatArray,
(),
),
)
}->Animated.StyleProp.float,
),
],
(),
)

If you need something unsupported by this binding, you can use unsafeTransform.

open Style
style(~transform=[unsafeTransform({"translateZ": "0"})], ())

View Style Props

Official documentation

backfaceVisibility

Accepts one of the following values:

backgroundColor

Accepts a Color.t (string).

borderBottomColor

Accepts a Color.t (string).

borderBottomEndRadius

Accepts a float.

When direction is ltr, borderBottomEndRadius is equivalent to borderBottomRightRadius. When direction is rtl, borderBottomEndRadius is equivalent to borderBottomLeftRadius.

borderBottomLeftRadius

Accepts a float.

borderBottomRightRadius

Accepts a float.

borderBottomStartRadius

Accepts a float.

When direction is ltr, borderBottomStartRadius is equivalent to borderBottomLeftRadius. When direction is rtl, borderBottomStartRadius is equivalent to borderBottomRightRadius.

borderBottomWidth

Accepts a float.

borderColor

Accepts a Color.t (string).

borderEndColor

Accepts a Color.t (string).

When direction is ltr, borderEndColor is equivalent to borderRightColor. When direction is rtl, borderEndColor is equivalent to borderLeftColor.

borderEndWidth

Accepts a float.

When direction is ltr, borderEndWidth is equivalent to borderRightWidth. When direction is rtl, borderEndWidth is equivalent to borderLeftWidth.

borderLeftColor

Accepts a Color.t (string).

borderLeftWidth

Accepts a float.

borderRadius

Accepts a float.

Rounds the corners of an element's outer border edge.

borderRightColor

Accepts a Color.t (string).

borderRightWidth

Accepts a float.

borderStartColor

Accepts a Color.t (string).

When direction is ltr, borderStartColor is equivalent to borderLeftColor. When direction is rtl, borderStartColor is equivalent to borderRightColor.

borderStartWidth

Accepts a float.

When direction is ltr, borderStartWidth is equivalent to borderLeftWidth. When direction is rtl, borderStartWidth is equivalent to borderRightWidth.

borderStyle

Accepts one of the following values:

borderTopColor

Accepts a Color.t (string).

borderTopEndRadius

Accepts a float.

When direction is ltr, borderTopEndRadius is equivalent to borderTopRightRadius. When direction is rtl, borderTopEndRadius is equivalent to borderTopLeftRadius.

borderTopLeftRadius

Accepts a float.

borderTopRightRadius

Accepts a float.

borderTopStartRadius

Accepts a float.

When direction is ltr, borderTopStartRadius is equivalent to borderTopLeftRadius. When direction is rtl, borderTopStartRadius is equivalent to borderTopRightRadius.

borderTopWidth

Accepts a float.

borderWidth

Accepts a float.

elevation

Accepts a float.

Sets the elevation of a view, using Android's underlying elevation API. This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions.

Only for

  • Android

Use shadow* style props for iOS.

opacity

Accepts a float.

Text Style Props

color

Accepts a Color.t (string).

fontFamily

Accepts a string.

fontSize

Accepts a float.

fontStyle

Accepts one of the following values:

fontVariant

Accepts an array of FontVariant.t.

fontWeight

Accepts one of the following values:

  • `normal (default)

  • `bold

  • `_100

  • `_200

  • `_300

  • `_400

  • `_500

  • `_600

  • `_700

  • `_800

  • `_900

  • Web reference

includeFontPadding

Accepts a bool.

letterSpacing

Accepts a float.

lineHeight

Accepts a float.

Only accepts logical pixels.

textAlign

Accepts one of the following values:

textAlignVertical

Accepts one of the following values:

  • #auto (default)
  • #top
  • #bottom
  • #center

textDecorationColor

Accepts a Color.t (string).

textDecorationLine

Accepts one of the following values:

  • #none (default)

  • #underline

  • #"line-through"

  • #"underline line-through"

  • Web reference

textDecorationStyle

Accepts one of the following values:

textShadowColor

Accepts a Color.t (string).

You can see it as CSS text-shadow blur radius.

textShadowOffset

Accepts an offset.

You can see it as CSS text-shadow offsets.

textShadowRadius

Accepts a float.

You can see it as CSS text-shadow blur radius.

textTransform

Accepts one of the following values:

writingDirection

Accepts one of the following values:

  • #auto (default)
  • #ltr
  • #rtl

Image Style Props

resizeMode

Accepts one of the following values:

  • #cover
  • #contain
  • #stretch
  • #repeat
  • #center

Similar to CSS background-size values

overlayColor

Accepts a Color.t (string).

tintColor

Accepts a Color.t (string).

Unsafe Style Props

⚠️ Use only as an escape hatch. Don't overuse these functions.

In case you want to use something unsupported by this binding, you can use unsafeAddStyle & unsafeStyle.

For example, if you want to use position: fixed on the web, you can do the following

open Style
unsafeStyle({"position": "fixed", "top": "5em", "left": 0, "right": 0})

If you only want to add some properties to a safe style, you can also do

open Style
style(~left=0.->dp, ~right=0.->dp, ())->unsafeAddStyle({
"position": "fixed",
"top": "5em",
})

Style Helpers

Style.array

Accepts an array of styles as a single style.

<View
style={
open Style
array([styles["thing"], styles["whatever"]])
}
/>


Style.arrayOption

Accepts an array of optional styles as a single style.

<View
style={
open Style
arrayOption([
Some(styles["thing"]),
Some(styles["whatever"]),
optionalStyle,
cond ? Some(style(~prop=value, ())) : None,
])
}
/>