Style
Official documentation 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).
Since an example is worth a thousand words...
open ReactNative;
let styles =
Style.(
StyleSheet.create({
"container":
viewStyle(
~maxHeight=600.->dp,
~width=80.->pct,
~justifyContent=`flexStart,
~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=Style.(
arrayOption([|
Some(styles##text),
isSomething ? Some(style(~opacity=0.05, ())) : None,
|])
)
/>
</View>
</View>;
};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 is used for shadowOffset & textShadowOffset.
Eg: ~shadowOffset=offset(~height=2., ~width=4.)
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)
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.
This function accepts all React Native styles below:
This function accepts all React Native styles below:
This function accepts all React Native styles below:
Accepts one of the following values:
`flexStart (default)
`flexEnd
`center
`stretch
`spaceAround
`spaceBetween
Controls how rows align in the cross direction, overriding the alignContent of the parent.
Accepts one of the following values:
`flexStart
`flexEnd
`center
`stretch (default)
`baseline
Aligns children in the cross direction. For example, if children are flowing vertically, alignItems controls how they align horizontally.
Accepts one of the following values:
`auto (default)
`flexStart
`flexEnd
`center
`stretch
`baseline
Controls how a child aligns in the cross direction, overriding the alignItems of the parent.
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
Accepts a size.
Number of logical pixels to offset the bottom edge of this component.
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
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.
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.
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.
Accepts a margin.
Accepts one of the following values:
`row
`rowReverse
`column (default)
`columnReverse
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.
Accepts a float.
Accepts a float.
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.
Accepts a size.
sets the height of this component.
Accepts one of the following values:
`flexStart (default)
`flexEnd
`center
`spaceAround
`spaceBetween
`spaceEvenly
justifyContent aligns children in the main direction. For example, if children are flowing vertically, justifyContent controls how they align vertically.
Accepts a size.
number of logical pixels to offset the left edge of this component.
Accepts a margin.
Setting margin has the same effect as setting each of marginTop, marginLeft, marginBottom, and marginRight.
Accepts a margin.
Accepts a margin.
When direction is ltr, marginEnd is equivalent to marginRight. When direction is rtl, marginEnd is equivalent to marginLeft.
Accepts a margin.
Setting marginHorizontal has the same effect as setting both marginLeft and marginRight.
Accepts a margin.
Accepts a margin.
Accepts a margin.
When direction is ltr, marginStart is equivalent to marginLeft. When direction is rtl, marginStart is equivalent to marginRight.
Accepts a margin.
Accepts a margin.
Setting marginVertical has the same effect as setting both marginTop and marginBottom.
Accepts a size.
maximum height for this component, in logical pixels.
Accepts a size.
Maximum width for this component, in logical pixels.
Accepts a size.
Minimum height for this component, in logical pixels.
Accepts a size.
Minimum width for this component, in logical pixels.
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.
Accepts a size.
Setting padding has the same effect as setting each of paddingTop, paddingBottom, paddingLeft, and paddingRight.
Accepts a size.
Accepts a size.
When direction is ltr, paddingEnd is equivalent to paddingRight. When direction is rtl, paddingEnd is equivalent to paddingLeft.
Accepts a size.
Setting paddingHorizontal is like setting both of paddingLeft and paddingRight.
Accepts a size.
Accepts a size.
Accepts a size.
When direction is ltr, paddingStart is equivalent to paddingLeft. When direction is rtl, paddingStart is equivalent to paddingRight.
Accepts a size.
Accepts a size.
Setting paddingVertical is like setting both of paddingTop and paddingBottom.
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.
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.
Accepts a size.
Number of logical pixels to offset the top edge of this component.
Accepts a size.
Sets the width of this component.
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.
Use elevation style props for Android.
Accepts a Color.t (string).
Sets the drop shadow color
Only for
iOS
You can see it as CSS box-shadow color
Accepts an offset.
Sets the drop shadow offset
Only for
iOS
You can see it as CSS box-shadow offsets
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
Accepts a float.
Sets the drop shadow blur radius
Only for
iOS
You can see it as CSS box-shadow blur radius
⚠️ We only included transform prop as other have been deprecated.
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)
Style.(style(
~transform=[|
perspective(~perspective=1000.),
rotateX(~rotateX=20.->deg),
rotateZ(~rotateZ=0.5->rad),
scale(~scale=0.95),
|],
()
))Style.(style(
~transform=[|
rotateY(
~rotateY=
Animated.Interpolation.(
scrollYAnimatedValue->interpolate(
config(
~inputRange=[|0., 200.|],
~outputRange=
[|"-10deg", "-14deg"|]->fromStringArray,
~extrapolateLeft=`clamp,
~extrapolate=`identity,
~extrapolateRight=`extend,
(),
),
)
)
->Animated.StyleProp.angle,
),
scale(
~scale=
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.
Style.(style(
~transform=[|
unsafeTransform({"translateZ": "0"}),
|],
(),
))Accepts one of the following values:
Accepts a Color.t (string).
Accepts a Color.t (string).
Accepts a float.
When direction is ltr, borderBottomEndRadius is equivalent to borderBottomRightRadius. When direction is rtl, borderBottomEndRadius is equivalent to borderBottomLeftRadius.
Accepts a float.
Accepts a float.
Accepts a float.
When direction is ltr, borderBottomStartRadius is equivalent to borderBottomLeftRadius. When direction is rtl, borderBottomStartRadius is equivalent to borderBottomRightRadius.
Accepts a float.
Accepts a Color.t (string).
Accepts a Color.t (string).
When direction is ltr, borderEndColor is equivalent to borderRightColor. When direction is rtl, borderEndColor is equivalent to borderLeftColor.
Accepts a float.
When direction is ltr, borderEndWidth is equivalent to borderRightWidth. When direction is rtl, borderEndWidth is equivalent to borderLeftWidth.
Accepts a Color.t (string).
Accepts a float.
Accepts a float.
Rounds the corners of an element's outer border edge.
Accepts a Color.t (string).
Accepts a float.
Accepts a Color.t (string).
When direction is ltr, borderStartColor is equivalent to borderLeftColor. When direction is rtl, borderStartColor is equivalent to borderRightColor.
Accepts a float.
When direction is ltr, borderStartWidth is equivalent to borderLeftWidth. When direction is rtl, borderStartWidth is equivalent to borderRightWidth.
Accepts one of the following values:
Accepts a Color.t (string).
Accepts a float.
When direction is ltr, borderTopEndRadius is equivalent to borderTopRightRadius. When direction is rtl, borderTopEndRadius is equivalent to borderTopLeftRadius.
Accepts a float.
Accepts a float.
Accepts a float.
When direction is ltr, borderTopStartRadius is equivalent to borderTopLeftRadius. When direction is rtl, borderTopStartRadius is equivalent to borderTopRightRadius.
Accepts a float.
Accepts a float.
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.
Accepts a float.
Accepts a Color.t (string).
Accepts a string.
Accepts a float.
Accepts one of the following values:
Accepts an array of FontVariant.t.
Accepts one of the following values:
Accepts a bool.
Accepts a float.
Accepts a float.
Only accepts logical pixels.
Accepts one of the following values:
Accepts one of the following values:
`auto (default)
`top
`bottom
`center
Accepts a Color.t (string).
Accepts one of the following values:
Accepts one of the following values:
Accepts a Color.t (string).
You can see it as CSS text-shadow blur radius.
Accepts an offset.
You can see it as CSS text-shadow offsets.
Accepts a float.
You can see it as CSS text-shadow blur radius.
Accepts one of the following values:
Accepts one of the following values:
`auto (default)
`ltr
`rtl
Accepts one of the following values:
`cover
`contain
`stretch
`repeat
`center
Similar to CSS background-size values
Accepts a Color.t (string).
Accepts a Color.t (string).
⚠️ 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
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
Style.(
style(
~left=0.->dp,
~right=0.->dp,
()
)
->unsafeAddStyle({"position": "fixed", "top": "5em"})
)Accepts an array of styles as a single style.
<View style=Style.(array([|
styles##thing,
styles##whatever,
|]))>Accepts an array of optional styles as a single style.
<View style=Style.(arrayOption([|
Some(styles##thing),
Some(styles##whatever),
optionalStyle,
cond ? Some(style(~prop=value, ()) : None
|]))>Accepts a list of styles as a single style.
<View style=Style.(list([
styles##thing,
styles##whatever,
]))>Accepts a list of optional styles as a single style.
<View style=Style.(listOption([
Some(styles##thing),
Some(styles##whatever),
optionalStyle,
cond ? Some(style(~prop=value, ()) : None
]))>