mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Deploy website
Deploy website version based on 8e426dc01fce4bdc442f3e38debcf2b7663084c5
This commit is contained in:
Website Deployment Script committed
1 parent
e59cbb88b0
commit
293aae76b5
4 files changed
+1160
-552
No files matched your search
+423
-11
@@ -69,7 +69,7 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/layoutanimation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">LayoutAnimation</h1></header><article><div><span><p>Automatically animates views to their new positions when the next layout happens.</p>
|
||||
<p>A common way to use this API is to call it before calling <code>setState</code>.</p>
|
||||
<p>A common way to use this API is to call it before updating the state hook in functional components and calling <code>setState</code> in class components.</p>
|
||||
<p>Note that in order to get this to work on <strong>Android</strong> you need to set the following flags via <code>UIManager</code>:</p>
|
||||
<pre><code class="hljs css language-js"><span class="token keyword">if</span> <span class="token punctuation">(</span>Platform<span class="token punctuation">.</span><span class="token constant">OS</span> <span class="token operator">===</span> <span class="token string">'android'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>UIManager<span class="token punctuation">.</span>setLayoutAnimationEnabledExperimental<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -130,7 +130,7 @@
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20useState%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20LayoutAnimation%2C%20Platform%2C%20StyleSheet%2C%20Text%2C%20TouchableOpacity%2C%20UIManager%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aif%20(%0A%20%20Platform.OS%20%3D%3D%3D%20%22android%22%20%26%26%0A%20%20UIManager.setLayoutAnimationEnabledExperimental%0A)%20%7B%0A%20%20UIManager.setLayoutAnimationEnabledExperimental(true)%3B%0A%7D%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20%5Bexpanded%2C%20setExpanded%5D%20%3D%20useState(false)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyle.container%7D%3E%0A%20%20%20%20%20%20%3CTouchableOpacity%0A%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20LayoutAnimation.configureNext(LayoutAnimation.Presets.spring)%3B%0A%20%20%20%20%20%20%20%20%20%20setExpanded(!expanded)%3B%0A%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%3CText%3EPress%20me%20to%20%7Bexpanded%20%3F%20%22collapse%22%20%3A%20%22expand%22%7D!%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20%20%20%20%20%7Bexpanded%20%26%26%20(%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyle.tile%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%3EI%20disappear%20sometimes!%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20)%7D%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aconst%20style%20%3D%20StyleSheet.create(%7B%0A%20%20tile%3A%20%7B%0A%20%20%20%20background%3A%20%22lightGrey%22%2C%0A%20%20%20%20borderWidth%3A%200.5%2C%0A%20%20%20%20borderColor%3A%20%22%23d6d7da%22%0A%20%20%7D%2C%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%2C%0A%20%20%20%20alignItems%3A%20%22center%22%2C%0A%20%20%20%20overflow%3A%20%22hidden%22%0A%20%20%7D%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-supported-platforms=android,ios
|
||||
data-snack-preview="true"
|
||||
style="
|
||||
overflow: hidden;
|
||||
@@ -140,7 +140,8 @@
|
||||
height: 514px;
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><hr>
|
||||
></div></div></div><p><block class="endBlock syntax" /></p>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="configurenext"></a><a href="#configurenext" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>configureNext()</code></h3>
|
||||
@@ -179,14 +180,188 @@
|
||||
</code></pre>
|
||||
<p>Helper that creates an object (with <code>create</code>, <code>update</code>, and <code>delete</code> fields) to pass into <a href="/docs/next/layoutanimation#configurenext"><code>configureNext</code></a>. The <code>type</code> parameter is an <a href="/docs/next/layoutanimation#types">animation type</a>, and the <code>creationProp</code> parameter is a <a href="/docs/next/layoutanimation#properties">layout property</a>.</p>
|
||||
<p>Example usage:</p>
|
||||
<pre><code class="hljs css language-js">LayoutAnimation<span class="token punctuation">.</span><span class="token function">configureNext</span><span class="token punctuation">(</span>
|
||||
LayoutAnimation<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>
|
||||
<span class="token number">500</span><span class="token punctuation">,</span>
|
||||
LayoutAnimation<span class="token punctuation">.</span>Types<span class="token punctuation">.</span>spring<span class="token punctuation">,</span>
|
||||
LayoutAnimation<span class="token punctuation">.</span>Properties<span class="token punctuation">.</span>scaleXY<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<div class="toggler">
|
||||
<ul role="tablist" class="toggle-syntax">
|
||||
<li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
|
||||
Function Component Example
|
||||
</li>
|
||||
<li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
|
||||
Class Component Example
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p><block class="functional syntax" /></p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component, useState } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> {
|
||||
View,
|
||||
Platform,
|
||||
UIManager,
|
||||
LayoutAnimation,
|
||||
StyleSheet,
|
||||
Button
|
||||
} <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">if</span> (
|
||||
Platform.OS === <span class="hljs-string">"android"</span> &&
|
||||
UIManager.setLayoutAnimationEnabledExperimental
|
||||
) {
|
||||
UIManager.setLayoutAnimationEnabledExperimental(<span class="hljs-literal">true</span>);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> [boxPosition, setBoxPosition] = useState(<span class="hljs-string">"left"</span>);
|
||||
|
||||
<span class="hljs-keyword">const</span> toggleBox = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
LayoutAnimation.configureNext(
|
||||
LayoutAnimation.create(
|
||||
<span class="hljs-number">500</span>,
|
||||
LayoutAnimation.Types.spring,
|
||||
LayoutAnimation.Properties.scaleXY
|
||||
)
|
||||
);
|
||||
setBoxPosition(boxPosition === <span class="hljs-string">"left"</span> ? <span class="hljs-string">"right"</span> : <span class="hljs-string">"left"</span>);
|
||||
};
|
||||
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.buttonContainer}>
|
||||
<Button title="Toggle Layout" onPress={toggleBox} />
|
||||
</View>
|
||||
<View
|
||||
style={[styles.box, boxPosition === "left" ? null : styles.moveRight]}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "center"
|
||||
},
|
||||
box: {
|
||||
height: 100,
|
||||
width: 100,
|
||||
borderRadius: 5,
|
||||
margin: 8,
|
||||
backgroundColor: "blue"
|
||||
},
|
||||
moveRight: {
|
||||
alignSelf: "flex-end",
|
||||
height: 200,
|
||||
width: 200
|
||||
},
|
||||
buttonContainer: {
|
||||
alignSelf: "center"
|
||||
}
|
||||
});
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="LayoutAnimation"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%2C%20useState%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%0A%20%20View%2C%0A%20%20Platform%2C%0A%20%20UIManager%2C%0A%20%20LayoutAnimation%2C%0A%20%20StyleSheet%2C%0A%20%20Button%0A%7D%20from%20%22react-native%22%3B%0A%0Aif%20(%0A%20%20Platform.OS%20%3D%3D%3D%20%22android%22%20%26%26%0A%20%20UIManager.setLayoutAnimationEnabledExperimental%0A)%20%7B%0A%20%20UIManager.setLayoutAnimationEnabledExperimental(true)%3B%0A%7D%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20%5BboxPosition%2C%20setBoxPosition%5D%20%3D%20useState(%22left%22)%3B%0A%0A%20%20const%20toggleBox%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20LayoutAnimation.configureNext(%0A%20%20%20%20%20%20LayoutAnimation.create(%0A%20%20%20%20%20%20%20%20500%2C%0A%20%20%20%20%20%20%20%20LayoutAnimation.Types.spring%2C%0A%20%20%20%20%20%20%20%20LayoutAnimation.Properties.scaleXY%0A%20%20%20%20%20%20)%0A%20%20%20%20)%3B%0A%20%20%20%20setBoxPosition(boxPosition%20%3D%3D%3D%20%22left%22%20%3F%20%22right%22%20%3A%20%22left%22)%3B%0A%20%20%7D%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonContainer%7D%3E%0A%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Toggle%20Layout%22%20onPress%3D%7BtoggleBox%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20style%3D%7B%5Bstyles.box%2C%20boxPosition%20%3D%3D%3D%20%22left%22%20%3F%20null%20%3A%20styles.moveRight%5D%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20alignItems%3A%20%22flex-start%22%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%0A%20%20%7D%2C%0A%20%20box%3A%20%7B%0A%20%20%20%20height%3A%20100%2C%0A%20%20%20%20width%3A%20100%2C%0A%20%20%20%20borderRadius%3A%205%2C%0A%20%20%20%20margin%3A%208%2C%0A%20%20%20%20backgroundColor%3A%20%22blue%22%0A%20%20%7D%2C%0A%20%20moveRight%3A%20%7B%0A%20%20%20%20alignSelf%3A%20%22flex-end%22%2C%0A%20%20%20%20height%3A%20200%2C%0A%20%20%20%20width%3A%20200%0A%20%20%7D%2C%0A%20%20buttonContainer%3A%20%7B%0A%20%20%20%20alignSelf%3A%20%22center%22%0A%20%20%7D%0A%7D)%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=android,ios
|
||||
data-snack-preview="true"
|
||||
style="
|
||||
overflow: hidden;
|
||||
background: #fafafa;
|
||||
border: 1px solid rgba(0,0,0,.16);
|
||||
border-radius: 4px;
|
||||
height: 514px;
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p><block class="classical syntax" /></p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> {
|
||||
View,
|
||||
Platform,
|
||||
UIManager,
|
||||
LayoutAnimation,
|
||||
StyleSheet,
|
||||
Button
|
||||
} <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">if</span> (
|
||||
Platform.OS === <span class="hljs-string">"android"</span> &&
|
||||
UIManager.setLayoutAnimationEnabledExperimental
|
||||
) {
|
||||
UIManager.setLayoutAnimationEnabledExperimental(<span class="hljs-literal">true</span>);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
state = {
|
||||
<span class="hljs-attr">boxPosition</span>: <span class="hljs-string">"left"</span>
|
||||
};
|
||||
|
||||
toggleBox = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
LayoutAnimation.configureNext(
|
||||
LayoutAnimation.create(
|
||||
<span class="hljs-number">500</span>,
|
||||
LayoutAnimation.Types.spring,
|
||||
LayoutAnimation.Properties.scaleXY
|
||||
)
|
||||
);
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
<span class="hljs-attr">boxPosition</span>: <span class="hljs-keyword">this</span>.state.boxPosition === <span class="hljs-string">"left"</span> ? <span class="hljs-string">"right"</span> : <span class="hljs-string">"left"</span>
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.buttonContainer}>
|
||||
<Button title="Toggle Layout" onPress={this.toggleBox} />
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.box,
|
||||
this.state.boxPosition === "left" ? null : styles.moveRight
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "center"
|
||||
},
|
||||
box: {
|
||||
height: 100,
|
||||
width: 100,
|
||||
borderRadius: 5,
|
||||
margin: 8,
|
||||
backgroundColor: "blue"
|
||||
},
|
||||
moveRight: {
|
||||
alignSelf: "flex-end",
|
||||
height: 200,
|
||||
width: 200
|
||||
},
|
||||
buttonContainer: {
|
||||
alignSelf: "center"
|
||||
}
|
||||
});
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="LayoutAnimation"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%0A%20%20View%2C%0A%20%20Platform%2C%0A%20%20UIManager%2C%0A%20%20LayoutAnimation%2C%0A%20%20StyleSheet%2C%0A%20%20Button%0A%7D%20from%20%22react-native%22%3B%0A%0Aif%20(%0A%20%20Platform.OS%20%3D%3D%3D%20%22android%22%20%26%26%0A%20%20UIManager.setLayoutAnimationEnabledExperimental%0A)%20%7B%0A%20%20UIManager.setLayoutAnimationEnabledExperimental(true)%3B%0A%7D%0A%0Aexport%20default%20class%20App%20extends%20Component%20%7B%0A%20%20state%20%3D%20%7B%0A%20%20%20%20boxPosition%3A%20%22left%22%0A%20%20%7D%3B%0A%0A%20%20toggleBox%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20LayoutAnimation.configureNext(%0A%20%20%20%20%20%20LayoutAnimation.create(%0A%20%20%20%20%20%20%20%20500%2C%0A%20%20%20%20%20%20%20%20LayoutAnimation.Types.spring%2C%0A%20%20%20%20%20%20%20%20LayoutAnimation.Properties.scaleXY%0A%20%20%20%20%20%20)%0A%20%20%20%20)%3B%0A%20%20%20%20this.setState(%7B%0A%20%20%20%20%20%20boxPosition%3A%20this.state.boxPosition%20%3D%3D%3D%20%22left%22%20%3F%20%22right%22%20%3A%20%22left%22%0A%20%20%20%20%7D)%3B%0A%20%20%7D%3B%0A%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Toggle%20Layout%22%20onPress%3D%7Bthis.toggleBox%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20this.state.boxPosition%20%3D%3D%3D%20%22left%22%20%3F%20null%20%3A%20styles.moveRight%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20alignItems%3A%20%22flex-start%22%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%0A%20%20%7D%2C%0A%20%20box%3A%20%7B%0A%20%20%20%20height%3A%20100%2C%0A%20%20%20%20width%3A%20100%2C%0A%20%20%20%20borderRadius%3A%205%2C%0A%20%20%20%20margin%3A%208%2C%0A%20%20%20%20backgroundColor%3A%20%22blue%22%0A%20%20%7D%2C%0A%20%20moveRight%3A%20%7B%0A%20%20%20%20alignSelf%3A%20%22flex-end%22%2C%0A%20%20%20%20height%3A%20200%2C%0A%20%20%20%20width%3A%20200%0A%20%20%7D%2C%0A%20%20buttonContainer%3A%20%7B%0A%20%20%20%20alignSelf%3A%20%22center%22%0A%20%20%7D%0A%7D)%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=android,ios
|
||||
data-snack-preview="true"
|
||||
style="
|
||||
overflow: hidden;
|
||||
background: #fafafa;
|
||||
border: 1px solid rgba(0,0,0,.16);
|
||||
border-radius: 4px;
|
||||
height: 514px;
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p><block class="endBlock syntax" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="types"></a><a href="#types" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Types</h3>
|
||||
<p>An enumeration of animation types to be used in the <a href="/docs/next/layoutanimation#create"><code>create</code></a> method, or in the <code>create</code>/<code>update</code>/<code>delete</code> configs for <a href="/docs/next/layoutanimation#configurenext"><code>configureNext</code></a>. (example usage: <code>LayoutAnimation.Types.easeIn</code>)</p>
|
||||
@@ -239,6 +414,243 @@
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="spring"></a><a href="#spring" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>spring()</code></h3>
|
||||
<p>Calls <code>configureNext()</code> with <code>Presets.spring</code>.</p>
|
||||
<p>Example usage:</p>
|
||||
<div class="toggler">
|
||||
<ul role="tablist" class="toggle-syntax">
|
||||
<li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
|
||||
Function Component Example
|
||||
</li>
|
||||
<li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
|
||||
Class Component Example
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p><block class="functional syntax" /></p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> {
|
||||
View,
|
||||
Platform,
|
||||
UIManager,
|
||||
LayoutAnimation,
|
||||
StyleSheet,
|
||||
Button
|
||||
} <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">if</span> (
|
||||
Platform.OS === <span class="hljs-string">"android"</span> &&
|
||||
UIManager.setLayoutAnimationEnabledExperimental
|
||||
) {
|
||||
UIManager.setLayoutAnimationEnabledExperimental(<span class="hljs-literal">true</span>);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> [firstBoxPosition, setFirstBoxPosition] = useState(<span class="hljs-string">"left"</span>);
|
||||
<span class="hljs-keyword">const</span> [secondBoxPosition, setSecondBoxPosition] = useState(<span class="hljs-string">"left"</span>);
|
||||
<span class="hljs-keyword">const</span> [thirdBoxPosition, setThirdBoxPosition] = useState(<span class="hljs-string">"left"</span>);
|
||||
|
||||
<span class="hljs-keyword">const</span> toggleFirstBox = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
|
||||
setFirstBoxPosition(firstBoxPosition === <span class="hljs-string">"left"</span> ? <span class="hljs-string">"right"</span> : <span class="hljs-string">"left"</span>);
|
||||
};
|
||||
|
||||
<span class="hljs-keyword">const</span> toggleSecondBox = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
|
||||
setSecondBoxPosition(secondBoxPosition === <span class="hljs-string">"left"</span> ? <span class="hljs-string">"right"</span> : <span class="hljs-string">"left"</span>);
|
||||
};
|
||||
|
||||
<span class="hljs-keyword">const</span> toggleThirdBox = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
|
||||
setThirdBoxPosition(thirdBoxPosition === <span class="hljs-string">"left"</span> ? <span class="hljs-string">"right"</span> : <span class="hljs-string">"left"</span>);
|
||||
};
|
||||
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.buttonContainer}>
|
||||
<Button title="EaseInEaseOut" onPress={toggleFirstBox} />
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.box,
|
||||
firstBoxPosition === "left" ? null : styles.moveRight
|
||||
]}
|
||||
/>
|
||||
<View style={styles.buttonContainer}>
|
||||
<Button title="Linear" onPress={toggleSecondBox} />
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.box,
|
||||
secondBoxPosition === "left" ? null : styles.moveRight
|
||||
]}
|
||||
/>
|
||||
<View style={styles.buttonContainer}>
|
||||
<Button title="Spring" onPress={toggleThirdBox} />
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.box,
|
||||
thirdBoxPosition === "left" ? null : styles.moveRight
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "center"
|
||||
},
|
||||
box: {
|
||||
height: 100,
|
||||
width: 100,
|
||||
borderRadius: 5,
|
||||
margin: 8,
|
||||
backgroundColor: "blue"
|
||||
},
|
||||
moveRight: {
|
||||
alignSelf: "flex-end"
|
||||
},
|
||||
buttonContainer: {
|
||||
alignSelf: "center"
|
||||
}
|
||||
});
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="LayoutAnimation"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20useState%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%0A%20%20View%2C%0A%20%20Platform%2C%0A%20%20UIManager%2C%0A%20%20LayoutAnimation%2C%0A%20%20StyleSheet%2C%0A%20%20Button%0A%7D%20from%20%22react-native%22%3B%0A%0Aif%20(%0A%20%20Platform.OS%20%3D%3D%3D%20%22android%22%20%26%26%0A%20%20UIManager.setLayoutAnimationEnabledExperimental%0A)%20%7B%0A%20%20UIManager.setLayoutAnimationEnabledExperimental(true)%3B%0A%7D%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20%5BfirstBoxPosition%2C%20setFirstBoxPosition%5D%20%3D%20useState(%22left%22)%3B%0A%20%20const%20%5BsecondBoxPosition%2C%20setSecondBoxPosition%5D%20%3D%20useState(%22left%22)%3B%0A%20%20const%20%5BthirdBoxPosition%2C%20setThirdBoxPosition%5D%20%3D%20useState(%22left%22)%3B%0A%0A%20%20const%20toggleFirstBox%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)%3B%0A%20%20%20%20setFirstBoxPosition(firstBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20%22right%22%20%3A%20%22left%22)%3B%0A%20%20%7D%3B%0A%0A%20%20const%20toggleSecondBox%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20LayoutAnimation.configureNext(LayoutAnimation.Presets.linear)%3B%0A%20%20%20%20setSecondBoxPosition(secondBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20%22right%22%20%3A%20%22left%22)%3B%0A%20%20%7D%3B%0A%0A%20%20const%20toggleThirdBox%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20LayoutAnimation.configureNext(LayoutAnimation.Presets.spring)%3B%0A%20%20%20%20setThirdBoxPosition(thirdBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20%22right%22%20%3A%20%22left%22)%3B%0A%20%20%7D%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonContainer%7D%3E%0A%20%20%20%20%20%20%20%20%3CButton%20title%3D%22EaseInEaseOut%22%20onPress%3D%7BtoggleFirstBox%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20firstBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20null%20%3A%20styles.moveRight%0A%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonContainer%7D%3E%0A%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Linear%22%20onPress%3D%7BtoggleSecondBox%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20secondBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20null%20%3A%20styles.moveRight%0A%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonContainer%7D%3E%0A%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Spring%22%20onPress%3D%7BtoggleThirdBox%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20thirdBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20null%20%3A%20styles.moveRight%0A%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20alignItems%3A%20%22flex-start%22%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%0A%20%20%7D%2C%0A%20%20box%3A%20%7B%0A%20%20%20%20height%3A%20100%2C%0A%20%20%20%20width%3A%20100%2C%0A%20%20%20%20borderRadius%3A%205%2C%0A%20%20%20%20margin%3A%208%2C%0A%20%20%20%20backgroundColor%3A%20%22blue%22%0A%20%20%7D%2C%0A%20%20moveRight%3A%20%7B%0A%20%20%20%20alignSelf%3A%20%22flex-end%22%0A%20%20%7D%2C%0A%20%20buttonContainer%3A%20%7B%0A%20%20%20%20alignSelf%3A%20%22center%22%0A%20%20%7D%0A%7D)%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=android,ios
|
||||
data-snack-preview="true"
|
||||
style="
|
||||
overflow: hidden;
|
||||
background: #fafafa;
|
||||
border: 1px solid rgba(0,0,0,.16);
|
||||
border-radius: 4px;
|
||||
height: 514px;
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p><block class="classical syntax" /></p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> {
|
||||
View,
|
||||
Platform,
|
||||
UIManager,
|
||||
LayoutAnimation,
|
||||
StyleSheet,
|
||||
Button
|
||||
} <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">if</span> (
|
||||
Platform.OS === <span class="hljs-string">"android"</span> &&
|
||||
UIManager.setLayoutAnimationEnabledExperimental
|
||||
) {
|
||||
UIManager.setLayoutAnimationEnabledExperimental(<span class="hljs-literal">true</span>);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
state = {
|
||||
<span class="hljs-attr">firstBoxPosition</span>: <span class="hljs-string">"left"</span>,
|
||||
<span class="hljs-attr">secondBoxPosition</span>: <span class="hljs-string">"left"</span>,
|
||||
<span class="hljs-attr">thirdBoxPosition</span>: <span class="hljs-string">"left"</span>
|
||||
};
|
||||
|
||||
toggleFirstBox = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
<span class="hljs-attr">firstBoxPosition</span>:
|
||||
<span class="hljs-keyword">this</span>.state.firstBoxPosition === <span class="hljs-string">"left"</span> ? <span class="hljs-string">"right"</span> : <span class="hljs-string">"left"</span>
|
||||
});
|
||||
};
|
||||
|
||||
toggleSecondBox = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
<span class="hljs-attr">secondBoxPosition</span>:
|
||||
<span class="hljs-keyword">this</span>.state.secondBoxPosition === <span class="hljs-string">"left"</span> ? <span class="hljs-string">"right"</span> : <span class="hljs-string">"left"</span>
|
||||
});
|
||||
};
|
||||
|
||||
toggleThirdBox = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
<span class="hljs-attr">thirdBoxPosition</span>:
|
||||
<span class="hljs-keyword">this</span>.state.thirdBoxPosition === <span class="hljs-string">"left"</span> ? <span class="hljs-string">"right"</span> : <span class="hljs-string">"left"</span>
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.buttonContainer}>
|
||||
<Button title="EaseInEaseOut" onPress={this.toggleFirstBox} />
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.box,
|
||||
this.state.firstBoxPosition === "left" ? null : styles.moveRight
|
||||
]}
|
||||
/>
|
||||
<View style={styles.buttonContainer}>
|
||||
<Button title="Linear" onPress={this.toggleSecondBox} />
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.box,
|
||||
this.state.secondBoxPosition === "left" ? null : styles.moveRight
|
||||
]}
|
||||
/>
|
||||
<View style={styles.buttonContainer}>
|
||||
<Button title="Spring" onPress={this.toggleThirdBox} />
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.box,
|
||||
this.state.thirdBoxPosition === "left" ? null : styles.moveRight
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "center"
|
||||
},
|
||||
box: {
|
||||
height: 100,
|
||||
width: 100,
|
||||
borderRadius: 5,
|
||||
margin: 8,
|
||||
backgroundColor: "blue"
|
||||
},
|
||||
moveRight: {
|
||||
alignSelf: "flex-end"
|
||||
},
|
||||
buttonContainer: {
|
||||
alignSelf: "center"
|
||||
}
|
||||
});
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="LayoutAnimation"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%0A%20%20View%2C%0A%20%20Platform%2C%0A%20%20UIManager%2C%0A%20%20LayoutAnimation%2C%0A%20%20StyleSheet%2C%0A%20%20Button%0A%7D%20from%20%22react-native%22%3B%0A%0Aif%20(%0A%20%20Platform.OS%20%3D%3D%3D%20%22android%22%20%26%26%0A%20%20UIManager.setLayoutAnimationEnabledExperimental%0A)%20%7B%0A%20%20UIManager.setLayoutAnimationEnabledExperimental(true)%3B%0A%7D%0A%0Aexport%20default%20class%20App%20extends%20Component%20%7B%0A%20%20state%20%3D%20%7B%0A%20%20%20%20firstBoxPosition%3A%20%22left%22%2C%0A%20%20%20%20secondBoxPosition%3A%20%22left%22%2C%0A%20%20%20%20thirdBoxPosition%3A%20%22left%22%0A%20%20%7D%3B%0A%0A%20%20toggleFirstBox%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)%3B%0A%20%20%20%20this.setState(%7B%0A%20%20%20%20%20%20firstBoxPosition%3A%0A%20%20%20%20%20%20%20%20this.state.firstBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20%22right%22%20%3A%20%22left%22%0A%20%20%20%20%7D)%3B%0A%20%20%7D%3B%0A%0A%20%20toggleSecondBox%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20LayoutAnimation.configureNext(LayoutAnimation.Presets.linear)%3B%0A%20%20%20%20this.setState(%7B%0A%20%20%20%20%20%20secondBoxPosition%3A%0A%20%20%20%20%20%20%20%20this.state.secondBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20%22right%22%20%3A%20%22left%22%0A%20%20%20%20%7D)%3B%0A%20%20%7D%3B%0A%0A%20%20toggleThirdBox%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20LayoutAnimation.configureNext(LayoutAnimation.Presets.spring)%3B%0A%20%20%20%20this.setState(%7B%0A%20%20%20%20%20%20thirdBoxPosition%3A%0A%20%20%20%20%20%20%20%20this.state.thirdBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20%22right%22%20%3A%20%22left%22%0A%20%20%20%20%7D)%3B%0A%20%20%7D%3B%0A%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CButton%20title%3D%22EaseInEaseOut%22%20onPress%3D%7Bthis.toggleFirstBox%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20this.state.firstBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20null%20%3A%20styles.moveRight%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Linear%22%20onPress%3D%7Bthis.toggleSecondBox%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20this.state.secondBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20null%20%3A%20styles.moveRight%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Spring%22%20onPress%3D%7Bthis.toggleThirdBox%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20this.state.thirdBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20null%20%3A%20styles.moveRight%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20alignItems%3A%20%22flex-start%22%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%0A%20%20%7D%2C%0A%20%20box%3A%20%7B%0A%20%20%20%20height%3A%20100%2C%0A%20%20%20%20width%3A%20100%2C%0A%20%20%20%20borderRadius%3A%205%2C%0A%20%20%20%20margin%3A%208%2C%0A%20%20%20%20backgroundColor%3A%20%22blue%22%0A%20%20%7D%2C%0A%20%20moveRight%3A%20%7B%0A%20%20%20%20alignSelf%3A%20%22flex-end%22%0A%20%20%7D%2C%0A%20%20buttonContainer%3A%20%7B%0A%20%20%20%20alignSelf%3A%20%22center%22%0A%20%20%7D%0A%7D)%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=android,ios
|
||||
data-snack-preview="true"
|
||||
style="
|
||||
overflow: hidden;
|
||||
background: #fafafa;
|
||||
border: 1px solid rgba(0,0,0,.16);
|
||||
border-radius: 4px;
|
||||
height: 514px;
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p><block class="endBlock syntax" /></p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/keyboard"><span class="arrow-prev">← </span><span>Keyboard</span></a><a class="docs-next button" href="/docs/next/linking"><span>Linking</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a></li><li><a href="#methods">Methods</a><ul class="toc-headings"><li><a href="#configurenext"><code>configureNext()</code></a></li><li><a href="#create"><code>create()</code></a></li></ul></li><li><a href="#properties">Properties</a><ul class="toc-headings"><li><a href="#types">Types</a></li><li><a href="#properties-1">Properties</a></li><li><a href="#presets">Presets</a></li><li><a href="#easeineaseout"><code>easeInEaseOut()</code></a></li><li><a href="#linear"><code>linear()</code></a></li><li><a href="#spring"><code>spring()</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started.html">Getting Started</a><a href="/docs/tutorial.html">Tutorial</a><a href="/docs/components-and-apis.html">Components and APIs</a><a href="/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/help.html">The React Native Community</a><a href="/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/layoutanimation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">LayoutAnimation</h1></header><article><div><span><p>Automatically animates views to their new positions when the next layout happens.</p>
|
||||
<p>A common way to use this API is to call it before calling <code>setState</code>.</p>
|
||||
<p>A common way to use this API is to call it before updating the state hook in functional components and calling <code>setState</code> in class components.</p>
|
||||
<p>Note that in order to get this to work on <strong>Android</strong> you need to set the following flags via <code>UIManager</code>:</p>
|
||||
<pre><code class="hljs css language-js"><span class="token keyword">if</span> <span class="token punctuation">(</span>Platform<span class="token punctuation">.</span><span class="token constant">OS</span> <span class="token operator">===</span> <span class="token string">'android'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>UIManager<span class="token punctuation">.</span>setLayoutAnimationEnabledExperimental<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -130,7 +130,7 @@
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20useState%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20LayoutAnimation%2C%20Platform%2C%20StyleSheet%2C%20Text%2C%20TouchableOpacity%2C%20UIManager%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aif%20(%0A%20%20Platform.OS%20%3D%3D%3D%20%22android%22%20%26%26%0A%20%20UIManager.setLayoutAnimationEnabledExperimental%0A)%20%7B%0A%20%20UIManager.setLayoutAnimationEnabledExperimental(true)%3B%0A%7D%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20%5Bexpanded%2C%20setExpanded%5D%20%3D%20useState(false)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyle.container%7D%3E%0A%20%20%20%20%20%20%3CTouchableOpacity%0A%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20LayoutAnimation.configureNext(LayoutAnimation.Presets.spring)%3B%0A%20%20%20%20%20%20%20%20%20%20setExpanded(!expanded)%3B%0A%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%3CText%3EPress%20me%20to%20%7Bexpanded%20%3F%20%22collapse%22%20%3A%20%22expand%22%7D!%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20%20%20%20%20%7Bexpanded%20%26%26%20(%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyle.tile%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%3EI%20disappear%20sometimes!%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20)%7D%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aconst%20style%20%3D%20StyleSheet.create(%7B%0A%20%20tile%3A%20%7B%0A%20%20%20%20background%3A%20%22lightGrey%22%2C%0A%20%20%20%20borderWidth%3A%200.5%2C%0A%20%20%20%20borderColor%3A%20%22%23d6d7da%22%0A%20%20%7D%2C%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%2C%0A%20%20%20%20alignItems%3A%20%22center%22%2C%0A%20%20%20%20overflow%3A%20%22hidden%22%0A%20%20%7D%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-supported-platforms=android,ios
|
||||
data-snack-preview="true"
|
||||
style="
|
||||
overflow: hidden;
|
||||
@@ -140,7 +140,8 @@
|
||||
height: 514px;
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><hr>
|
||||
></div></div></div><p><block class="endBlock syntax" /></p>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="configurenext"></a><a href="#configurenext" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>configureNext()</code></h3>
|
||||
@@ -179,14 +180,188 @@
|
||||
</code></pre>
|
||||
<p>Helper that creates an object (with <code>create</code>, <code>update</code>, and <code>delete</code> fields) to pass into <a href="/docs/next/layoutanimation#configurenext"><code>configureNext</code></a>. The <code>type</code> parameter is an <a href="/docs/next/layoutanimation#types">animation type</a>, and the <code>creationProp</code> parameter is a <a href="/docs/next/layoutanimation#properties">layout property</a>.</p>
|
||||
<p>Example usage:</p>
|
||||
<pre><code class="hljs css language-js">LayoutAnimation<span class="token punctuation">.</span><span class="token function">configureNext</span><span class="token punctuation">(</span>
|
||||
LayoutAnimation<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>
|
||||
<span class="token number">500</span><span class="token punctuation">,</span>
|
||||
LayoutAnimation<span class="token punctuation">.</span>Types<span class="token punctuation">.</span>spring<span class="token punctuation">,</span>
|
||||
LayoutAnimation<span class="token punctuation">.</span>Properties<span class="token punctuation">.</span>scaleXY<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<div class="toggler">
|
||||
<ul role="tablist" class="toggle-syntax">
|
||||
<li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
|
||||
Function Component Example
|
||||
</li>
|
||||
<li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
|
||||
Class Component Example
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p><block class="functional syntax" /></p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component, useState } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> {
|
||||
View,
|
||||
Platform,
|
||||
UIManager,
|
||||
LayoutAnimation,
|
||||
StyleSheet,
|
||||
Button
|
||||
} <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">if</span> (
|
||||
Platform.OS === <span class="hljs-string">"android"</span> &&
|
||||
UIManager.setLayoutAnimationEnabledExperimental
|
||||
) {
|
||||
UIManager.setLayoutAnimationEnabledExperimental(<span class="hljs-literal">true</span>);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> [boxPosition, setBoxPosition] = useState(<span class="hljs-string">"left"</span>);
|
||||
|
||||
<span class="hljs-keyword">const</span> toggleBox = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
LayoutAnimation.configureNext(
|
||||
LayoutAnimation.create(
|
||||
<span class="hljs-number">500</span>,
|
||||
LayoutAnimation.Types.spring,
|
||||
LayoutAnimation.Properties.scaleXY
|
||||
)
|
||||
);
|
||||
setBoxPosition(boxPosition === <span class="hljs-string">"left"</span> ? <span class="hljs-string">"right"</span> : <span class="hljs-string">"left"</span>);
|
||||
};
|
||||
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.buttonContainer}>
|
||||
<Button title="Toggle Layout" onPress={toggleBox} />
|
||||
</View>
|
||||
<View
|
||||
style={[styles.box, boxPosition === "left" ? null : styles.moveRight]}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "center"
|
||||
},
|
||||
box: {
|
||||
height: 100,
|
||||
width: 100,
|
||||
borderRadius: 5,
|
||||
margin: 8,
|
||||
backgroundColor: "blue"
|
||||
},
|
||||
moveRight: {
|
||||
alignSelf: "flex-end",
|
||||
height: 200,
|
||||
width: 200
|
||||
},
|
||||
buttonContainer: {
|
||||
alignSelf: "center"
|
||||
}
|
||||
});
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="LayoutAnimation"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%2C%20useState%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%0A%20%20View%2C%0A%20%20Platform%2C%0A%20%20UIManager%2C%0A%20%20LayoutAnimation%2C%0A%20%20StyleSheet%2C%0A%20%20Button%0A%7D%20from%20%22react-native%22%3B%0A%0Aif%20(%0A%20%20Platform.OS%20%3D%3D%3D%20%22android%22%20%26%26%0A%20%20UIManager.setLayoutAnimationEnabledExperimental%0A)%20%7B%0A%20%20UIManager.setLayoutAnimationEnabledExperimental(true)%3B%0A%7D%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20%5BboxPosition%2C%20setBoxPosition%5D%20%3D%20useState(%22left%22)%3B%0A%0A%20%20const%20toggleBox%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20LayoutAnimation.configureNext(%0A%20%20%20%20%20%20LayoutAnimation.create(%0A%20%20%20%20%20%20%20%20500%2C%0A%20%20%20%20%20%20%20%20LayoutAnimation.Types.spring%2C%0A%20%20%20%20%20%20%20%20LayoutAnimation.Properties.scaleXY%0A%20%20%20%20%20%20)%0A%20%20%20%20)%3B%0A%20%20%20%20setBoxPosition(boxPosition%20%3D%3D%3D%20%22left%22%20%3F%20%22right%22%20%3A%20%22left%22)%3B%0A%20%20%7D%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonContainer%7D%3E%0A%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Toggle%20Layout%22%20onPress%3D%7BtoggleBox%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20style%3D%7B%5Bstyles.box%2C%20boxPosition%20%3D%3D%3D%20%22left%22%20%3F%20null%20%3A%20styles.moveRight%5D%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20alignItems%3A%20%22flex-start%22%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%0A%20%20%7D%2C%0A%20%20box%3A%20%7B%0A%20%20%20%20height%3A%20100%2C%0A%20%20%20%20width%3A%20100%2C%0A%20%20%20%20borderRadius%3A%205%2C%0A%20%20%20%20margin%3A%208%2C%0A%20%20%20%20backgroundColor%3A%20%22blue%22%0A%20%20%7D%2C%0A%20%20moveRight%3A%20%7B%0A%20%20%20%20alignSelf%3A%20%22flex-end%22%2C%0A%20%20%20%20height%3A%20200%2C%0A%20%20%20%20width%3A%20200%0A%20%20%7D%2C%0A%20%20buttonContainer%3A%20%7B%0A%20%20%20%20alignSelf%3A%20%22center%22%0A%20%20%7D%0A%7D)%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=android,ios
|
||||
data-snack-preview="true"
|
||||
style="
|
||||
overflow: hidden;
|
||||
background: #fafafa;
|
||||
border: 1px solid rgba(0,0,0,.16);
|
||||
border-radius: 4px;
|
||||
height: 514px;
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p><block class="classical syntax" /></p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> {
|
||||
View,
|
||||
Platform,
|
||||
UIManager,
|
||||
LayoutAnimation,
|
||||
StyleSheet,
|
||||
Button
|
||||
} <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">if</span> (
|
||||
Platform.OS === <span class="hljs-string">"android"</span> &&
|
||||
UIManager.setLayoutAnimationEnabledExperimental
|
||||
) {
|
||||
UIManager.setLayoutAnimationEnabledExperimental(<span class="hljs-literal">true</span>);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
state = {
|
||||
<span class="hljs-attr">boxPosition</span>: <span class="hljs-string">"left"</span>
|
||||
};
|
||||
|
||||
toggleBox = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
LayoutAnimation.configureNext(
|
||||
LayoutAnimation.create(
|
||||
<span class="hljs-number">500</span>,
|
||||
LayoutAnimation.Types.spring,
|
||||
LayoutAnimation.Properties.scaleXY
|
||||
)
|
||||
);
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
<span class="hljs-attr">boxPosition</span>: <span class="hljs-keyword">this</span>.state.boxPosition === <span class="hljs-string">"left"</span> ? <span class="hljs-string">"right"</span> : <span class="hljs-string">"left"</span>
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.buttonContainer}>
|
||||
<Button title="Toggle Layout" onPress={this.toggleBox} />
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.box,
|
||||
this.state.boxPosition === "left" ? null : styles.moveRight
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "center"
|
||||
},
|
||||
box: {
|
||||
height: 100,
|
||||
width: 100,
|
||||
borderRadius: 5,
|
||||
margin: 8,
|
||||
backgroundColor: "blue"
|
||||
},
|
||||
moveRight: {
|
||||
alignSelf: "flex-end",
|
||||
height: 200,
|
||||
width: 200
|
||||
},
|
||||
buttonContainer: {
|
||||
alignSelf: "center"
|
||||
}
|
||||
});
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="LayoutAnimation"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%0A%20%20View%2C%0A%20%20Platform%2C%0A%20%20UIManager%2C%0A%20%20LayoutAnimation%2C%0A%20%20StyleSheet%2C%0A%20%20Button%0A%7D%20from%20%22react-native%22%3B%0A%0Aif%20(%0A%20%20Platform.OS%20%3D%3D%3D%20%22android%22%20%26%26%0A%20%20UIManager.setLayoutAnimationEnabledExperimental%0A)%20%7B%0A%20%20UIManager.setLayoutAnimationEnabledExperimental(true)%3B%0A%7D%0A%0Aexport%20default%20class%20App%20extends%20Component%20%7B%0A%20%20state%20%3D%20%7B%0A%20%20%20%20boxPosition%3A%20%22left%22%0A%20%20%7D%3B%0A%0A%20%20toggleBox%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20LayoutAnimation.configureNext(%0A%20%20%20%20%20%20LayoutAnimation.create(%0A%20%20%20%20%20%20%20%20500%2C%0A%20%20%20%20%20%20%20%20LayoutAnimation.Types.spring%2C%0A%20%20%20%20%20%20%20%20LayoutAnimation.Properties.scaleXY%0A%20%20%20%20%20%20)%0A%20%20%20%20)%3B%0A%20%20%20%20this.setState(%7B%0A%20%20%20%20%20%20boxPosition%3A%20this.state.boxPosition%20%3D%3D%3D%20%22left%22%20%3F%20%22right%22%20%3A%20%22left%22%0A%20%20%20%20%7D)%3B%0A%20%20%7D%3B%0A%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Toggle%20Layout%22%20onPress%3D%7Bthis.toggleBox%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20this.state.boxPosition%20%3D%3D%3D%20%22left%22%20%3F%20null%20%3A%20styles.moveRight%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20alignItems%3A%20%22flex-start%22%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%0A%20%20%7D%2C%0A%20%20box%3A%20%7B%0A%20%20%20%20height%3A%20100%2C%0A%20%20%20%20width%3A%20100%2C%0A%20%20%20%20borderRadius%3A%205%2C%0A%20%20%20%20margin%3A%208%2C%0A%20%20%20%20backgroundColor%3A%20%22blue%22%0A%20%20%7D%2C%0A%20%20moveRight%3A%20%7B%0A%20%20%20%20alignSelf%3A%20%22flex-end%22%2C%0A%20%20%20%20height%3A%20200%2C%0A%20%20%20%20width%3A%20200%0A%20%20%7D%2C%0A%20%20buttonContainer%3A%20%7B%0A%20%20%20%20alignSelf%3A%20%22center%22%0A%20%20%7D%0A%7D)%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=android,ios
|
||||
data-snack-preview="true"
|
||||
style="
|
||||
overflow: hidden;
|
||||
background: #fafafa;
|
||||
border: 1px solid rgba(0,0,0,.16);
|
||||
border-radius: 4px;
|
||||
height: 514px;
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p><block class="endBlock syntax" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="types"></a><a href="#types" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Types</h3>
|
||||
<p>An enumeration of animation types to be used in the <a href="/docs/next/layoutanimation#create"><code>create</code></a> method, or in the <code>create</code>/<code>update</code>/<code>delete</code> configs for <a href="/docs/next/layoutanimation#configurenext"><code>configureNext</code></a>. (example usage: <code>LayoutAnimation.Types.easeIn</code>)</p>
|
||||
@@ -239,6 +414,243 @@
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="spring"></a><a href="#spring" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>spring()</code></h3>
|
||||
<p>Calls <code>configureNext()</code> with <code>Presets.spring</code>.</p>
|
||||
<p>Example usage:</p>
|
||||
<div class="toggler">
|
||||
<ul role="tablist" class="toggle-syntax">
|
||||
<li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
|
||||
Function Component Example
|
||||
</li>
|
||||
<li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
|
||||
Class Component Example
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p><block class="functional syntax" /></p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> {
|
||||
View,
|
||||
Platform,
|
||||
UIManager,
|
||||
LayoutAnimation,
|
||||
StyleSheet,
|
||||
Button
|
||||
} <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">if</span> (
|
||||
Platform.OS === <span class="hljs-string">"android"</span> &&
|
||||
UIManager.setLayoutAnimationEnabledExperimental
|
||||
) {
|
||||
UIManager.setLayoutAnimationEnabledExperimental(<span class="hljs-literal">true</span>);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">const</span> [firstBoxPosition, setFirstBoxPosition] = useState(<span class="hljs-string">"left"</span>);
|
||||
<span class="hljs-keyword">const</span> [secondBoxPosition, setSecondBoxPosition] = useState(<span class="hljs-string">"left"</span>);
|
||||
<span class="hljs-keyword">const</span> [thirdBoxPosition, setThirdBoxPosition] = useState(<span class="hljs-string">"left"</span>);
|
||||
|
||||
<span class="hljs-keyword">const</span> toggleFirstBox = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
|
||||
setFirstBoxPosition(firstBoxPosition === <span class="hljs-string">"left"</span> ? <span class="hljs-string">"right"</span> : <span class="hljs-string">"left"</span>);
|
||||
};
|
||||
|
||||
<span class="hljs-keyword">const</span> toggleSecondBox = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
|
||||
setSecondBoxPosition(secondBoxPosition === <span class="hljs-string">"left"</span> ? <span class="hljs-string">"right"</span> : <span class="hljs-string">"left"</span>);
|
||||
};
|
||||
|
||||
<span class="hljs-keyword">const</span> toggleThirdBox = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
|
||||
setThirdBoxPosition(thirdBoxPosition === <span class="hljs-string">"left"</span> ? <span class="hljs-string">"right"</span> : <span class="hljs-string">"left"</span>);
|
||||
};
|
||||
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.buttonContainer}>
|
||||
<Button title="EaseInEaseOut" onPress={toggleFirstBox} />
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.box,
|
||||
firstBoxPosition === "left" ? null : styles.moveRight
|
||||
]}
|
||||
/>
|
||||
<View style={styles.buttonContainer}>
|
||||
<Button title="Linear" onPress={toggleSecondBox} />
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.box,
|
||||
secondBoxPosition === "left" ? null : styles.moveRight
|
||||
]}
|
||||
/>
|
||||
<View style={styles.buttonContainer}>
|
||||
<Button title="Spring" onPress={toggleThirdBox} />
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.box,
|
||||
thirdBoxPosition === "left" ? null : styles.moveRight
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "center"
|
||||
},
|
||||
box: {
|
||||
height: 100,
|
||||
width: 100,
|
||||
borderRadius: 5,
|
||||
margin: 8,
|
||||
backgroundColor: "blue"
|
||||
},
|
||||
moveRight: {
|
||||
alignSelf: "flex-end"
|
||||
},
|
||||
buttonContainer: {
|
||||
alignSelf: "center"
|
||||
}
|
||||
});
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="LayoutAnimation"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20useState%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%0A%20%20View%2C%0A%20%20Platform%2C%0A%20%20UIManager%2C%0A%20%20LayoutAnimation%2C%0A%20%20StyleSheet%2C%0A%20%20Button%0A%7D%20from%20%22react-native%22%3B%0A%0Aif%20(%0A%20%20Platform.OS%20%3D%3D%3D%20%22android%22%20%26%26%0A%20%20UIManager.setLayoutAnimationEnabledExperimental%0A)%20%7B%0A%20%20UIManager.setLayoutAnimationEnabledExperimental(true)%3B%0A%7D%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20%5BfirstBoxPosition%2C%20setFirstBoxPosition%5D%20%3D%20useState(%22left%22)%3B%0A%20%20const%20%5BsecondBoxPosition%2C%20setSecondBoxPosition%5D%20%3D%20useState(%22left%22)%3B%0A%20%20const%20%5BthirdBoxPosition%2C%20setThirdBoxPosition%5D%20%3D%20useState(%22left%22)%3B%0A%0A%20%20const%20toggleFirstBox%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)%3B%0A%20%20%20%20setFirstBoxPosition(firstBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20%22right%22%20%3A%20%22left%22)%3B%0A%20%20%7D%3B%0A%0A%20%20const%20toggleSecondBox%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20LayoutAnimation.configureNext(LayoutAnimation.Presets.linear)%3B%0A%20%20%20%20setSecondBoxPosition(secondBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20%22right%22%20%3A%20%22left%22)%3B%0A%20%20%7D%3B%0A%0A%20%20const%20toggleThirdBox%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20LayoutAnimation.configureNext(LayoutAnimation.Presets.spring)%3B%0A%20%20%20%20setThirdBoxPosition(thirdBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20%22right%22%20%3A%20%22left%22)%3B%0A%20%20%7D%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonContainer%7D%3E%0A%20%20%20%20%20%20%20%20%3CButton%20title%3D%22EaseInEaseOut%22%20onPress%3D%7BtoggleFirstBox%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20firstBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20null%20%3A%20styles.moveRight%0A%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonContainer%7D%3E%0A%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Linear%22%20onPress%3D%7BtoggleSecondBox%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20secondBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20null%20%3A%20styles.moveRight%0A%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonContainer%7D%3E%0A%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Spring%22%20onPress%3D%7BtoggleThirdBox%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20thirdBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20null%20%3A%20styles.moveRight%0A%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20alignItems%3A%20%22flex-start%22%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%0A%20%20%7D%2C%0A%20%20box%3A%20%7B%0A%20%20%20%20height%3A%20100%2C%0A%20%20%20%20width%3A%20100%2C%0A%20%20%20%20borderRadius%3A%205%2C%0A%20%20%20%20margin%3A%208%2C%0A%20%20%20%20backgroundColor%3A%20%22blue%22%0A%20%20%7D%2C%0A%20%20moveRight%3A%20%7B%0A%20%20%20%20alignSelf%3A%20%22flex-end%22%0A%20%20%7D%2C%0A%20%20buttonContainer%3A%20%7B%0A%20%20%20%20alignSelf%3A%20%22center%22%0A%20%20%7D%0A%7D)%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=android,ios
|
||||
data-snack-preview="true"
|
||||
style="
|
||||
overflow: hidden;
|
||||
background: #fafafa;
|
||||
border: 1px solid rgba(0,0,0,.16);
|
||||
border-radius: 4px;
|
||||
height: 514px;
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p><block class="classical syntax" /></p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> {
|
||||
View,
|
||||
Platform,
|
||||
UIManager,
|
||||
LayoutAnimation,
|
||||
StyleSheet,
|
||||
Button
|
||||
} <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">if</span> (
|
||||
Platform.OS === <span class="hljs-string">"android"</span> &&
|
||||
UIManager.setLayoutAnimationEnabledExperimental
|
||||
) {
|
||||
UIManager.setLayoutAnimationEnabledExperimental(<span class="hljs-literal">true</span>);
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
state = {
|
||||
<span class="hljs-attr">firstBoxPosition</span>: <span class="hljs-string">"left"</span>,
|
||||
<span class="hljs-attr">secondBoxPosition</span>: <span class="hljs-string">"left"</span>,
|
||||
<span class="hljs-attr">thirdBoxPosition</span>: <span class="hljs-string">"left"</span>
|
||||
};
|
||||
|
||||
toggleFirstBox = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
<span class="hljs-attr">firstBoxPosition</span>:
|
||||
<span class="hljs-keyword">this</span>.state.firstBoxPosition === <span class="hljs-string">"left"</span> ? <span class="hljs-string">"right"</span> : <span class="hljs-string">"left"</span>
|
||||
});
|
||||
};
|
||||
|
||||
toggleSecondBox = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
<span class="hljs-attr">secondBoxPosition</span>:
|
||||
<span class="hljs-keyword">this</span>.state.secondBoxPosition === <span class="hljs-string">"left"</span> ? <span class="hljs-string">"right"</span> : <span class="hljs-string">"left"</span>
|
||||
});
|
||||
};
|
||||
|
||||
toggleThirdBox = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
<span class="hljs-attr">thirdBoxPosition</span>:
|
||||
<span class="hljs-keyword">this</span>.state.thirdBoxPosition === <span class="hljs-string">"left"</span> ? <span class="hljs-string">"right"</span> : <span class="hljs-string">"left"</span>
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.buttonContainer}>
|
||||
<Button title="EaseInEaseOut" onPress={this.toggleFirstBox} />
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.box,
|
||||
this.state.firstBoxPosition === "left" ? null : styles.moveRight
|
||||
]}
|
||||
/>
|
||||
<View style={styles.buttonContainer}>
|
||||
<Button title="Linear" onPress={this.toggleSecondBox} />
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.box,
|
||||
this.state.secondBoxPosition === "left" ? null : styles.moveRight
|
||||
]}
|
||||
/>
|
||||
<View style={styles.buttonContainer}>
|
||||
<Button title="Spring" onPress={this.toggleThirdBox} />
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.box,
|
||||
this.state.thirdBoxPosition === "left" ? null : styles.moveRight
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "center"
|
||||
},
|
||||
box: {
|
||||
height: 100,
|
||||
width: 100,
|
||||
borderRadius: 5,
|
||||
margin: 8,
|
||||
backgroundColor: "blue"
|
||||
},
|
||||
moveRight: {
|
||||
alignSelf: "flex-end"
|
||||
},
|
||||
buttonContainer: {
|
||||
alignSelf: "center"
|
||||
}
|
||||
});
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="LayoutAnimation"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%0A%20%20View%2C%0A%20%20Platform%2C%0A%20%20UIManager%2C%0A%20%20LayoutAnimation%2C%0A%20%20StyleSheet%2C%0A%20%20Button%0A%7D%20from%20%22react-native%22%3B%0A%0Aif%20(%0A%20%20Platform.OS%20%3D%3D%3D%20%22android%22%20%26%26%0A%20%20UIManager.setLayoutAnimationEnabledExperimental%0A)%20%7B%0A%20%20UIManager.setLayoutAnimationEnabledExperimental(true)%3B%0A%7D%0A%0Aexport%20default%20class%20App%20extends%20Component%20%7B%0A%20%20state%20%3D%20%7B%0A%20%20%20%20firstBoxPosition%3A%20%22left%22%2C%0A%20%20%20%20secondBoxPosition%3A%20%22left%22%2C%0A%20%20%20%20thirdBoxPosition%3A%20%22left%22%0A%20%20%7D%3B%0A%0A%20%20toggleFirstBox%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)%3B%0A%20%20%20%20this.setState(%7B%0A%20%20%20%20%20%20firstBoxPosition%3A%0A%20%20%20%20%20%20%20%20this.state.firstBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20%22right%22%20%3A%20%22left%22%0A%20%20%20%20%7D)%3B%0A%20%20%7D%3B%0A%0A%20%20toggleSecondBox%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20LayoutAnimation.configureNext(LayoutAnimation.Presets.linear)%3B%0A%20%20%20%20this.setState(%7B%0A%20%20%20%20%20%20secondBoxPosition%3A%0A%20%20%20%20%20%20%20%20this.state.secondBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20%22right%22%20%3A%20%22left%22%0A%20%20%20%20%7D)%3B%0A%20%20%7D%3B%0A%0A%20%20toggleThirdBox%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20LayoutAnimation.configureNext(LayoutAnimation.Presets.spring)%3B%0A%20%20%20%20this.setState(%7B%0A%20%20%20%20%20%20thirdBoxPosition%3A%0A%20%20%20%20%20%20%20%20this.state.thirdBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20%22right%22%20%3A%20%22left%22%0A%20%20%20%20%7D)%3B%0A%20%20%7D%3B%0A%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CButton%20title%3D%22EaseInEaseOut%22%20onPress%3D%7Bthis.toggleFirstBox%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20this.state.firstBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20null%20%3A%20styles.moveRight%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Linear%22%20onPress%3D%7Bthis.toggleSecondBox%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20this.state.secondBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20null%20%3A%20styles.moveRight%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Spring%22%20onPress%3D%7Bthis.toggleThirdBox%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20this.state.thirdBoxPosition%20%3D%3D%3D%20%22left%22%20%3F%20null%20%3A%20styles.moveRight%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20alignItems%3A%20%22flex-start%22%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%0A%20%20%7D%2C%0A%20%20box%3A%20%7B%0A%20%20%20%20height%3A%20100%2C%0A%20%20%20%20width%3A%20100%2C%0A%20%20%20%20borderRadius%3A%205%2C%0A%20%20%20%20margin%3A%208%2C%0A%20%20%20%20backgroundColor%3A%20%22blue%22%0A%20%20%7D%2C%0A%20%20moveRight%3A%20%7B%0A%20%20%20%20alignSelf%3A%20%22flex-end%22%0A%20%20%7D%2C%0A%20%20buttonContainer%3A%20%7B%0A%20%20%20%20alignSelf%3A%20%22center%22%0A%20%20%7D%0A%7D)%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=android,ios
|
||||
data-snack-preview="true"
|
||||
style="
|
||||
overflow: hidden;
|
||||
background: #fafafa;
|
||||
border: 1px solid rgba(0,0,0,.16);
|
||||
border-radius: 4px;
|
||||
height: 514px;
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p><block class="endBlock syntax" /></p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/keyboard"><span class="arrow-prev">← </span><span>Keyboard</span></a><a class="docs-next button" href="/docs/next/linking"><span>Linking</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a></li><li><a href="#methods">Methods</a><ul class="toc-headings"><li><a href="#configurenext"><code>configureNext()</code></a></li><li><a href="#create"><code>create()</code></a></li></ul></li><li><a href="#properties">Properties</a><ul class="toc-headings"><li><a href="#types">Types</a></li><li><a href="#properties-1">Properties</a></li><li><a href="#presets">Presets</a></li><li><a href="#easeineaseout"><code>easeInEaseOut()</code></a></li><li><a href="#linear"><code>linear()</code></a></li><li><a href="#spring"><code>spring()</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started.html">Getting Started</a><a href="/docs/tutorial.html">Tutorial</a><a href="/docs/components-and-apis.html">Components and APIs</a><a href="/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/help.html">The React Native Community</a><a href="/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
+157
-265
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Transforms · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="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."/><meta name="docsearch:version" content="next"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Transforms · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://reactnative.dev/"/><meta property="og:description" content="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."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://reactnative.dev/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://reactnative.dev/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Transforms · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="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, the nearby components or padding to the container to prevent such overlaps."/><meta name="docsearch:version" content="next"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Transforms · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://reactnative.dev/"/><meta property="og:description" content="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, the nearby components or padding to the container to prevent such overlaps."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://reactnative.dev/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://reactnative.dev/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/transforms.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">Transforms</h1></header><article><div><span><p>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.</p>
|
||||
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/transforms.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">Transforms</h1></header><article><div><span><p>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, the nearby components or padding to the container to prevent such overlaps.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<div class="toggler">
|
||||
<ul role="tablist" class="toggle-syntax">
|
||||
@@ -82,176 +82,124 @@
|
||||
</div>
|
||||
<p><block class="functional syntax" /></p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> { SafeAreaView, Text, View, ScrollView, StyleSheet } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
<span class="hljs-keyword">import</span> { SafeAreaView, ScrollView, StyleSheet, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">SafeAreaView</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ScrollView</span> <span class="hljs-attr">contentContainerStyle</span>=<span class="hljs-string">{styles.scrollContentContainer}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.box}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Original Object<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> App = <span class="hljs-function"><span class="hljs-params">()</span> =></span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">SafeAreaView</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ScrollView</span>
|
||||
<span class="hljs-attr">contentContainerStyle</span>=<span class="hljs-string">{styles.scrollContentContainer}</span>
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.box}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Original Object<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">56</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scale:</span> <span class="hljs-attr">2</span> }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Scale by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scale:</span> <span class="hljs-attr">2</span> }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Scale by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scaleX:</span> <span class="hljs-attr">2</span> }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>ScaleX by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scaleX:</span> <span class="hljs-attr">2</span> }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>ScaleX by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">56</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scaleY:</span> <span class="hljs-attr">2</span> }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>ScaleY by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scaleY:</span> <span class="hljs-attr">2</span> }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>ScaleY by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">24</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">rotate:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Rotate by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">rotate:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Rotate by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">rotateX:</span> "<span class="hljs-attr">45deg</span>" }, { <span class="hljs-attr">rotateZ:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Rotate X&Z by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [
|
||||
{ <span class="hljs-attr">rotateX:</span> "<span class="hljs-attr">45deg</span>" },
|
||||
{ <span class="hljs-attr">rotateZ:</span> "<span class="hljs-attr">45deg</span>" }
|
||||
]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Rotate X&Z by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">24</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">rotateY:</span> "<span class="hljs-attr">45deg</span>" }, { <span class="hljs-attr">rotateZ:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Rotate Y&Z by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [
|
||||
{ <span class="hljs-attr">rotateY:</span> "<span class="hljs-attr">45deg</span>" },
|
||||
{ <span class="hljs-attr">rotateZ:</span> "<span class="hljs-attr">45deg</span>" }
|
||||
]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Rotate Y&Z by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">skewX:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>SkewX by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">skewX:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>SkewX by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">56</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">skewY:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>SkewY by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">skewY:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>SkewY by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">56</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">skewX:</span> "<span class="hljs-attr">30deg</span>" }, { <span class="hljs-attr">skewY:</span> "<span class="hljs-attr">30deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Skew X&Y by 30 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [
|
||||
{ <span class="hljs-attr">skewX:</span> "<span class="hljs-attr">30deg</span>" },
|
||||
{ <span class="hljs-attr">skewY:</span> "<span class="hljs-attr">30deg</span>" }
|
||||
]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Skew X&Y by 30 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">translateX:</span> <span class="hljs-attr">-100</span> }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>TranslateX by -100 <span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">translateX:</span> <span class="hljs-attr">-50</span> }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>TranslateX by -50 <span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginBottom:</span> <span class="hljs-attr">108</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">translateY:</span> <span class="hljs-attr">100</span> }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>TranslateY by 100 <span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">ScrollView</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">SafeAreaView</span>></span></span>
|
||||
);
|
||||
}
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">translateY:</span> <span class="hljs-attr">50</span> }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>TranslateY by 50 <span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">ScrollView</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">SafeAreaView</span>></span></span>
|
||||
);
|
||||
|
||||
<span class="hljs-keyword">const</span> styles = StyleSheet.create({
|
||||
<span class="hljs-attr">container</span>: {
|
||||
<span class="hljs-attr">flex</span>: <span class="hljs-number">1</span>
|
||||
},
|
||||
<span class="hljs-attr">scrollContentContainer</span>: {
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">paddingBottom</span>: <span class="hljs-number">60</span>
|
||||
},
|
||||
<span class="hljs-attr">box</span>: {
|
||||
<span class="hljs-attr">height</span>: <span class="hljs-number">100</span>,
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">100</span>,
|
||||
<span class="hljs-attr">borderRadius</span>: <span class="hljs-number">5</span>,
|
||||
<span class="hljs-attr">margin</span>: <span class="hljs-number">8</span>,
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">"blue"</span>,
|
||||
<span class="hljs-attr">marginVertical</span>: <span class="hljs-number">40</span>,
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">"#61dafb"</span>,
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">justifyContent</span>: <span class="hljs-string">"center"</span>
|
||||
},
|
||||
<span class="hljs-attr">infoText</span>: {
|
||||
<span class="hljs-attr">text</span>: {
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">14</span>,
|
||||
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">"bold"</span>,
|
||||
<span class="hljs-attr">margin</span>: <span class="hljs-number">8</span>,
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">"white"</span>,
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">"#000"</span>,
|
||||
<span class="hljs-attr">textAlign</span>: <span class="hljs-string">"center"</span>
|
||||
}
|
||||
});
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Transforms"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20%22react%22%3B%0Aimport%20%7B%20SafeAreaView%2C%20Text%2C%20View%2C%20ScrollView%2C%20StyleSheet%20%7D%20from%20%22react-native%22%3B%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CScrollView%20contentContainerStyle%3D%7Bstyles.scrollContentContainer%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.box%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3EOriginal%20Object%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20marginVertical%3A%2056%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scale%3A%202%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3EScale%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scaleX%3A%202%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3EScaleX%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20marginVertical%3A%2056%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scaleY%3A%202%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3EScaleY%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20marginVertical%3A%2024%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20rotate%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3ERotate%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20rotateX%3A%20%2245deg%22%20%7D%2C%20%7B%20rotateZ%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3ERotate%20X%26Z%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20marginVertical%3A%2024%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20rotateY%3A%20%2245deg%22%20%7D%2C%20%7B%20rotateZ%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3ERotate%20Y%26Z%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20skewX%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3ESkewX%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20marginVertical%3A%2056%2C%0A%20%20%20%20%20%20%Line truncated
|
||||
data-snack-code="import%20React%20from%20%22react%22%3B%0Aimport%20%7B%20SafeAreaView%2C%20ScrollView%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aexport%20default%20App%20%3D%20()%20%3D%3E%20(%0A%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%3CScrollView%0A%20%20%20%20%20%20contentContainerStyle%3D%7Bstyles.scrollContentContainer%7D%0A%20%20%20%20%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.box%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3EOriginal%20Object%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scale%3A%202%20%7D%5D%0A%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3EScale%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scaleX%3A%202%20%7D%5D%0A%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3EScaleX%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scaleY%3A%202%20%7D%5D%0A%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3EScaleY%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20rotate%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ERotate%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20transform%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%7B%20rotateX%3A%20%2245deg%22%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%20rotateZ%3A%20%2245deg%22%20%7D%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ERotate%20X%26Z%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20transform%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%7B%20rotateY%3A%20%2245deg%22%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%20rotateZ%3A%20%2245deg%22%20%7D%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ERotate%20Y%26Z%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20skewX%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ESkewX%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20skewY%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ESkewY%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20transform%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%7B%20skewX%3A%20%2230deg%22%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%20skewY%3A%20%2230deg%22%20%7D%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ESkew%20X%26Y%20by%2030%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20translateX%3A%20-50%20%7D%5D%0A%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ETranslateX%20by%20-50%20%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20translateY%3A%2050%20%7D%5D%0A%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ETranslateY%20by%2050%20%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%3C%2FScrollView%3E%0A%20%20%3C%2FSafeAreaView%3E%0A)%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%0A%20%20%7D%2C%0A%20%20scrollContentContainer%3A%20%7B%0A%20%20%20%20alignItems%3A%20%22center%22%2C%0A%20%20%20%20paddingBottom%3A%2060%0A%20%20%7D%2C%0A%20%20box%3A%20%7B%0A%20%20%20%20height%3A%20100%2C%0A%20%20%20%20width%3A%20100%2C%0A%20%20%20%20borderRadius%3A%205%2C%0A%20%20%20%20marginVertical%3A%2040%2C%0A%20%20%20%20backgroundColor%3A%20%22%2361dafb%22%2C%0A%20%2Line truncated
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -265,143 +213,92 @@
|
||||
"
|
||||
></div></div></div><p><block class="classical syntax" /></p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> { SafeAreaView, Text, View, ScrollView, StyleSheet } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
<span class="hljs-keyword">import</span> { SafeAreaView, ScrollView, StyleSheet, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">SafeAreaView</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ScrollView</span> <span class="hljs-attr">contentContainerStyle</span>=<span class="hljs-string">{styles.scrollContentContainer}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ScrollView</span>
|
||||
<span class="hljs-attr">contentContainerStyle</span>=<span class="hljs-string">{styles.scrollContentContainer}</span>
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.box}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Original Object<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Original Object<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">56</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scale:</span> <span class="hljs-attr">2</span> }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Scale by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scale:</span> <span class="hljs-attr">2</span> }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Scale by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scaleX:</span> <span class="hljs-attr">2</span> }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>ScaleX by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scaleX:</span> <span class="hljs-attr">2</span> }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>ScaleX by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">56</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scaleY:</span> <span class="hljs-attr">2</span> }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>ScaleY by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scaleY:</span> <span class="hljs-attr">2</span> }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>ScaleY by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">24</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">rotate:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Rotate by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">rotate:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Rotate by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">rotateX:</span> "<span class="hljs-attr">45deg</span>" }, { <span class="hljs-attr">rotateZ:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Rotate X&Z by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [
|
||||
{ <span class="hljs-attr">rotateX:</span> "<span class="hljs-attr">45deg</span>" },
|
||||
{ <span class="hljs-attr">rotateZ:</span> "<span class="hljs-attr">45deg</span>" }
|
||||
]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Rotate X&Z by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">24</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">rotateY:</span> "<span class="hljs-attr">45deg</span>" }, { <span class="hljs-attr">rotateZ:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Rotate Y&Z by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [
|
||||
{ <span class="hljs-attr">rotateY:</span> "<span class="hljs-attr">45deg</span>" },
|
||||
{ <span class="hljs-attr">rotateZ:</span> "<span class="hljs-attr">45deg</span>" }
|
||||
]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Rotate Y&Z by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">skewX:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>SkewX by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">skewX:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>SkewX by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">56</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">skewY:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>SkewY by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">skewY:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>SkewY by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">56</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">skewX:</span> "<span class="hljs-attr">30deg</span>" }, { <span class="hljs-attr">skewY:</span> "<span class="hljs-attr">30deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Skew X&Y by 30 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [
|
||||
{ <span class="hljs-attr">skewX:</span> "<span class="hljs-attr">30deg</span>" },
|
||||
{ <span class="hljs-attr">skewY:</span> "<span class="hljs-attr">30deg</span>" }
|
||||
]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Skew X&Y by 30 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">translateX:</span> <span class="hljs-attr">-100</span> }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>TranslateX by -100 <span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">translateX:</span> <span class="hljs-attr">-50</span> }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>TranslateX by -50<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginBottom:</span> <span class="hljs-attr">108</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">translateY:</span> <span class="hljs-attr">100</span> }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>TranslateY by 100 <span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">translateY:</span> <span class="hljs-attr">50</span> }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>TranslateY by 50<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">ScrollView</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">SafeAreaView</span>></span></span>
|
||||
@@ -414,29 +311,30 @@
|
||||
<span class="hljs-attr">flex</span>: <span class="hljs-number">1</span>
|
||||
},
|
||||
<span class="hljs-attr">scrollContentContainer</span>: {
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">paddingBottom</span>: <span class="hljs-number">60</span>
|
||||
},
|
||||
<span class="hljs-attr">box</span>: {
|
||||
<span class="hljs-attr">height</span>: <span class="hljs-number">100</span>,
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">100</span>,
|
||||
<span class="hljs-attr">borderRadius</span>: <span class="hljs-number">5</span>,
|
||||
<span class="hljs-attr">margin</span>: <span class="hljs-number">8</span>,
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">"blue"</span>,
|
||||
<span class="hljs-attr">marginVertical</span>: <span class="hljs-number">40</span>,
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">"#61dafb"</span>,
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">justifyContent</span>: <span class="hljs-string">"center"</span>
|
||||
},
|
||||
<span class="hljs-attr">infoText</span>: {
|
||||
<span class="hljs-attr">text</span>: {
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">14</span>,
|
||||
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">"bold"</span>,
|
||||
<span class="hljs-attr">margin</span>: <span class="hljs-number">8</span>,
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">"white"</span>,
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">"#000"</span>,
|
||||
<span class="hljs-attr">textAlign</span>: <span class="hljs-string">"center"</span>
|
||||
}
|
||||
});
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Transforms"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20SafeAreaView%2C%20Text%2C%20View%2C%20ScrollView%2C%20StyleSheet%20%7D%20from%20%22react-native%22%3B%0A%0Aexport%20default%20class%20App%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CScrollView%20contentContainerStyle%3D%7Bstyles.scrollContentContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.box%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3EOriginal%20Object%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20marginVertical%3A%2056%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scale%3A%202%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3EScale%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scaleX%3A%202%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3EScaleX%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20marginVertical%3A%2056%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scaleY%3A%202%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3EScaleY%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20marginVertical%3A%2024%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20rotate%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3ERotate%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20rotateX%3A%20%2245deg%22%20%7D%2C%20%7B%20rotateZ%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3ERotate%20X%26Z%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20marginVertical%3A%2024%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20rotateY%3A%20%2245deg%22%20%7D%2C%20%7B%20rotateZ%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3ERotate%20Y%26Z%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20skewX%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%Line truncated
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20SafeAreaView%2C%20ScrollView%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aexport%20default%20class%20App%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CScrollView%0A%20%20%20%20%20%20%20%20%20%20contentContainerStyle%3D%7Bstyles.scrollContentContainer%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.box%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3EOriginal%20Object%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scale%3A%202%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3EScale%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scaleX%3A%202%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3EScaleX%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scaleY%3A%202%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3EScaleY%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20rotate%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ERotate%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20rotateX%3A%20%2245deg%22%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20rotateZ%3A%20%2245deg%22%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ERotate%20X%26Z%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20rotateY%3A%20%2245deg%22%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20rotateZ%3A%20%2245deg%22%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ERotate%20Y%26Z%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20skewX%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ESkewX%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20skewY%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ESkewY%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20skewX%3A%20%2230deg%22%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20skewY%3A%20%2230deg%22%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ESkew%20X%26Y%20by%2030%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20translateX%3A%20-50%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ETranslateX%20by%20-50%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%Line truncated
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -452,18 +350,20 @@
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="transform"></a><a href="#transform" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>transform</code></h3>
|
||||
<h3><a class="anchor" aria-hidden="true" id="transform"></a><a href="#transform" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>transform()</code></h3>
|
||||
<p><code>transform</code> 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.</p>
|
||||
<p>The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:</p>
|
||||
<p><code>transform([{ rotateX: '45deg' }, { rotateZ: '0.785398rad' }])</code></p>
|
||||
<pre><code class="hljs css language-js"><span class="token function">transform</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">{</span>rotateX<span class="token punctuation">:</span> <span class="token string">'45deg'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>rotateZ<span class="token punctuation">:</span> <span class="token string">'0.785398rad'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:</p>
|
||||
<p><code>transform([{ skewX: '45deg' }])</code></p>
|
||||
<pre><code class="hljs css language-js"><span class="token function">transform</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">{</span>skewX<span class="token punctuation">:</span> <span class="token string">'45deg'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>array of object: {perspective: number}, ,object: {rotate: string}, ,object: {rotateX: string}, ,object: {rotateY: string}, ,object: {rotateZ: string}, ,object: {scale: number}, ,object: {scaleX: number}, ,object: {scaleY: number}, ,object: {translateX: number}, ,object: {translateY: number}, ,object: {skewX: string}, ,object: {skewY: string}</td><td>No</td></tr>
|
||||
<tr><td>array of objects: {perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -471,15 +371,7 @@
|
||||
<blockquote>
|
||||
<p><strong>Deprecated.</strong> Use the <a href="transforms#transform"><code>transform</code></a> prop instead.</p>
|
||||
</blockquote>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.')</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/toastandroid"><span class="arrow-prev">← </span><span class="function-name-prevnext">ToastAndroid</span></a><a class="docs-next button" href="/docs/next/usewindowdimensions"><span class="function-name-prevnext">useWindowDimensions</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a></li><li><a href="#methods">Methods</a><ul class="toc-headings"><li><a href="#transform"><code>transform</code></a></li><li><a href="#decomposedmatrix-rotation-scalex-scaley-transformmatrix-translatex-translatey"><code>decomposedMatrix</code>, <code>rotation</code>, <code>scaleX</code>, <code>scaleY</code>, <code>transformMatrix</code>, <code>translateX</code>, <code>translateY</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started.html">Getting Started</a><a href="/docs/tutorial.html">Tutorial</a><a href="/docs/components-and-apis.html">Components and APIs</a><a href="/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/help.html">The React Native Community</a><a href="/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/toastandroid"><span class="arrow-prev">← </span><span class="function-name-prevnext">ToastAndroid</span></a><a class="docs-next button" href="/docs/next/usewindowdimensions"><span class="function-name-prevnext">useWindowDimensions</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a></li><li><a href="#methods">Methods</a><ul class="toc-headings"><li><a href="#transform"><code>transform()</code></a></li><li><a href="#decomposedmatrix-rotation-scalex-scaley-transformmatrix-translatex-translatey"><code>decomposedMatrix</code>, <code>rotation</code>, <code>scaleX</code>, <code>scaleY</code>, <code>transformMatrix</code>, <code>translateX</code>, <code>translateY</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started.html">Getting Started</a><a href="/docs/tutorial.html">Tutorial</a><a href="/docs/components-and-apis.html">Components and APIs</a><a href="/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/help.html">The React Native Community</a><a href="/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+157
-265
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Transforms · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="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."/><meta name="docsearch:version" content="next"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Transforms · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://reactnative.dev/"/><meta property="og:description" content="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."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://reactnative.dev/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://reactnative.dev/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Transforms · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="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, the nearby components or padding to the container to prevent such overlaps."/><meta name="docsearch:version" content="next"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Transforms · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://reactnative.dev/"/><meta property="og:description" content="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, the nearby components or padding to the container to prevent such overlaps."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://reactnative.dev/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://reactnative.dev/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/transforms.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">Transforms</h1></header><article><div><span><p>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.</p>
|
||||
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/transforms.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">Transforms</h1></header><article><div><span><p>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, the nearby components or padding to the container to prevent such overlaps.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<div class="toggler">
|
||||
<ul role="tablist" class="toggle-syntax">
|
||||
@@ -82,176 +82,124 @@
|
||||
</div>
|
||||
<p><block class="functional syntax" /></p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> { SafeAreaView, Text, View, ScrollView, StyleSheet } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
<span class="hljs-keyword">import</span> { SafeAreaView, ScrollView, StyleSheet, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">SafeAreaView</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ScrollView</span> <span class="hljs-attr">contentContainerStyle</span>=<span class="hljs-string">{styles.scrollContentContainer}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.box}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Original Object<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> App = <span class="hljs-function"><span class="hljs-params">()</span> =></span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">SafeAreaView</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ScrollView</span>
|
||||
<span class="hljs-attr">contentContainerStyle</span>=<span class="hljs-string">{styles.scrollContentContainer}</span>
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.box}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Original Object<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">56</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scale:</span> <span class="hljs-attr">2</span> }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Scale by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scale:</span> <span class="hljs-attr">2</span> }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Scale by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scaleX:</span> <span class="hljs-attr">2</span> }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>ScaleX by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scaleX:</span> <span class="hljs-attr">2</span> }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>ScaleX by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">56</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scaleY:</span> <span class="hljs-attr">2</span> }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>ScaleY by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scaleY:</span> <span class="hljs-attr">2</span> }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>ScaleY by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">24</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">rotate:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Rotate by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">rotate:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Rotate by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">rotateX:</span> "<span class="hljs-attr">45deg</span>" }, { <span class="hljs-attr">rotateZ:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Rotate X&Z by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [
|
||||
{ <span class="hljs-attr">rotateX:</span> "<span class="hljs-attr">45deg</span>" },
|
||||
{ <span class="hljs-attr">rotateZ:</span> "<span class="hljs-attr">45deg</span>" }
|
||||
]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Rotate X&Z by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">24</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">rotateY:</span> "<span class="hljs-attr">45deg</span>" }, { <span class="hljs-attr">rotateZ:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Rotate Y&Z by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [
|
||||
{ <span class="hljs-attr">rotateY:</span> "<span class="hljs-attr">45deg</span>" },
|
||||
{ <span class="hljs-attr">rotateZ:</span> "<span class="hljs-attr">45deg</span>" }
|
||||
]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Rotate Y&Z by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">skewX:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>SkewX by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">skewX:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>SkewX by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">56</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">skewY:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>SkewY by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">skewY:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>SkewY by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">56</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">skewX:</span> "<span class="hljs-attr">30deg</span>" }, { <span class="hljs-attr">skewY:</span> "<span class="hljs-attr">30deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Skew X&Y by 30 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [
|
||||
{ <span class="hljs-attr">skewX:</span> "<span class="hljs-attr">30deg</span>" },
|
||||
{ <span class="hljs-attr">skewY:</span> "<span class="hljs-attr">30deg</span>" }
|
||||
]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Skew X&Y by 30 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">translateX:</span> <span class="hljs-attr">-100</span> }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>TranslateX by -100 <span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">translateX:</span> <span class="hljs-attr">-50</span> }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>TranslateX by -50 <span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginBottom:</span> <span class="hljs-attr">108</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">translateY:</span> <span class="hljs-attr">100</span> }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>TranslateY by 100 <span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">ScrollView</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">SafeAreaView</span>></span></span>
|
||||
);
|
||||
}
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">translateY:</span> <span class="hljs-attr">50</span> }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>TranslateY by 50 <span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">ScrollView</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">SafeAreaView</span>></span></span>
|
||||
);
|
||||
|
||||
<span class="hljs-keyword">const</span> styles = StyleSheet.create({
|
||||
<span class="hljs-attr">container</span>: {
|
||||
<span class="hljs-attr">flex</span>: <span class="hljs-number">1</span>
|
||||
},
|
||||
<span class="hljs-attr">scrollContentContainer</span>: {
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">paddingBottom</span>: <span class="hljs-number">60</span>
|
||||
},
|
||||
<span class="hljs-attr">box</span>: {
|
||||
<span class="hljs-attr">height</span>: <span class="hljs-number">100</span>,
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">100</span>,
|
||||
<span class="hljs-attr">borderRadius</span>: <span class="hljs-number">5</span>,
|
||||
<span class="hljs-attr">margin</span>: <span class="hljs-number">8</span>,
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">"blue"</span>,
|
||||
<span class="hljs-attr">marginVertical</span>: <span class="hljs-number">40</span>,
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">"#61dafb"</span>,
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">justifyContent</span>: <span class="hljs-string">"center"</span>
|
||||
},
|
||||
<span class="hljs-attr">infoText</span>: {
|
||||
<span class="hljs-attr">text</span>: {
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">14</span>,
|
||||
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">"bold"</span>,
|
||||
<span class="hljs-attr">margin</span>: <span class="hljs-number">8</span>,
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">"white"</span>,
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">"#000"</span>,
|
||||
<span class="hljs-attr">textAlign</span>: <span class="hljs-string">"center"</span>
|
||||
}
|
||||
});
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Transforms"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20%22react%22%3B%0Aimport%20%7B%20SafeAreaView%2C%20Text%2C%20View%2C%20ScrollView%2C%20StyleSheet%20%7D%20from%20%22react-native%22%3B%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CScrollView%20contentContainerStyle%3D%7Bstyles.scrollContentContainer%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.box%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3EOriginal%20Object%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20marginVertical%3A%2056%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scale%3A%202%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3EScale%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scaleX%3A%202%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3EScaleX%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20marginVertical%3A%2056%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scaleY%3A%202%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3EScaleY%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20marginVertical%3A%2024%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20rotate%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3ERotate%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20rotateX%3A%20%2245deg%22%20%7D%2C%20%7B%20rotateZ%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3ERotate%20X%26Z%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20marginVertical%3A%2024%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20rotateY%3A%20%2245deg%22%20%7D%2C%20%7B%20rotateZ%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3ERotate%20Y%26Z%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20skewX%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3ESkewX%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20marginVertical%3A%2056%2C%0A%20%20%20%20%20%20%Line truncated
|
||||
data-snack-code="import%20React%20from%20%22react%22%3B%0Aimport%20%7B%20SafeAreaView%2C%20ScrollView%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aexport%20default%20App%20%3D%20()%20%3D%3E%20(%0A%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%3CScrollView%0A%20%20%20%20%20%20contentContainerStyle%3D%7Bstyles.scrollContentContainer%7D%0A%20%20%20%20%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.box%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3EOriginal%20Object%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scale%3A%202%20%7D%5D%0A%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3EScale%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scaleX%3A%202%20%7D%5D%0A%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3EScaleX%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scaleY%3A%202%20%7D%5D%0A%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3EScaleY%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20rotate%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ERotate%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20transform%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%7B%20rotateX%3A%20%2245deg%22%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%20rotateZ%3A%20%2245deg%22%20%7D%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ERotate%20X%26Z%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20transform%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%7B%20rotateY%3A%20%2245deg%22%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%20rotateZ%3A%20%2245deg%22%20%7D%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ERotate%20Y%26Z%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20skewX%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ESkewX%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20skewY%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ESkewY%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20transform%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%7B%20skewX%3A%20%2230deg%22%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%20skewY%3A%20%2230deg%22%20%7D%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ESkew%20X%26Y%20by%2030%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20translateX%3A%20-50%20%7D%5D%0A%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ETranslateX%20by%20-50%20%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20translateY%3A%2050%20%7D%5D%0A%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ETranslateY%20by%2050%20%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%3C%2FScrollView%3E%0A%20%20%3C%2FSafeAreaView%3E%0A)%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%0A%20%20%7D%2C%0A%20%20scrollContentContainer%3A%20%7B%0A%20%20%20%20alignItems%3A%20%22center%22%2C%0A%20%20%20%20paddingBottom%3A%2060%0A%20%20%7D%2C%0A%20%20box%3A%20%7B%0A%20%20%20%20height%3A%20100%2C%0A%20%20%20%20width%3A%20100%2C%0A%20%20%20%20borderRadius%3A%205%2C%0A%20%20%20%20marginVertical%3A%2040%2C%0A%20%20%20%20backgroundColor%3A%20%22%2361dafb%22%2C%0A%20%2Line truncated
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -265,143 +213,92 @@
|
||||
"
|
||||
></div></div></div><p><block class="classical syntax" /></p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> { SafeAreaView, Text, View, ScrollView, StyleSheet } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
<span class="hljs-keyword">import</span> { SafeAreaView, ScrollView, StyleSheet, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">SafeAreaView</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ScrollView</span> <span class="hljs-attr">contentContainerStyle</span>=<span class="hljs-string">{styles.scrollContentContainer}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ScrollView</span>
|
||||
<span class="hljs-attr">contentContainerStyle</span>=<span class="hljs-string">{styles.scrollContentContainer}</span>
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.box}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Original Object<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Original Object<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">56</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scale:</span> <span class="hljs-attr">2</span> }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Scale by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scale:</span> <span class="hljs-attr">2</span> }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Scale by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scaleX:</span> <span class="hljs-attr">2</span> }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>ScaleX by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scaleX:</span> <span class="hljs-attr">2</span> }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>ScaleX by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">56</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scaleY:</span> <span class="hljs-attr">2</span> }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>ScaleY by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">scaleY:</span> <span class="hljs-attr">2</span> }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>ScaleY by 2<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">24</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">rotate:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Rotate by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">rotate:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Rotate by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">rotateX:</span> "<span class="hljs-attr">45deg</span>" }, { <span class="hljs-attr">rotateZ:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Rotate X&Z by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [
|
||||
{ <span class="hljs-attr">rotateX:</span> "<span class="hljs-attr">45deg</span>" },
|
||||
{ <span class="hljs-attr">rotateZ:</span> "<span class="hljs-attr">45deg</span>" }
|
||||
]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Rotate X&Z by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">24</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">rotateY:</span> "<span class="hljs-attr">45deg</span>" }, { <span class="hljs-attr">rotateZ:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Rotate Y&Z by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [
|
||||
{ <span class="hljs-attr">rotateY:</span> "<span class="hljs-attr">45deg</span>" },
|
||||
{ <span class="hljs-attr">rotateZ:</span> "<span class="hljs-attr">45deg</span>" }
|
||||
]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Rotate Y&Z by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">skewX:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>SkewX by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">skewX:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>SkewX by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">56</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">skewY:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>SkewY by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">skewY:</span> "<span class="hljs-attr">45deg</span>" }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>SkewY by 45 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginVertical:</span> <span class="hljs-attr">56</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">skewX:</span> "<span class="hljs-attr">30deg</span>" }, { <span class="hljs-attr">skewY:</span> "<span class="hljs-attr">30deg</span>" }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>Skew X&Y by 30 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [
|
||||
{ <span class="hljs-attr">skewX:</span> "<span class="hljs-attr">30deg</span>" },
|
||||
{ <span class="hljs-attr">skewY:</span> "<span class="hljs-attr">30deg</span>" }
|
||||
]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>Skew X&Y by 30 deg<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">translateX:</span> <span class="hljs-attr">-100</span> }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>TranslateX by -100 <span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">translateX:</span> <span class="hljs-attr">-50</span> }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>TranslateX by -50<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{[</span>
|
||||
<span class="hljs-attr">styles.box</span>,
|
||||
{
|
||||
<span class="hljs-attr">marginBottom:</span> <span class="hljs-attr">108</span>,
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">translateY:</span> <span class="hljs-attr">100</span> }]
|
||||
}
|
||||
]}
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.infoText}</span>></span>TranslateY by 100 <span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.box,</span> {
|
||||
<span class="hljs-attr">transform:</span> [{ <span class="hljs-attr">translateY:</span> <span class="hljs-attr">50</span> }]
|
||||
}]}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>TranslateY by 50<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">ScrollView</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">SafeAreaView</span>></span></span>
|
||||
@@ -414,29 +311,30 @@
|
||||
<span class="hljs-attr">flex</span>: <span class="hljs-number">1</span>
|
||||
},
|
||||
<span class="hljs-attr">scrollContentContainer</span>: {
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">paddingBottom</span>: <span class="hljs-number">60</span>
|
||||
},
|
||||
<span class="hljs-attr">box</span>: {
|
||||
<span class="hljs-attr">height</span>: <span class="hljs-number">100</span>,
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">100</span>,
|
||||
<span class="hljs-attr">borderRadius</span>: <span class="hljs-number">5</span>,
|
||||
<span class="hljs-attr">margin</span>: <span class="hljs-number">8</span>,
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">"blue"</span>,
|
||||
<span class="hljs-attr">marginVertical</span>: <span class="hljs-number">40</span>,
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">"#61dafb"</span>,
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">justifyContent</span>: <span class="hljs-string">"center"</span>
|
||||
},
|
||||
<span class="hljs-attr">infoText</span>: {
|
||||
<span class="hljs-attr">text</span>: {
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">14</span>,
|
||||
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">"bold"</span>,
|
||||
<span class="hljs-attr">margin</span>: <span class="hljs-number">8</span>,
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">"white"</span>,
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">"#000"</span>,
|
||||
<span class="hljs-attr">textAlign</span>: <span class="hljs-string">"center"</span>
|
||||
}
|
||||
});
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Transforms"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20SafeAreaView%2C%20Text%2C%20View%2C%20ScrollView%2C%20StyleSheet%20%7D%20from%20%22react-native%22%3B%0A%0Aexport%20default%20class%20App%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CScrollView%20contentContainerStyle%3D%7Bstyles.scrollContentContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.box%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3EOriginal%20Object%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20marginVertical%3A%2056%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scale%3A%202%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3EScale%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scaleX%3A%202%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3EScaleX%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20marginVertical%3A%2056%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scaleY%3A%202%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3EScaleY%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20marginVertical%3A%2024%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20rotate%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3ERotate%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20rotateX%3A%20%2245deg%22%20%7D%2C%20%7B%20rotateZ%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3ERotate%20X%26Z%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20marginVertical%3A%2024%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20rotateY%3A%20%2245deg%22%20%7D%2C%20%7B%20rotateZ%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3ERotate%20Y%26Z%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%0A%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20styles.box%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20skewX%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%Line truncated
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20SafeAreaView%2C%20ScrollView%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aexport%20default%20class%20App%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CScrollView%0A%20%20%20%20%20%20%20%20%20%20contentContainerStyle%3D%7Bstyles.scrollContentContainer%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.box%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3EOriginal%20Object%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scale%3A%202%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3EScale%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scaleX%3A%202%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3EScaleX%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20scaleY%3A%202%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3EScaleY%20by%202%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20rotate%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ERotate%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20rotateX%3A%20%2245deg%22%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20rotateZ%3A%20%2245deg%22%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ERotate%20X%26Z%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20rotateY%3A%20%2245deg%22%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20rotateZ%3A%20%2245deg%22%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ERotate%20Y%26Z%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20skewX%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ESkewX%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20skewY%3A%20%2245deg%22%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ESkewY%20by%2045%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20skewX%3A%20%2230deg%22%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20skewY%3A%20%2230deg%22%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ESkew%20X%26Y%20by%2030%20deg%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.box%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7B%20translateX%3A%20-50%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3ETranslateX%20by%20-50%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%Line truncated
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -452,18 +350,20 @@
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="transform"></a><a href="#transform" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>transform</code></h3>
|
||||
<h3><a class="anchor" aria-hidden="true" id="transform"></a><a href="#transform" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>transform()</code></h3>
|
||||
<p><code>transform</code> 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.</p>
|
||||
<p>The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:</p>
|
||||
<p><code>transform([{ rotateX: '45deg' }, { rotateZ: '0.785398rad' }])</code></p>
|
||||
<pre><code class="hljs css language-js"><span class="token function">transform</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">{</span>rotateX<span class="token punctuation">:</span> <span class="token string">'45deg'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>rotateZ<span class="token punctuation">:</span> <span class="token string">'0.785398rad'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:</p>
|
||||
<p><code>transform([{ skewX: '45deg' }])</code></p>
|
||||
<pre><code class="hljs css language-js"><span class="token function">transform</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">{</span>skewX<span class="token punctuation">:</span> <span class="token string">'45deg'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>array of object: {perspective: number}, ,object: {rotate: string}, ,object: {rotateX: string}, ,object: {rotateY: string}, ,object: {rotateZ: string}, ,object: {scale: number}, ,object: {scaleX: number}, ,object: {scaleY: number}, ,object: {translateX: number}, ,object: {translateY: number}, ,object: {skewX: string}, ,object: {skewY: string}</td><td>No</td></tr>
|
||||
<tr><td>array of objects: {perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -471,15 +371,7 @@
|
||||
<blockquote>
|
||||
<p><strong>Deprecated.</strong> Use the <a href="transforms#transform"><code>transform</code></a> prop instead.</p>
|
||||
</blockquote>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.')</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/toastandroid"><span class="arrow-prev">← </span><span class="function-name-prevnext">ToastAndroid</span></a><a class="docs-next button" href="/docs/next/usewindowdimensions"><span class="function-name-prevnext">useWindowDimensions</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a></li><li><a href="#methods">Methods</a><ul class="toc-headings"><li><a href="#transform"><code>transform</code></a></li><li><a href="#decomposedmatrix-rotation-scalex-scaley-transformmatrix-translatex-translatey"><code>decomposedMatrix</code>, <code>rotation</code>, <code>scaleX</code>, <code>scaleY</code>, <code>transformMatrix</code>, <code>translateX</code>, <code>translateY</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started.html">Getting Started</a><a href="/docs/tutorial.html">Tutorial</a><a href="/docs/components-and-apis.html">Components and APIs</a><a href="/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/help.html">The React Native Community</a><a href="/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/toastandroid"><span class="arrow-prev">← </span><span class="function-name-prevnext">ToastAndroid</span></a><a class="docs-next button" href="/docs/next/usewindowdimensions"><span class="function-name-prevnext">useWindowDimensions</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a></li><li><a href="#methods">Methods</a><ul class="toc-headings"><li><a href="#transform"><code>transform()</code></a></li><li><a href="#decomposedmatrix-rotation-scalex-scaley-transformmatrix-translatex-translatey"><code>decomposedMatrix</code>, <code>rotation</code>, <code>scaleX</code>, <code>scaleY</code>, <code>transformMatrix</code>, <code>translateX</code>, <code>translateY</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started.html">Getting Started</a><a href="/docs/tutorial.html">Tutorial</a><a href="/docs/components-and-apis.html">Components and APIs</a><a href="/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/help.html">The React Native Community</a><a href="/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
Reference in new issue
Block a user