From 87ba1dfc418a8c6d1778897e9b7c44073ceefae7 Mon Sep 17 00:00:00 2001 From: MoOx Date: Thu, 30 May 2019 16:55:44 +0200 Subject: [PATCH] Style: doc (#514) * Style: doc * Style: doc fixes * Style: doc fix * Style: doc fixes * Style: doc fixes * Style: doc fixes * Update Style.md * Update Style.md * Update Style.md * Update Style.md --- reason-react-native/src/apis/Style.md | 1295 ++++++++++++++++++++++++- 1 file changed, 1294 insertions(+), 1 deletion(-) diff --git a/reason-react-native/src/apis/Style.md b/reason-react-native/src/apis/Style.md index 972921fc6b4033..806625ec799dc6 100644 --- a/reason-react-native/src/apis/Style.md +++ b/reason-react-native/src/apis/Style.md @@ -4,4 +4,1297 @@ title: Style officialDoc: https://facebook.github.io/react-native/docs/style --- -@todo +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`](/bs-react-native/en/docs/apis/StyleSheet/) 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](#style-example) +- [Style Units](#style-units) +- [Style Function](#style-functions) + - [`Style.style`](#style-style) + - [`Style.viewStyle`](#style-viewStyle) + - [`Style.textStyle`](#style-textStyle) + - [`Style.imageStyle`](#style-imageStyle) +- [Style Props](#style-props) + - [Layout Style Props](#layout-style-props) + - [Shadow Style Props](#shadow-style-props) + - [Transform Style Props](#transform-style-props) + - [View Style Props](#view-style-props) + - [Text Style Props](#text-style-props) + - [Image Style Props](#image-style-props) + - [Unsafe Style Props](#unsafe-style-props) +- [Style Helpers](#style-helpers) + - [`Style.array`](#style-array`) + - [`Style.arrayOption`](#style-arrayoption`) + - [`Style.list`](#style-list`) + - [`Style.listOption`](#style-listoption`) + +## Style Example + +Since an example is worth a thousand words... + +```reason +open ReactNative; + +let styles = + Style.( + StyleSheet.create({ + "container": + viewStyle( + ~maxHeight=600.->pt, + ~width=800.->pct, + ~justifyContent=`flexStart, + ~alignItems=`center, + ~margin=auto, + (), + ), + "cornerThing": + viewStyle( + ~position=`absolute, + ~top=100.->pt, + ~right=(-20.)->pt, + ~transform=[|rotate(~rotate=4.->deg)|], + (), + ), + "text": textStyle(~textTransform=`uppercase, ()), + }) + ); + +[@react.component] +let make = (~isSomething) => { + + + + + ; +}; +``` + +## Style Units + +### `size` + +`size` is required in various style props, to be specified as logical pixels +(`pt` function), percentage (`pct` function) & 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->pt` (= `~height=pt(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: + +- [Layout styles](#layout-styles-props) +- [Shadow styles](#shadow-styles-props) +- [Transform styles](#transform-styles-props) +- [View styles](#view-styles-props) +- [Text styles](#text-styles-props) +- [Image styles](#image-styles-props) + +⚠️ _Internally, React Native codebase types for this function are called +`____DangerouslyImpreciseStyle_Internal`. That's why we created new functions: +[`viewStyle`](#style-viewstyle), [`textStyle`](#style-textstyle) & +[`imageStyle`](#style-imagestyle)_. + +### `Style.viewStyle` + +This function accepts all React Native styles below: + +- [Layout styles](#layout-styles-props) +- [Shadow styles](#shadow-styles-props) +- [Transform styles](#transform-styles-props) +- [View styles](#view-styles-props) + +### `Style.textStyle` + +This function accepts all React Native styles below: + +- [Layout styles](#layout-styles-props) +- [Shadow styles](#shadow-styles-props) +- [Transform styles](#transform-styles-props) +- [Text styles](#text-styles-props) + +### `Style.imageStyle` + +This function accepts all React Native styles below: + +- [Layout styles](#layout-styles-props) +- [Shadow styles](#shad@ow-styles-props) +- [Transform styles](#transform-styles-props) +- [Image styles](#image-styles-props) + +## Style Props + +### Layout Style Props + +[Official documentation](https://facebook.github.io/react-native/docs/layout-props) + +#### `alignContent` + +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. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) +- [Yoga reference](https://yogalayout.com/docs/align-content/) + +#### `alignItems` + +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. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) +- [Yoga reference](https://yogalayout.com/docs/align-items/) + +#### `alignSelf` + +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. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) +- [Yoga reference](https://yogalayout.com/docs/align-items/) + +#### `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 + +* [Yoga reference](https://yogalayout.com/docs/aspect-ratio/) + +#### `bottom` + +Accepts a `size`. + +Number of logical pixels to offset the bottom edge of this component. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) +- [Yoga reference](https://yogalayout.com/docs/absolute-relative-layout) + +#### `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. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) +- [Yoga reference](https://yogalayout.com/docs/layout-direction) + +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`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/display) + +#### `_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. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/end) +- [Yoga reference](https://yogalayout.com/docs/layout-direction) + +#### `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`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) +- [Yoga reference](https://yogalayout.com/docs/flex) + +#### `flexBasis` + +Accepts a `margin`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis) +- [Yoga reference](https://yogalayout.com/docs/flex) + +#### `flexDirection` + +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. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) +- [Yoga reference](https://yogalayout.com/docs/flex-direction) + +#### `flexGrow` + +Accepts a `float`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) +- [Yoga reference](https://yogalayout.com/docs/flex) + +#### `flexShrink` + +Accepts a `float`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink) +- [Yoga reference](https://yogalayout.com/docs/flex) + +#### `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. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) +- [Yoga reference](https://yogalayout.com/docs/flex-wrap) + +#### `height` + +Accepts a `size`. + +sets the height of this component. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) +- [Yoga reference](https://yogalayout.com/docs/width-height) + +#### `justifyContent` + +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. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) +- [Yoga reference](https://yogalayout.com/docs/justify-content) + +#### `left` + +Accepts a `size`. + +number of logical pixels to offset the left edge of this component. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) +- [Yoga reference](https://yogalayout.com/docs/absolute-relative-layout) + +#### `margin` + +Accepts a `margin`. + +Setting `margin` has the same effect as setting each of `marginTop`, +`marginLeft`, `marginBottom`, and `marginRight`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) +- [Yoga reference](https://yogalayout.com/docs/margins-paddings-borders) + +#### `marginBottom` + +Accepts a `margin`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) +- [Yoga reference](https://yogalayout.com/docs/margins-paddings-borders) + +#### `marginEnd` + +Accepts a `margin`. + +When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. When +direction is `rtl`, `marginEnd` is equivalent to `marginLeft`. + +- [Yoga reference](https://yogalayout.com/docs/margins-paddings-borders) + +#### `marginHorizontal` + +Accepts a `margin`. + +Setting `marginHorizontal` has the same effect as setting both `marginLeft` and +`marginRight`. + +- [Yoga reference](https://yogalayout.com/docs/margins-paddings-borders) + +#### `marginLeft` + +Accepts a `margin`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) +- [Yoga reference](https://yogalayout.com/docs/margins-paddings-borders) + +#### `marginRight` + +Accepts a `margin`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) +- [Yoga reference](https://yogalayout.com/docs/margins-paddings-borders) + +#### `marginStart` + +Accepts a `margin`. + +When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When +direction is `rtl`, `marginStart` is equivalent to `marginRight`. + +- [Yoga reference](https://yogalayout.com/docs/margins-paddings-borders) + +#### `marginTop` + +Accepts a `margin`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) +- [Yoga reference](https://yogalayout.com/docs/margins-paddings-borders) + +#### `marginVertical` + +Accepts a `margin`. + +Setting `marginVertical` has the same effect as setting both `marginTop` and +`marginBottom`. + +- [Yoga reference](https://yogalayout.com/docs/margins-paddings-borders) + +#### `maxHeight` + +Accepts a `size`. + +maximum height for this component, in logical pixels. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) +- [Yoga reference](https://yogalayout.com/docs/min-max) + +#### `maxWidth` + +Accepts a `size`. + +Maximum width for this component, in logical pixels. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) +- [Yoga reference](https://yogalayout.com/docs/min-max) + +#### `minHeight` + +Accepts a `size`. + +Minimum height for this component, in logical pixels. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) +- [Yoga reference](https://yogalayout.com/docs/min-max) + +#### `minWidth` + +Accepts a `size`. + +Minimum width for this component, in logical pixels. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) +- [Yoga reference](https://yogalayout.com/docs/min-max) + +#### `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. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) + +#### `padding` + +Accepts a `size`. + +Setting `padding` has the same effect as setting each of `paddingTop`, +`paddingBottom`, `paddingLeft`, and `paddingRight`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) +- [Yoga reference](https://yogalayout.com/docs/margins-paddings-borders) + +#### `paddingBottom` + +Accepts a `size`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) +- [Yoga reference](https://yogalayout.com/docs/margins-paddings-borders) + +#### `paddingEnd` + +Accepts a `size`. + +When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. When +direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`. + +- [Yoga reference](https://yogalayout.com/docs/margins-paddings-borders) + +#### `paddingHorizontal` + +Accepts a `size`. + +Setting `paddingHorizontal` is like setting both of `paddingLeft` and +`paddingRight`. + +- [Yoga reference](https://yogalayout.com/docs/margins-paddings-borders) + +#### `paddingLeft` + +Accepts a `size`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) +- [Yoga reference](https://yogalayout.com/docs/margins-paddings-borders) + +#### `paddingRight` + +Accepts a `size`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) +- [Yoga reference](https://yogalayout.com/docs/margins-paddings-borders) + +#### `paddingStart` + +Accepts a `size`. + +When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When +direction is `rtl`, `paddingStart` is equivalent to `paddingRight`. + +- [Yoga reference](https://yogalayout.com/docs/margins-paddings-borders) + +#### `paddingTop` + +Accepts a `size`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) +- [Yoga reference](https://yogalayout.com/docs/margins-paddings-borders) + +#### `paddingVertical` + +Accepts a `size`. + +Setting `paddingVertical` is like setting both of `paddingTop` and +`paddingBottom`. + +- [Yoga reference](https://yogalayout.com/docs/margins-paddings-borders) + +#### `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. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/position) +- [Yoga reference](https://yogalayout.com/docs/absolute-relative-layout) + +#### `right` + +Accepts a `size`. + +Number of logical pixels to offset the right edge of this component. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) +- [Yoga reference](https://yogalayout.com/docs/absolute-relative-layout) + +#### `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. + +- [Yoga reference](https://yogalayout.com/docs/absolute-relative-layout) + +#### `top` + +Accepts a `size`. + +Number of logical pixels to offset the top edge of this component. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) +- [Yoga reference](https://yogalayout.com/docs/absolute-relative-layout) + +#### `width` + +Accepts a `size`. + +Sets the width of this component. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/width) +- [Yoga reference](https://yogalayout.com/docs/width-height) + +#### `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. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) + +### Shadow Style Props + +[Official documentation](https://facebook.github.io/react-native/docs/shadow-props) + +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 + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) + +#### `shadowOffset` + +Accepts an `offset`. + +Sets the drop shadow offset + +Only for + +- iOS + +You can see it as CSS `box-shadow` offsets + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) + +#### `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 + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) + +#### `shadowRadius` + +Accepts a `float`. + +Sets the drop shadow blur radius + +Only for + +- iOS + +You can see it as CSS `box-shadow` blur radius + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) + +### Transform Style Props + +[Official documentation](https://facebook.github.io/react-native/docs/transforms) + +⚠️ _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 + +```reason +Style.(style( + ~transform=[| + perspective(~perspective=1000.), + rotateX(~rotateX=20.->deg), + rotateZ(~rotateZ=0.5->rad), + scale(~scale=0.95), + |], + () +)) +``` + +###### Transform with an animated value + +```reason +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`. + +```reason +Style.(style( + ~transform=[| + unsafeTransform({"translateZ": "0"}), + |], + (), +)) +``` + +### View Style Props + +[Official documentation](https://facebook.github.io/react-native/docs/view-style-props) + +#### `backfaceVisibility` + +Accepts one of the following values: + +- `` `visible `` +- `` `hidden `` + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility) + +#### `backgroundColor` + +Accepts a `Color.t` (`string`). + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) + +#### `borderBottomColor` + +Accepts a `Color.t` (`string`). + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color) + +#### `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`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius) + +#### `borderBottomRightRadius` + +Accepts a `float`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius) + +#### `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`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) + +#### `borderColor` + +Accepts a `Color.t` (`string`). + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) + +#### `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`). + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color) + +#### `borderLeftWidth` + +Accepts a `float`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) + +#### `borderRadius` + +Accepts a `float`. + +Rounds the corners of an element's outer border edge. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) + +#### `borderRightColor` + +Accepts a `Color.t` (`string`). + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color) + +#### `borderRightWidth` + +Accepts a `float`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) + +#### `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: + +- `` `solid `` (default) +- `` `dotted `` + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style) + +#### `borderTopColor` + +Accepts a `Color.t` (`string`). + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color) + +#### `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`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius) + +#### `borderTopRightRadius` + +Accepts a `float`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius) + +#### `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`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) + +#### `borderWidth` + +Accepts a `float`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) + +#### `elevation` + +Accepts a `float`. + +Sets the elevation of a view, using Android's underlying +[elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). +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`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) + +### Text Style Props + +#### `color` + +Accepts a `Color.t` (`string`). + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/color) + +#### `fontFamily` + +Accepts a `string`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) + +#### `fontSize` + +Accepts a `float`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) + +#### `fontStyle` + +Accepts one of the following values: + +- `` `normal `` (default) +- `` `italic `` + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) + +#### `fontVariant` + +Accepts an array of `FontVariant.t`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant) + +#### `fontWeight` + +Accepts one of the following values: + +- `` `normal `` (default) +- `` `bold `` +- `` `_100 `` +- `` `_200 `` +- `` `_300 `` +- `` `_400 `` +- `` `_500 `` +- `` `_600 `` +- `` `_700 `` +- `` `_800 `` +- `` `_900 `` + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) + +#### `includeFontPadding` + +Accepts a `bool`. + +#### `letterSpacing` + +Accepts a `float`. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) + +#### `lineHeight` + +Accepts a `float`. + +Only accepts logical pixels. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) + +#### `textAlign` + +Accepts one of the following values: + +- `` `auto `` (default) +- `` `left `` +- `` `right `` +- `` `center `` +- `` `justify `` + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) + +#### `textAlignVertical` + +Accepts one of the following values: + +- `` `auto `` (default) +- `` `top `` +- `` `bottom `` +- `` `center `` + +#### `textDecorationColor` + +Accepts a `Color.t` (`string`). + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color) + +#### `textDecorationLine` + +Accepts one of the following values: + +- `` `none `` (default) +- `` `underline `` +- `` `lineThrough `` +- `` `underlineLineThrough `` + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line) + +#### `textDecorationStyle` + +Accepts one of the following values: + +- `` `solid `` +- `` `double `` +- `` `dotted `` +- `` `dashed `` + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style) + +#### `textShadowColor` + +Accepts a `Color.t` (`string`). + +You can see it as CSS `text-shadow` blur radius. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow) + +#### `textShadowOffset` + +Accepts an `offset`. + +You can see it as CSS `text-shadow` offsets. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow) + +#### `textShadowRadius` + +Accepts a `float`. + +You can see it as CSS `text-shadow` blur radius. + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow) + +#### `textTransform` + +Accepts one of the following values: + +- `` `none `` (default) +- `` `uppercase `` +- `` `lowercase `` +- `` `capitalize `` + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) + +#### `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 + +- [Web reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) + +#### `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 + +```reason +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 + +```reason +Style.( + style( + ~left=0.->pt, + ~right=0.->pt, + () + ) + ->unsafeAddStyle({"position": "fixed", "top": "5em"}) +) +``` + +--- + +## Style Helpers + +### `Style.array` + +Accepts an array of styles as a single style. + +```reason + +``` + +### `Style.arrayOption` + +Accepts an array of optional styles as a single style. + +```reason + +``` + +### `Style.list` + +Accepts a list of styles as a single style. + +```reason + +``` + +### `Style.listOption` + +Accepts a list of optional styles as a single style. + +```reason + +```