feat: Update documentation regarding W3C Web Styles

facebook · Nov 6, 2022 · 14082fe · 14082fe
1 parent 00c2808
commit 14082fe
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 9 deletions.
diff --git a/docs/image.md b/docs/image.md
@@ -314,6 +314,16 @@ Similarly to `source`, this property represents the resource used to render the
 
 ---
 
+### `objectFit`
+
+Determines how to resize the image when the frame doesn't match the raw image dimensions.
+
+| Type                                                   | Default   |
+| ------------------------------------------------------ | --------- |
+| enum(`'cover'`, `'contain'`, `'fill'`, `'scale-down'`) | `'cover'` |
+
+---
+
 ### `onError`
 
 Invoked on load error.

diff --git a/docs/text-style-props.md b/docs/text-style-props.md
@@ -387,9 +387,9 @@ export default App;
 
 Specifies font weight. The values `'normal'` and `'bold'` are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.
 
-| Type                                                                                                        | Default    |
-| ----------------------------------------------------------------------------------------------------------- | ---------- |
-| enum(`'normal'`, `'bold'`, `'100'`, `'200'`, `'300'`, `'400'`, `'500'`, `'600'`, `'700'`, `'800'`, `'900'`) | `'normal'` |
+| Type                                                                                                                  | Default    |
+| --------------------------------------------------------------------------------------------------------------------- | ---------- |
+| enum(`'normal'`, `'bold'`, `'100'`, `'200'`, `'300'`, `'400'`, `'500'`, `'600'`, `'700'`, `'800'`, `'900'`) or number | `'normal'` |
 
 ---
 

diff --git a/docs/transforms.md b/docs/transforms.md
@@ -270,23 +270,29 @@ export default App;
 
 ### `transform()`
 
-`transform` accepts an array of transformation objects. Each object specifies the property that will be transformed as the key, and the value to use in the transformation. Objects should not be combined. Use a single key/value pair per object.
+`transform` accepts an array of transformation objects or space-separated string values. Each object specifies the property that will be transformed as the key, and the value to use in the transformation. Objects should not be combined. Use a single key/value pair per object.
 
 The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:
 
 ```js
 transform([{ rotateX: '45deg' }, { rotateZ: '0.785398rad' }]);
 ```
 
+The same could also be achieved using a space-separated string:
+
+```js
+transform('rotateX(45deg) rotateZ(0.785398rad)');
+```
+
 The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:
 
 ```js
 transform([{ skewX: '45deg' }]);
 ```
 
-| Type                                                                                                                                                                                                                                                                      | Required |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| array of objects: {matrix: number[]}, {perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string} | No       |
+| Type                                                                                                                                                                                                                                                                                | Required |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| array of objects: {matrix: number[]}, {perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string} or string | No       |
 
 ---
 

diff --git a/docs/view-style-props.md b/docs/view-style-props.md
@@ -274,3 +274,16 @@ Sets the elevation of a view, using Android's underlying [elevation API](https:/
 | Type   |
 | ------ |
 | number |
+
+### `pointerEvents`
+
+Controls whether the `View` can be the target of touch events.
+
+- `'auto'`: The View can be the target of touch events.
+- `'none'`: The View is never the target of touch events.
+- `'box-none'`: The View is never the target of touch events but its subviews can be.
+- `'box-only'`: The view can be the target of touch events but its subviews cannot be.
+
+| Type                                          |
+| --------------------------------------------- |
+| enum('auto', 'box-none', 'box-only', 'none' ) |
diff --git a/docs/view.md b/docs/view.md
@@ -618,8 +618,6 @@ Controls whether the `View` can be the target of touch events.
 }
 ```
 
-> Since `pointerEvents` does not affect layout/appearance, and we are already deviating from the spec by adding additional modes, we opt to not include `pointerEvents` on `style`. On some platforms, we would need to implement it as a `className` anyways. Using `style` or not is an implementation detail of the platform.
-
 | Type                                         |
 | -------------------------------------------- |
 | enum('box-none', 'none', 'box-only', 'auto') |