From 1c5c0103bf6ffe11f312727e731ac37fba7ce823 Mon Sep 17 00:00:00 2001 From: DaniAkash Date: Sun, 9 Feb 2020 07:27:24 +0530 Subject: [PATCH 1/3] transforms - added snack examples --- docs/transforms.md | 223 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 223 insertions(+) diff --git a/docs/transforms.md b/docs/transforms.md index f03cf368cd7..0743fb8100e 100644 --- a/docs/transforms.md +++ b/docs/transforms.md @@ -3,6 +3,229 @@ id: transforms title: Transforms --- +Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components. You can apply margin to the transformed component or the nearby components to prevent such overlaps. The following example increases the margin of the transformed component whenever it overlaps with the nearby components after a transform. + +## Example + +
+ +
+ + + +```SnackPlayer name=Transforms +import React from "react"; +import { SafeAreaView, Text, View, ScrollView, StyleSheet } from "react-native"; + +export default function App() { + return ( + + + Original Object + + Scale by 2 + + ScaleX by 2 + + ScaleY by 2 + + Rotate by 45 deg + + Rotate X&Z by 45 deg + + Rotate Y&Z by 45 deg + + SkewX by 45 deg + + SkewY by 45 deg + + Skew X&Y by 30 deg + + TranslateX by -100 + + TranslateY by 100 + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1 + }, + scrollContentContainer: { + alignItems: "center" + }, + box: { + height: 100, + width: 100, + borderRadius: 5, + margin: 8, + backgroundColor: "blue" + }, + infoText: { + fontSize: 14, + fontWeight: "bold", + margin: 8 + }, + scale: { + marginVertical: 56, + transform: [{ scale: 2 }] + }, + scaleX: { + transform: [{ scaleX: 2 }] + }, + scaleY: { + marginVertical: 56, + transform: [{ scaleY: 2 }] + }, + rotate: { + marginVertical: 24, + transform: [{ rotate: "45deg" }] + }, + rotateX: { + transform: [{ rotateX: "45deg" }, { rotateZ: "45deg" }] + }, + rotateY: { + marginVertical: 24, + transform: [{ rotateY: "45deg" }, { rotateZ: "45deg" }] + }, + skewX: { + transform: [{ skewX: "45deg" }] + }, + skewY: { + marginVertical: 56, + transform: [{ skewY: "45deg" }] + }, + skewXY: { + marginVertical: 56, + transform: [{ skewX: "30deg" }, { skewY: "30deg" }] + }, + translateX: { + transform: [{ translateX: -100 }] + }, + translateY: { + marginBottom: 108, + transform: [{ translateY: 100 }] + } +}); +``` + + + +```SnackPlayer name=Transforms +import React, { Component } from "react"; +import { SafeAreaView, Text, View, ScrollView, StyleSheet } from "react-native"; + +export default class App extends Component { + render() { + return ( + + + Original Object + + Scale by 2 + + ScaleX by 2 + + ScaleY by 2 + + Rotate by 45 deg + + Rotate X&Z by 45 deg + + Rotate Y&Z by 45 deg + + SkewX by 45 deg + + SkewY by 45 deg + + Skew X&Y by 30 deg + + TranslateX by -100 + + TranslateY by 100 + + + + ); + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1 + }, + scrollContentContainer: { + alignItems: "center" + }, + box: { + height: 100, + width: 100, + borderRadius: 5, + margin: 8, + backgroundColor: "blue" + }, + infoText: { + fontSize: 14, + fontWeight: "bold", + margin: 8 + }, + scale: { + marginVertical: 56, + transform: [{ scale: 2 }] + }, + scaleX: { + transform: [{ scaleX: 2 }] + }, + scaleY: { + marginVertical: 56, + transform: [{ scaleY: 2 }] + }, + rotate: { + marginVertical: 24, + transform: [{ rotate: "45deg" }] + }, + rotateX: { + transform: [{ rotateX: "45deg" }, { rotateZ: "45deg" }] + }, + rotateY: { + marginVertical: 24, + transform: [{ rotateY: "45deg" }, { rotateZ: "45deg" }] + }, + skewX: { + transform: [{ skewX: "45deg" }] + }, + skewY: { + marginVertical: 56, + transform: [{ skewY: "45deg" }] + }, + skewXY: { + marginVertical: 56, + transform: [{ skewX: "30deg" }, { skewY: "30deg" }] + }, + translateX: { + transform: [{ translateX: -100 }] + }, + translateY: { + marginBottom: 108, + transform: [{ translateY: 100 }] + } +}); +``` + + + +--- + # Reference ## Methods From dae9baafbb8be9169d41c197dbfa9926a94b3640 Mon Sep 17 00:00:00 2001 From: DaniAkash Date: Fri, 28 Feb 2020 06:35:36 +0530 Subject: [PATCH 2/3] used inline styles for transforms --- docs/transforms.md | 406 ++++++++++++++++++++++++++++++--------------- 1 file changed, 274 insertions(+), 132 deletions(-) diff --git a/docs/transforms.md b/docs/transforms.md index 0743fb8100e..cfce0fb8a7f 100644 --- a/docs/transforms.md +++ b/docs/transforms.md @@ -28,30 +28,137 @@ export default function App() { return ( - Original Object - - Scale by 2 - - ScaleX by 2 - - ScaleY by 2 - - Rotate by 45 deg - - Rotate X&Z by 45 deg - - Rotate Y&Z by 45 deg - - SkewX by 45 deg - - SkewY by 45 deg - - Skew X&Y by 30 deg - - TranslateX by -100 - - TranslateY by 100 - + + Original Object + + + + Scale by 2 + + + + ScaleX by 2 + + + + ScaleY by 2 + + + + Rotate by 45 deg + + + + Rotate X&Z by 45 deg + + + + Rotate Y&Z by 45 deg + + + + SkewX by 45 deg + + + + SkewY by 45 deg + + + + Skew X&Y by 30 deg + + + + TranslateX by -100 + + + + TranslateY by 100 + ); @@ -69,52 +176,16 @@ const styles = StyleSheet.create({ width: 100, borderRadius: 5, margin: 8, - backgroundColor: "blue" + backgroundColor: "blue", + alignItems: "center", + justifyContent: "center" }, infoText: { fontSize: 14, fontWeight: "bold", - margin: 8 - }, - scale: { - marginVertical: 56, - transform: [{ scale: 2 }] - }, - scaleX: { - transform: [{ scaleX: 2 }] - }, - scaleY: { - marginVertical: 56, - transform: [{ scaleY: 2 }] - }, - rotate: { - marginVertical: 24, - transform: [{ rotate: "45deg" }] - }, - rotateX: { - transform: [{ rotateX: "45deg" }, { rotateZ: "45deg" }] - }, - rotateY: { - marginVertical: 24, - transform: [{ rotateY: "45deg" }, { rotateZ: "45deg" }] - }, - skewX: { - transform: [{ skewX: "45deg" }] - }, - skewY: { - marginVertical: 56, - transform: [{ skewY: "45deg" }] - }, - skewXY: { - marginVertical: 56, - transform: [{ skewX: "30deg" }, { skewY: "30deg" }] - }, - translateX: { - transform: [{ translateX: -100 }] - }, - translateY: { - marginBottom: 108, - transform: [{ translateY: 100 }] + margin: 8, + color: "white", + textAlign: "center" } }); ``` @@ -130,30 +201,137 @@ export default class App extends Component { return ( - Original Object - - Scale by 2 - - ScaleX by 2 - - ScaleY by 2 - - Rotate by 45 deg - - Rotate X&Z by 45 deg - - Rotate Y&Z by 45 deg - - SkewX by 45 deg - - SkewY by 45 deg - - Skew X&Y by 30 deg - - TranslateX by -100 - - TranslateY by 100 - + + Original Object + + + + Scale by 2 + + + + ScaleX by 2 + + + + ScaleY by 2 + + + + Rotate by 45 deg + + + + Rotate X&Z by 45 deg + + + + Rotate Y&Z by 45 deg + + + + SkewX by 45 deg + + + + SkewY by 45 deg + + + + Skew X&Y by 30 deg + + + + TranslateX by -100 + + + + TranslateY by 100 + ); @@ -172,52 +350,16 @@ const styles = StyleSheet.create({ width: 100, borderRadius: 5, margin: 8, - backgroundColor: "blue" + backgroundColor: "blue", + alignItems: "center", + justifyContent: "center" }, infoText: { fontSize: 14, fontWeight: "bold", - margin: 8 - }, - scale: { - marginVertical: 56, - transform: [{ scale: 2 }] - }, - scaleX: { - transform: [{ scaleX: 2 }] - }, - scaleY: { - marginVertical: 56, - transform: [{ scaleY: 2 }] - }, - rotate: { - marginVertical: 24, - transform: [{ rotate: "45deg" }] - }, - rotateX: { - transform: [{ rotateX: "45deg" }, { rotateZ: "45deg" }] - }, - rotateY: { - marginVertical: 24, - transform: [{ rotateY: "45deg" }, { rotateZ: "45deg" }] - }, - skewX: { - transform: [{ skewX: "45deg" }] - }, - skewY: { - marginVertical: 56, - transform: [{ skewY: "45deg" }] - }, - skewXY: { - marginVertical: 56, - transform: [{ skewX: "30deg" }, { skewY: "30deg" }] - }, - translateX: { - transform: [{ translateX: -100 }] - }, - translateY: { - marginBottom: 108, - transform: [{ translateY: 100 }] + margin: 8, + color: "white", + textAlign: "center" } }); ``` From c715ebee031f933c218b6ad5b60f6cd61163879d Mon Sep 17 00:00:00 2001 From: R Nabors Date: Fri, 28 Feb 2020 14:34:34 +0000 Subject: [PATCH 3/3] Move deprecated methods to their own area lower page --- docs/transforms.md | 54 ++-------------------------------------------- 1 file changed, 2 insertions(+), 52 deletions(-) diff --git a/docs/transforms.md b/docs/transforms.md index cfce0fb8a7f..c10be897413 100644 --- a/docs/transforms.md +++ b/docs/transforms.md @@ -372,40 +372,6 @@ const styles = StyleSheet.create({ ## Methods -### `decomposedMatrix` - -> **Deprecated.** Use the [`transform`](transforms.md#transform) prop instead. - -| Type | Required | -| ------------------------ | -------- | -| DecomposedMatrixPropType | No | - ---- - -### `rotation` - -| Type | Required | -| ---------------------------------------------------------------------------- | -------- | -| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | - ---- - -### `scaleX` - -| Type | Required | -| ---------------------------------------------------------------------------- | -------- | -| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | - ---- - -### `scaleY` - -| Type | Required | -| ---------------------------------------------------------------------------- | -------- | -| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | - ---- - ### `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. @@ -424,25 +390,9 @@ The skew transformations require a string so that the transform may be expressed --- -### `transformMatrix` - -> **Deprecated.** Use the [`transform`](transforms.md#transform) prop instead. - -| Type | Required | -| ----------------------- | -------- | -| TransformMatrixPropType | No | - ---- - -### `translateX` - -| Type | Required | -| ---------------------------------------------------------------------------- | -------- | -| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | - ---- +### `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY` -### `translateY` +> **Deprecated.** Use the [`transform`](transforms#transform) prop instead. | Type | Required | | ---------------------------------------------------------------------------- | -------- |