mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Updated docs for next
This commit is contained in:
Website Deployment Script
File diff suppressed because one or more lines are too long
@@ -2,9 +2,9 @@
|
||||
a controlled component, so you must hook in to the <code>onDateChange</code> callback
|
||||
and update the <code>date</code> prop in order for the component to update, otherwise
|
||||
the user's change will be reverted immediately to reflect <code>props.date</code> as the
|
||||
source of truth.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/datepickerios.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/datepickerios.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="date"></a>date?: <span class="propType">PropTypes.instanceOf(Date).isRequired</span> <a class="hash-link" href="docs/datepickerios.html#date">#</a></h4><div><p>The currently selected date.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maximumdate"></a>maximumDate?: <span class="propType">PropTypes.instanceOf(Date)</span> <a class="hash-link" href="docs/datepickerios.html#maximumdate">#</a></h4><div><p>Maximum date.</p><p>Restricts the range of possible date/time values.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumdate"></a>minimumDate?: <span class="propType">PropTypes.instanceOf(Date)</span> <a class="hash-link" href="docs/datepickerios.html#minimumdate">#</a></h4><div><p>Minimum date.</p><p>Restricts the range of possible date/time values.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minuteinterval"></a>minuteInterval?: <span class="propType">PropTypes.oneOf([1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30])</span> <a class="hash-link" href="docs/datepickerios.html#minuteinterval">#</a></h4><div><p>The interval at which minutes can be selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mode"></a>mode?: <span class="propType">PropTypes.oneOf(['date', 'time', 'datetime'])</span> <a class="hash-link" href="docs/datepickerios.html#mode">#</a></h4><div><p>The date picker mode.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondatechange"></a>onDateChange?: <span class="propType">PropTypes.func.isRequired</span> <a class="hash-link" href="docs/datepickerios.html#ondatechange">#</a></h4><div><p>Date change handler.</p><p>This is called when the user changes the date or time in the UI.
|
||||
source of truth.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/datepickerios.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/datepickerios.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="date"></a>date: <span class="propType">Date</span> <a class="hash-link" href="docs/datepickerios.html#date">#</a></h4><div><p>The currently selected date.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maximumdate"></a>maximumDate?: <span class="propType">Date</span> <a class="hash-link" href="docs/datepickerios.html#maximumdate">#</a></h4><div><p>Maximum date.</p><p>Restricts the range of possible date/time values.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumdate"></a>minimumDate?: <span class="propType">Date</span> <a class="hash-link" href="docs/datepickerios.html#minimumdate">#</a></h4><div><p>Minimum date.</p><p>Restricts the range of possible date/time values.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minuteinterval"></a>minuteInterval?: <span class="propType">enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30)</span> <a class="hash-link" href="docs/datepickerios.html#minuteinterval">#</a></h4><div><p>The interval at which minutes can be selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mode"></a>mode?: <span class="propType">enum('date', 'time', 'datetime')</span> <a class="hash-link" href="docs/datepickerios.html#mode">#</a></h4><div><p>The date picker mode.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondatechange"></a>onDateChange: <span class="propType">function</span> <a class="hash-link" href="docs/datepickerios.html#ondatechange">#</a></h4><div><p>Date change handler.</p><p>This is called when the user changes the date or time in the UI.
|
||||
The first and only argument is a Date object representing the new
|
||||
date and time.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="timezoneoffsetinminutes"></a>timeZoneOffsetInMinutes?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/datepickerios.html#timezoneoffsetinminutes">#</a></h4><div><p>Timezone offset in minutes.</p><p>By default, the date picker will use the device's timezone. With this
|
||||
date and time.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="timezoneoffsetinminutes"></a>timeZoneOffsetInMinutes?: <span class="propType">number</span> <a class="hash-link" href="docs/datepickerios.html#timezoneoffsetinminutes">#</a></h4><div><p>Timezone offset in minutes.</p><p>By default, the date picker will use the device's timezone. With this
|
||||
parameter, it is possible to force a certain timezone offset. For
|
||||
instance, to show times in Pacific Standard Time, pass -7 * 60.</p></div></div></div></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/DatePicker/DatePickerIOS.ios.js">edit the content above on GitHub</a> and send us a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/button.html#content">← Prev</a><a class="docs-next" href="docs/drawerlayoutandroid.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></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 © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
|
||||
@@ -75,7 +75,7 @@ ReactNativeBaseComponent.js</a>.</p><h2><a class="anchor" name="composite-compon
|
||||
must either be native or forward setNativeProps to a native component</code>.
|
||||
This occurs because <code>MyButton</code> isn't directly backed by a native view
|
||||
whose opacity should be set. You can think about it like this: if you
|
||||
define a component with <code>React.createClass</code> you would not expect to be
|
||||
define a component with <code>createReactClass</code> you would not expect to be
|
||||
able to set a style prop on it and have that work - you would need to
|
||||
pass the style prop down to a child, unless you are wrapping a native
|
||||
component. Similarly, we are going to forward <code>setNativeProps</code> to a
|
||||
|
||||
@@ -24,28 +24,18 @@ be set by the <code>drawerWidth</code> prop.</p><p>Example:</p><div class="prism
|
||||
If you want to set the opacity of the drawer, use rgba. Example:</p><div class="prism language-javascript"><span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<span class="token operator"><</span>DrawerLayoutAndroid drawerBackgroundColor<span class="token operator">=</span><span class="token string">"rgba(0,0,0,0.5)"</span><span class="token operator">></span>
|
||||
<span class="token operator"><</span><span class="token operator">/</span>DrawerLayoutAndroid<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="drawerlockmode"></a>drawerLockMode?: <span class="propType">PropTypes.oneOf([
|
||||
'unlocked',
|
||||
'locked-closed',
|
||||
'locked-open'
|
||||
])</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#drawerlockmode">#</a></h4><div><p>Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="drawerlockmode"></a>drawerLockMode?: <span class="propType">enum('unlocked', 'locked-closed', 'locked-open')</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#drawerlockmode">#</a></h4><div><p>Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
|
||||
- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
|
||||
- locked-closed, meaning that the drawer will stay closed and not respond to gestures.
|
||||
- locked-open, meaning that the drawer will stay opened and not respond to gestures.
|
||||
The drawer may still be opened and closed programmatically (<code>openDrawer</code>/<code>closeDrawer</code>).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="drawerposition"></a>drawerPosition?: <span class="propType">PropTypes.oneOf([
|
||||
DrawerConsts.DrawerPosition.Left,
|
||||
DrawerConsts.DrawerPosition.Right
|
||||
])</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#drawerposition">#</a></h4><div><p>Specifies the side of the screen from which the drawer will slide in.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="drawerwidth"></a>drawerWidth?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#drawerwidth">#</a></h4><div><p>Specifies the width of the drawer, more precisely the width of the view that be pulled in
|
||||
from the edge of the window.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboarddismissmode"></a>keyboardDismissMode?: <span class="propType">PropTypes.oneOf([
|
||||
'none', // default
|
||||
'on-drag',
|
||||
])</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#keyboarddismissmode">#</a></h4><div><p>Determines whether the keyboard gets dismissed in response to a drag.
|
||||
The drawer may still be opened and closed programmatically (<code>openDrawer</code>/<code>closeDrawer</code>).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="drawerposition"></a>drawerPosition?: <span class="propType">enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right)</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#drawerposition">#</a></h4><div><p>Specifies the side of the screen from which the drawer will slide in.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="drawerwidth"></a>drawerWidth?: <span class="propType">number</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#drawerwidth">#</a></h4><div><p>Specifies the width of the drawer, more precisely the width of the view that be pulled in
|
||||
from the edge of the window.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboarddismissmode"></a>keyboardDismissMode?: <span class="propType">enum('none', 'on-drag')</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#keyboarddismissmode">#</a></h4><div><p>Determines whether the keyboard gets dismissed in response to a drag.
|
||||
- 'none' (the default), drags do not dismiss the keyboard.
|
||||
- 'on-drag', the keyboard is dismissed when a drag begins.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondrawerclose"></a>onDrawerClose?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#ondrawerclose">#</a></h4><div><p>Function called whenever the navigation view has been closed.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondraweropen"></a>onDrawerOpen?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#ondraweropen">#</a></h4><div><p>Function called whenever the navigation view has been opened.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondrawerslide"></a>onDrawerSlide?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#ondrawerslide">#</a></h4><div><p>Function called whenever there is an interaction with the navigation view.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondrawerstatechanged"></a>onDrawerStateChanged?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#ondrawerstatechanged">#</a></h4><div><p>Function called when the drawer state has changed. The drawer can be in 3 states:
|
||||
- 'on-drag', the keyboard is dismissed when a drag begins.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondrawerclose"></a>onDrawerClose?: <span class="propType">function</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#ondrawerclose">#</a></h4><div><p>Function called whenever the navigation view has been closed.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondraweropen"></a>onDrawerOpen?: <span class="propType">function</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#ondraweropen">#</a></h4><div><p>Function called whenever the navigation view has been opened.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondrawerslide"></a>onDrawerSlide?: <span class="propType">function</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#ondrawerslide">#</a></h4><div><p>Function called whenever there is an interaction with the navigation view.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondrawerstatechanged"></a>onDrawerStateChanged?: <span class="propType">function</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#ondrawerstatechanged">#</a></h4><div><p>Function called when the drawer state has changed. The drawer can be in 3 states:
|
||||
- idle, meaning there is no interaction with the navigation view happening at the time
|
||||
- dragging, meaning there is currently an interaction with the navigation view
|
||||
- settling, meaning that there was an interaction with the navigation view, and the
|
||||
navigation view is now finishing its closing or opening animation</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendernavigationview"></a>renderNavigationView?: <span class="propType">PropTypes.func.isRequired</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#rendernavigationview">#</a></h4><div><p>The navigation view that will be rendered to the side of the screen and can be pulled in.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="statusbarbackgroundcolor"></a>statusBarBackgroundColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/drawerlayoutandroid.html#statusbarbackgroundcolor">#</a></h4><div><p>Make the drawer take the entire screen and draw the background of the
|
||||
navigation view is now finishing its closing or opening animation</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendernavigationview"></a>renderNavigationView: <span class="propType">function</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#rendernavigationview">#</a></h4><div><p>The navigation view that will be rendered to the side of the screen and can be pulled in.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="statusbarbackgroundcolor"></a>statusBarBackgroundColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/drawerlayoutandroid.html#statusbarbackgroundcolor">#</a></h4><div><p>Make the drawer take the entire screen and draw the background of the
|
||||
status bar to allow it to open over the status bar. It will only have an
|
||||
effect on API 21+.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/drawerlayoutandroid.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="opendrawer"></a>openDrawer<span class="methodType">()</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#opendrawer">#</a></h4><div><p>Opens the drawer.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="closedrawer"></a>closeDrawer<span class="methodType">()</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#closedrawer">#</a></h4><div><p>Closes the drawer.</p></div></div></div></span></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js">edit the content above on GitHub</a> and send us a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/datepickerios.html#content">← Prev</a><a class="docs-next" href="docs/flatlist.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></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 © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
|
||||
@@ -63,8 +63,8 @@ storage as well as one from network.</p><div class="web-player"><div class="pris
|
||||
</span> compile <span class="token string">'com.facebook.fresco:webpsupport:1.0.1'</span>
|
||||
<span class="token punctuation">}</span></div><p>Also, if you use GIF with ProGuard, you will need to add this rule in <code>proguard-rules.pro</code> :</p><div class="prism language-javascript"><span class="token operator">-</span>keep <span class="token keyword">class</span> <span class="token class-name">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>imagepipeline<span class="token punctuation">.</span>animated<span class="token punctuation">.</span>factory<span class="token punctuation">.</span>AnimatedFactoryImpl</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">public</span> <span class="token function">AnimatedFactoryImpl</span><span class="token punctuation">(</span>com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>imagepipeline<span class="token punctuation">.</span>bitmaps<span class="token punctuation">.</span>PlatformBitmapFactory<span class="token punctuation">,</span> com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>imagepipeline<span class="token punctuation">.</span>core<span class="token punctuation">.</span>ExecutorSupplier<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/image.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="blurradius"></a>blurRadius?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/image.html#blurradius">#</a></h4><div><p>blurRadius: the blur radius of the blur filter added to the image</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onerror"></a>onError?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/image.html#onerror">#</a></h4><div><p>Invoked on load error with <code>{nativeEvent: {error}}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/image.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with
|
||||
<code>{nativeEvent: {layout: {x, y, width, height}}}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onload"></a>onLoad?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/image.html#onload">#</a></h4><div><p>Invoked when load completes successfully.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onloadend"></a>onLoadEnd?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/image.html#onloadend">#</a></h4><div><p>Invoked when load either succeeds or fails.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onloadstart"></a>onLoadStart?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/image.html#onloadstart">#</a></h4><div><p>Invoked on load start.</p><p>e.g., <code>onLoadStart={(e) => this.setState({loading: true})}</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="resizemode"></a>resizeMode?: <span class="propType">PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])</span> <a class="hash-link" href="docs/image.html#resizemode">#</a></h4><div><p>Determines how to resize the image when the frame doesn't match the raw
|
||||
<span class="token punctuation">}</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/image.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="blurradius"></a>blurRadius?: <span class="propType">number</span> <a class="hash-link" href="docs/image.html#blurradius">#</a></h4><div><p>blurRadius: the blur radius of the blur filter added to the image</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onerror"></a>onError?: <span class="propType">function</span> <a class="hash-link" href="docs/image.html#onerror">#</a></h4><div><p>Invoked on load error with <code>{nativeEvent: {error}}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout?: <span class="propType">function</span> <a class="hash-link" href="docs/image.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with
|
||||
<code>{nativeEvent: {layout: {x, y, width, height}}}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onload"></a>onLoad?: <span class="propType">function</span> <a class="hash-link" href="docs/image.html#onload">#</a></h4><div><p>Invoked when load completes successfully.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onloadend"></a>onLoadEnd?: <span class="propType">function</span> <a class="hash-link" href="docs/image.html#onloadend">#</a></h4><div><p>Invoked when load either succeeds or fails.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onloadstart"></a>onLoadStart?: <span class="propType">function</span> <a class="hash-link" href="docs/image.html#onloadstart">#</a></h4><div><p>Invoked on load start.</p><p>e.g., <code>onLoadStart={(e) => this.setState({loading: true})}</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="resizemode"></a>resizeMode?: <span class="propType">enum('cover', 'contain', 'stretch', 'repeat', 'center')</span> <a class="hash-link" href="docs/image.html#resizemode">#</a></h4><div><p>Determines how to resize the image when the frame doesn't match the raw
|
||||
image dimensions.</p><ul><li><p><code>cover</code>: Scale the image uniformly (maintain the image's aspect ratio)
|
||||
so that both dimensions (width and height) of the image will be equal
|
||||
to or larger than the corresponding dimension of the view (minus padding).</p></li><li><p><code>contain</code>: Scale the image uniformly (maintain the image's aspect ratio)
|
||||
@@ -76,7 +76,7 @@ their width and height and potentially with scale/other URI arguments.
|
||||
The native side will then choose the best <code>uri</code> to display based on the
|
||||
measured size of the image container. A <code>cache</code> property can be added to
|
||||
control how networked request interacts with the local cache.</p><p>The currently supported formats are <code>png</code>, <code>jpg</code>, <code>jpeg</code>, <code>bmp</code>, <code>gif</code>,
|
||||
<code>webp</code> (Android only), <code>psd</code> (iOS only).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">style</span> <a class="hash-link" href="docs/image.html#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="docs/layout-props.html#props">Layout Props...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/shadow-props.html#props">Shadow Props...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/transforms.html#props">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">ReactPropTypes.oneOf(['visible', 'hidden'])</span> </h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomLeftRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopLeftRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">ReactPropTypes.oneOf(['visible', 'hidden'])</span> </h6></div><div class="prop"><h6 class="propTitle">resizeMode <span class="propType">ReactPropTypes.oneOf(Object.keys(ImageResizeMode))</span> </h6></div><div class="prop"><h6 class="propTitle">tintColor <span class="propType"><a href="docs/colors.html">color</a></span> <div><p>Changes the color of all the non-transparent pixels to the tintColor.</p></div></h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>overlayColor <span class="propType">ReactPropTypes.string</span> <div><p>When the image has rounded corners, specifying an overlayColor will
|
||||
<code>webp</code> (Android only), <code>psd</code> (iOS only).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">style</span> <a class="hash-link" href="docs/image.html#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="docs/layout-props.html#props">Layout Props...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/shadow-props.html#props">Shadow Props...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/transforms.html#props">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">enum('visible', 'hidden')</span> </h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">enum('visible', 'hidden')</span> </h6></div><div class="prop"><h6 class="propTitle">resizeMode <span class="propType">Object.keys(ImageResizeMode)</span> </h6></div><div class="prop"><h6 class="propTitle">tintColor <span class="propType"><a href="docs/colors.html">color</a></span> <div><p>Changes the color of all the non-transparent pixels to the tintColor.</p></div></h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>overlayColor <span class="propType">string</span> <div><p>When the image has rounded corners, specifying an overlayColor will
|
||||
cause the remaining space in the corners to be filled with a solid color.
|
||||
This is useful in cases which are not supported by the Android
|
||||
implementation of rounded corners:
|
||||
@@ -86,34 +86,25 @@ background and setting the <code>overlayColor</code> to the same color
|
||||
as the background.</p><p>For details of how this works under the hood, see
|
||||
<a href="http://frescolib.org/docs/rounded-corners-and-circles.html">http://frescolib.org/docs/rounded-corners-and-circles.html</a></p></div></h6></div></div><div><blockquote><p><code>ImageResizeMode</code> is an <code>Enum</code> for different image resizing modes, set via the
|
||||
<code>resizeMode</code> style property on <code>Image</code> components. The values are <code>contain</code>, <code>cover</code>,
|
||||
<code>stretch</code>, <code>center</code>, <code>repeat</code>.</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/image.html#testid">#</a></h4><div><p>A unique identifier for this element to be used in UI Automation
|
||||
testing scripts.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="resizemethod"></a><span class="platform">android</span>resizeMethod?: <span class="propType">PropTypes.oneOf(['auto', 'resize', 'scale'])</span> <a class="hash-link" href="docs/image.html#resizemethod">#</a></h4><div><p>The mechanism that should be used to resize the image when the image's dimensions
|
||||
<code>stretch</code>, <code>center</code>, <code>repeat</code>.</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">string</span> <a class="hash-link" href="docs/image.html#testid">#</a></h4><div><p>A unique identifier for this element to be used in UI Automation
|
||||
testing scripts.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="resizemethod"></a><span class="platform">android</span>resizeMethod?: <span class="propType">enum('auto', 'resize', 'scale')</span> <a class="hash-link" href="docs/image.html#resizemethod">#</a></h4><div><p>The mechanism that should be used to resize the image when the image's dimensions
|
||||
differ from the image view's dimensions. Defaults to <code>auto</code>.</p><ul><li><p><code>auto</code>: Use heuristics to pick between <code>resize</code> and <code>scale</code>.</p></li><li><p><code>resize</code>: A software operation which changes the encoded image in memory before it
|
||||
gets decoded. This should be used instead of <code>scale</code> when the image is much larger
|
||||
than the view.</p></li><li><p><code>scale</code>: The image gets drawn downscaled or upscaled. Compared to <code>resize</code>, <code>scale</code> is
|
||||
faster (usually hardware accelerated) and produces higher quality images. This
|
||||
should be used if the image is smaller than the view. It should also be used if the
|
||||
image is slightly bigger than the view.</p></li></ul><p>More details about <code>resize</code> and <code>scale</code> can be found at <a href="http://frescolib.org/docs/resizing-rotating.html">http://frescolib.org/docs/resizing-rotating.html</a>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitylabel"></a><span class="platform">ios</span>accessibilityLabel?: <span class="propType">PropTypes.node</span> <a class="hash-link" href="docs/image.html#accessibilitylabel">#</a></h4><div><p>The text that's read by the screen reader when the user interacts with
|
||||
the image.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a><span class="platform">ios</span>accessible?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/image.html#accessible">#</a></h4><div><p>When true, indicates the image is an accessibility element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="capinsets"></a><span class="platform">ios</span>capInsets?: <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/image.html#capinsets">#</a></h4><div><p>When the image is resized, the corners of the size specified
|
||||
image is slightly bigger than the view.</p></li></ul><p>More details about <code>resize</code> and <code>scale</code> can be found at <a href="http://frescolib.org/docs/resizing-rotating.html">http://frescolib.org/docs/resizing-rotating.html</a>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitylabel"></a><span class="platform">ios</span>accessibilityLabel?: <span class="propType">node</span> <a class="hash-link" href="docs/image.html#accessibilitylabel">#</a></h4><div><p>The text that's read by the screen reader when the user interacts with
|
||||
the image.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a><span class="platform">ios</span>accessible?: <span class="propType">bool</span> <a class="hash-link" href="docs/image.html#accessible">#</a></h4><div><p>When true, indicates the image is an accessibility element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="capinsets"></a><span class="platform">ios</span>capInsets?: <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/image.html#capinsets">#</a></h4><div><p>When the image is resized, the corners of the size specified
|
||||
by <code>capInsets</code> will stay a fixed size, but the center content and borders
|
||||
of the image will be stretched. This is useful for creating resizable
|
||||
rounded buttons, shadows, and other resizable assets. More info in the
|
||||
<a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets" target="_blank">official Apple documentation</a>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="defaultsource"></a><span class="platform">ios</span>defaultSource?: <span class="propType">PropTypes.oneOfType([
|
||||
// TODO: Tooling to support documenting these directly and having them display in the docs.
|
||||
PropTypes.shape({
|
||||
uri: PropTypes.string,
|
||||
width: PropTypes.number,
|
||||
height: PropTypes.number,
|
||||
scale: PropTypes.number,
|
||||
}),
|
||||
PropTypes.number,
|
||||
])</span> <a class="hash-link" href="docs/image.html#defaultsource">#</a></h4><div><p>A static image to display while loading the image source.</p><ul><li><code>uri</code> - a string representing the resource identifier for the image, which
|
||||
<a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets" target="_blank">official Apple documentation</a>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="defaultsource"></a><span class="platform">ios</span>defaultSource?: <span class="propType"><span><span><span>{<span><span><span>uri: string</span>, </span><span><span>width: number</span>, </span><span><span>height: number</span>, </span><span>scale: number</span></span>}</span>, </span>number</span></span> <a class="hash-link" href="docs/image.html#defaultsource">#</a></h4><div><p>A static image to display while loading the image source.</p><ul><li><code>uri</code> - a string representing the resource identifier for the image, which
|
||||
should be either a local file path or the name of a static image resource
|
||||
(which should be wrapped in the <code>require('./path/to/image.png')</code> function).</li><li><code>width</code>, <code>height</code> - can be specified if known at build time, in which case
|
||||
these will be used to set the default <code><Image/></code> component dimensions.</li><li><code>scale</code> - used to indicate the scale factor of the image. Defaults to 1.0 if
|
||||
unspecified, meaning that one image pixel equates to one display point / DIP.</li><li><code>number</code> - Opaque type returned by something like <code>require('./image.jpg')</code>.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpartialload"></a><span class="platform">ios</span>onPartialLoad?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/image.html#onpartialload">#</a></h4><div><p>Invoked when a partial load of the image is complete. The definition of
|
||||
unspecified, meaning that one image pixel equates to one display point / DIP.</li><li><code>number</code> - Opaque type returned by something like <code>require('./image.jpg')</code>.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpartialload"></a><span class="platform">ios</span>onPartialLoad?: <span class="propType">function</span> <a class="hash-link" href="docs/image.html#onpartialload">#</a></h4><div><p>Invoked when a partial load of the image is complete. The definition of
|
||||
what constitutes a "partial load" is loader specific though this is meant
|
||||
for progressive JPEG loads.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onprogress"></a><span class="platform">ios</span>onProgress?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/image.html#onprogress">#</a></h4><div><p>Invoked on download progress with <code>{nativeEvent: {loaded, total}}</code>.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/image.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getsize"></a><span class="methodType">static </span>getSize<span class="methodType">(uri: string, success: function, failure?: function): </span> <a class="hash-link" href="docs/image.html#getsize">#</a></h4><div><p>Retrieve the width and height (in pixels) of an image prior to displaying it.
|
||||
for progressive JPEG loads.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onprogress"></a><span class="platform">ios</span>onProgress?: <span class="propType">function</span> <a class="hash-link" href="docs/image.html#onprogress">#</a></h4><div><p>Invoked on download progress with <code>{nativeEvent: {loaded, total}}</code>.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/image.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getsize"></a><span class="methodType">static </span>getSize<span class="methodType">(uri: string, success: function, failure?: function): </span> <a class="hash-link" href="docs/image.html#getsize">#</a></h4><div><p>Retrieve the width and height (in pixels) of an image prior to displaying it.
|
||||
This method can fail if the image cannot be found, or fails to download.</p><p>In order to retrieve the image dimensions, the image may first need to be
|
||||
loaded or downloaded, after which it will be cached. This means that in
|
||||
principle you could use this method to preload images, however it is not
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -35,42 +35,42 @@ data source tells the ListView if it needs to re-render a row because the
|
||||
source data has changed - see ListViewDataSource for more details.</p></li><li><p>Rate-limited row rendering - By default, only one row is rendered per
|
||||
event-loop (customizable with the <code>pageSize</code> prop). This breaks up the
|
||||
work into smaller chunks to reduce the chance of dropping frames while
|
||||
rendering rows.</p></li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/listview.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollview"></a><a href="docs/scrollview.html#props">ScrollView props...</a> <a class="hash-link" href="docs/listview.html#scrollview">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="datasource"></a>dataSource?: <span class="propType">PropTypes.instanceOf(ListViewDataSource).isRequired</span> <a class="hash-link" href="docs/listview.html#datasource">#</a></h4><div><p>An instance of <a href="docs/listviewdatasource.html" target="_blank">ListView.DataSource</a> to use</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="enableemptysections"></a>enableEmptySections?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/listview.html#enableemptysections">#</a></h4><div><p>Flag indicating whether empty section headers should be rendered. In the future release
|
||||
rendering rows.</p></li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/listview.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollview"></a><a href="docs/scrollview.html#props">ScrollView props...</a> <a class="hash-link" href="docs/listview.html#scrollview">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="datasource"></a>dataSource: <span class="propType">ListViewDataSource</span> <a class="hash-link" href="docs/listview.html#datasource">#</a></h4><div><p>An instance of <a href="docs/listviewdatasource.html" target="_blank">ListView.DataSource</a> to use</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="enableemptysections"></a>enableEmptySections?: <span class="propType">bool</span> <a class="hash-link" href="docs/listview.html#enableemptysections">#</a></h4><div><p>Flag indicating whether empty section headers should be rendered. In the future release
|
||||
empty section headers will be rendered by default, and the flag will be deprecated.
|
||||
If empty sections are not desired to be rendered their indices should be excluded from sectionID object.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initiallistsize"></a>initialListSize?: <span class="propType">PropTypes.number.isRequired</span> <a class="hash-link" href="docs/listview.html#initiallistsize">#</a></h4><div><p>How many rows to render on initial component mount. Use this to make
|
||||
If empty sections are not desired to be rendered their indices should be excluded from sectionID object.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initiallistsize"></a>initialListSize: <span class="propType">number</span> <a class="hash-link" href="docs/listview.html#initiallistsize">#</a></h4><div><p>How many rows to render on initial component mount. Use this to make
|
||||
it so that the first screen worth of data appears at one time instead of
|
||||
over the course of multiple frames.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchangevisiblerows"></a>onChangeVisibleRows?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/listview.html#onchangevisiblerows">#</a></h4><div><p>(visibleRows, changedRows) => void</p><p>Called when the set of visible rows changes. <code>visibleRows</code> maps
|
||||
over the course of multiple frames.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchangevisiblerows"></a>onChangeVisibleRows?: <span class="propType">function</span> <a class="hash-link" href="docs/listview.html#onchangevisiblerows">#</a></h4><div><p>(visibleRows, changedRows) => void</p><p>Called when the set of visible rows changes. <code>visibleRows</code> maps
|
||||
{ sectionID: { rowID: true }} for all the visible rows, and
|
||||
<code>changedRows</code> maps { sectionID: { rowID: true | false }} for the rows
|
||||
that have changed their visibility, with true indicating visible, and
|
||||
false indicating the view has moved out of view.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendreached"></a>onEndReached?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/listview.html#onendreached">#</a></h4><div><p>Called when all rows have been rendered and the list has been scrolled
|
||||
false indicating the view has moved out of view.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendreached"></a>onEndReached?: <span class="propType">function</span> <a class="hash-link" href="docs/listview.html#onendreached">#</a></h4><div><p>Called when all rows have been rendered and the list has been scrolled
|
||||
to within onEndReachedThreshold of the bottom. The native scroll
|
||||
event is provided.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendreachedthreshold"></a>onEndReachedThreshold?: <span class="propType">PropTypes.number.isRequired</span> <a class="hash-link" href="docs/listview.html#onendreachedthreshold">#</a></h4><div><p>Threshold in pixels (virtual, not physical) for calling onEndReached.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pagesize"></a>pageSize?: <span class="propType">PropTypes.number.isRequired</span> <a class="hash-link" href="docs/listview.html#pagesize">#</a></h4><div><p>Number of rows to render per event loop. Note: if your 'rows' are actually
|
||||
event is provided.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendreachedthreshold"></a>onEndReachedThreshold: <span class="propType">number</span> <a class="hash-link" href="docs/listview.html#onendreachedthreshold">#</a></h4><div><p>Threshold in pixels (virtual, not physical) for calling onEndReached.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pagesize"></a>pageSize: <span class="propType">number</span> <a class="hash-link" href="docs/listview.html#pagesize">#</a></h4><div><p>Number of rows to render per event loop. Note: if your 'rows' are actually
|
||||
cells, i.e. they don't span the full width of your view (as in the
|
||||
ListViewGridLayoutExample), you should set the pageSize to be a multiple
|
||||
of the number of cells per row, otherwise you're likely to see gaps at
|
||||
the edge of the ListView as new pages are loaded.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/listview.html#removeclippedsubviews">#</a></h4><div><p>A performance optimization for improving scroll perf of
|
||||
the edge of the ListView as new pages are loaded.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews?: <span class="propType">bool</span> <a class="hash-link" href="docs/listview.html#removeclippedsubviews">#</a></h4><div><p>A performance optimization for improving scroll perf of
|
||||
large lists, used in conjunction with overflow: 'hidden' on the row
|
||||
containers. This is enabled by default.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderfooter"></a>renderFooter?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/listview.html#renderfooter">#</a></h4><div><p>() => renderable</p><p>The header and footer are always rendered (if these props are provided)
|
||||
containers. This is enabled by default.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderfooter"></a>renderFooter?: <span class="propType">function</span> <a class="hash-link" href="docs/listview.html#renderfooter">#</a></h4><div><p>() => renderable</p><p>The header and footer are always rendered (if these props are provided)
|
||||
on every render pass. If they are expensive to re-render, wrap them
|
||||
in StaticContainer or other mechanism as appropriate. Footer is always
|
||||
at the bottom of the list, and header at the top, on every render pass.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderheader"></a>renderHeader?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/listview.html#renderheader">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderrow"></a>renderRow?: <span class="propType">PropTypes.func.isRequired</span> <a class="hash-link" href="docs/listview.html#renderrow">#</a></h4><div><p>(rowData, sectionID, rowID, highlightRow) => renderable</p><p>Takes a data entry from the data source and its ids and should return
|
||||
at the bottom of the list, and header at the top, on every render pass.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderheader"></a>renderHeader?: <span class="propType">function</span> <a class="hash-link" href="docs/listview.html#renderheader">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderrow"></a>renderRow: <span class="propType">function</span> <a class="hash-link" href="docs/listview.html#renderrow">#</a></h4><div><p>(rowData, sectionID, rowID, highlightRow) => renderable</p><p>Takes a data entry from the data source and its ids and should return
|
||||
a renderable component to be rendered as the row. By default the data
|
||||
is exactly what was put into the data source, but it's also possible to
|
||||
provide custom extractors. ListView can be notified when a row is
|
||||
being highlighted by calling <code>highlightRow(sectionID, rowID)</code>. This
|
||||
sets a boolean value of adjacentRowHighlighted in renderSeparator, allowing you
|
||||
to control the separators above and below the highlighted row. The highlighted
|
||||
state of a row can be reset by calling highlightRow(null).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderscrollcomponent"></a>renderScrollComponent?: <span class="propType">PropTypes.func.isRequired</span> <a class="hash-link" href="docs/listview.html#renderscrollcomponent">#</a></h4><div><p>(props) => renderable</p><p>A function that returns the scrollable component in which the list rows
|
||||
are rendered. Defaults to returning a ScrollView with the given props.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendersectionheader"></a>renderSectionHeader?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/listview.html#rendersectionheader">#</a></h4><div><p>(sectionData, sectionID) => renderable</p><p>If provided, a header is rendered for this section.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderseparator"></a>renderSeparator?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/listview.html#renderseparator">#</a></h4><div><p>(sectionID, rowID, adjacentRowHighlighted) => renderable</p><p>If provided, a renderable component to be rendered as the separator
|
||||
state of a row can be reset by calling highlightRow(null).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderscrollcomponent"></a>renderScrollComponent: <span class="propType">function</span> <a class="hash-link" href="docs/listview.html#renderscrollcomponent">#</a></h4><div><p>(props) => renderable</p><p>A function that returns the scrollable component in which the list rows
|
||||
are rendered. Defaults to returning a ScrollView with the given props.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendersectionheader"></a>renderSectionHeader?: <span class="propType">function</span> <a class="hash-link" href="docs/listview.html#rendersectionheader">#</a></h4><div><p>(sectionData, sectionID) => renderable</p><p>If provided, a header is rendered for this section.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderseparator"></a>renderSeparator?: <span class="propType">function</span> <a class="hash-link" href="docs/listview.html#renderseparator">#</a></h4><div><p>(sectionID, rowID, adjacentRowHighlighted) => renderable</p><p>If provided, a renderable component to be rendered as the separator
|
||||
below each row but not the last row if there is a section header below.
|
||||
Take a sectionID and rowID of the row above and whether its adjacent row
|
||||
is highlighted.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollrenderaheaddistance"></a>scrollRenderAheadDistance?: <span class="propType">PropTypes.number.isRequired</span> <a class="hash-link" href="docs/listview.html#scrollrenderaheaddistance">#</a></h4><div><p>How early to start rendering rows before they come on screen, in
|
||||
pixels.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stickyheaderindices"></a>stickyHeaderIndices?: <span class="propType">PropTypes.arrayOf(PropTypes.number).isRequired</span> <a class="hash-link" href="docs/listview.html#stickyheaderindices">#</a></h4><div><p>An array of child indices determining which children get docked to the
|
||||
is highlighted.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollrenderaheaddistance"></a>scrollRenderAheadDistance: <span class="propType">number</span> <a class="hash-link" href="docs/listview.html#scrollrenderaheaddistance">#</a></h4><div><p>How early to start rendering rows before they come on screen, in
|
||||
pixels.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stickyheaderindices"></a>stickyHeaderIndices: <span class="propType"><span>[number]</span></span> <a class="hash-link" href="docs/listview.html#stickyheaderindices">#</a></h4><div><p>An array of child indices determining which children get docked to the
|
||||
top of the screen when scrolling. For example, passing
|
||||
<code>stickyHeaderIndices={[0]}</code> will cause the first child to be fixed to the
|
||||
top of the scroll view. This property is not supported in conjunction
|
||||
with <code>horizontal={true}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stickysectionheadersenabled"></a>stickySectionHeadersEnabled?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/listview.html#stickysectionheadersenabled">#</a></h4><div><p>Makes the sections headers sticky. The sticky behavior means that it
|
||||
with <code>horizontal={true}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stickysectionheadersenabled"></a>stickySectionHeadersEnabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/listview.html#stickysectionheadersenabled">#</a></h4><div><p>Makes the sections headers sticky. The sticky behavior means that it
|
||||
will scroll with the content at the top of the section until it reaches
|
||||
the top of the screen, at which point it will stick to the top until it
|
||||
is pushed off the screen by the next section header. This property is
|
||||
|
||||
@@ -44,9 +44,9 @@ then consider using a top-level Navigator.</em></p><div class="prism language-ja
|
||||
<span class="token operator"><</span><span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/modal.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="animated"></a>animated?: <span class="propType">bool</span> <a class="hash-link" href="docs/modal.html#animated">#</a></h4><div class="deprecated"><div class="deprecatedTitle"><img class="deprecatedIcon" src="img/Warning.png"><span>Deprecated</span></div><div class="deprecatedMessage"><div><p>Use the <code>animationType</code> prop instead.</p></div></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="animationtype"></a>animationType?: <span class="propType">PropTypes.oneOf(['none', 'slide', 'fade'])</span> <a class="hash-link" href="docs/modal.html#animationtype">#</a></h4><div><p>The <code>animationType</code> prop controls how the modal animates.</p><ul><li><code>slide</code> slides in from the bottom</li><li><code>fade</code> fades into view</li><li><code>none</code> appears without an animation</li></ul><p>Default is set to <code>none</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onshow"></a>onShow?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/modal.html#onshow">#</a></h4><div><p>The <code>onShow</code> prop allows passing a function that will be called once the modal has been shown.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="transparent"></a>transparent?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/modal.html#transparent">#</a></h4><div><p>The <code>transparent</code> prop determines whether your modal will fill the entire view. Setting this to <code>true</code> will render the modal over a transparent background.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="visible"></a>visible?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/modal.html#visible">#</a></h4><div><p>The <code>visible</code> prop determines whether your modal is visible.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="hardwareaccelerated"></a><span class="platform">android</span>hardwareAccelerated?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/modal.html#hardwareaccelerated">#</a></h4><div><p>The <code>hardwareAccelerated</code> prop controls whether to force hardware acceleration for the underlying window.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrequestclose"></a><span class="platform">android</span>onRequestClose?: <span class="propType">Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func</span> <a class="hash-link" href="docs/modal.html#onrequestclose">#</a></h4><div><p>The <code>onRequestClose</code> callback is called when the user taps the hardware back button.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onorientationchange"></a><span class="platform">ios</span>onOrientationChange?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/modal.html#onorientationchange">#</a></h4><div><p>The <code>onOrientationChange</code> callback is called when the orientation changes while the modal is being displayed.
|
||||
The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="presentationstyle"></a><span class="platform">ios</span>presentationStyle?: <span class="propType">PropTypes.oneOf(['fullScreen', 'pageSheet', 'formSheet', 'overFullScreen'])</span> <a class="hash-link" href="docs/modal.html#presentationstyle">#</a></h4><div><p>The <code>presentationStyle</code> prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones).
|
||||
See <a href="https://developer.apple.com/reference/uikit/uimodalpresentationstyle">https://developer.apple.com/reference/uikit/uimodalpresentationstyle</a> for details.</p><ul><li><code>fullScreen</code> covers the screen completely</li><li><code>pageSheet</code> covers portrait-width view centered (only on larger devices)</li><li><code>formSheet</code> covers narrow-width view centered (only on larger devices)</li><li><code>overFullScreen</code> covers the screen completely, but allows transparency</li></ul><p>Default is set to <code>overFullScreen</code> or <code>fullScreen</code> depending on <code>transparent</code> property.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="supportedorientations"></a><span class="platform">ios</span>supportedOrientations?: <span class="propType">PropTypes.arrayOf(PropTypes.oneOf(['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']))</span> <a class="hash-link" href="docs/modal.html#supportedorientations">#</a></h4><div><p>The <code>supportedOrientations</code> prop allows the modal to be rotated to any of the specified orientations.
|
||||
<span class="token punctuation">}</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/modal.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="animated"></a>animated?: <span class="propType">bool</span> <a class="hash-link" href="docs/modal.html#animated">#</a></h4><div class="deprecated"><div class="deprecatedTitle"><img class="deprecatedIcon" src="img/Warning.png"><span>Deprecated</span></div><div class="deprecatedMessage"><div><p>Use the <code>animationType</code> prop instead.</p></div></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="animationtype"></a>animationType?: <span class="propType">enum('none', 'slide', 'fade')</span> <a class="hash-link" href="docs/modal.html#animationtype">#</a></h4><div><p>The <code>animationType</code> prop controls how the modal animates.</p><ul><li><code>slide</code> slides in from the bottom</li><li><code>fade</code> fades into view</li><li><code>none</code> appears without an animation</li></ul><p>Default is set to <code>none</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onshow"></a>onShow?: <span class="propType">function</span> <a class="hash-link" href="docs/modal.html#onshow">#</a></h4><div><p>The <code>onShow</code> prop allows passing a function that will be called once the modal has been shown.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="transparent"></a>transparent?: <span class="propType">bool</span> <a class="hash-link" href="docs/modal.html#transparent">#</a></h4><div><p>The <code>transparent</code> prop determines whether your modal will fill the entire view. Setting this to <code>true</code> will render the modal over a transparent background.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="visible"></a>visible?: <span class="propType">bool</span> <a class="hash-link" href="docs/modal.html#visible">#</a></h4><div><p>The <code>visible</code> prop determines whether your modal is visible.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="hardwareaccelerated"></a><span class="platform">android</span>hardwareAccelerated?: <span class="propType">bool</span> <a class="hash-link" href="docs/modal.html#hardwareaccelerated">#</a></h4><div><p>The <code>hardwareAccelerated</code> prop controls whether to force hardware acceleration for the underlying window.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrequestclose"></a><span class="platform">android</span>onRequestClose?: <span class="propType">Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func</span> <a class="hash-link" href="docs/modal.html#onrequestclose">#</a></h4><div><p>The <code>onRequestClose</code> callback is called when the user taps the hardware back button.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onorientationchange"></a><span class="platform">ios</span>onOrientationChange?: <span class="propType">function</span> <a class="hash-link" href="docs/modal.html#onorientationchange">#</a></h4><div><p>The <code>onOrientationChange</code> callback is called when the orientation changes while the modal is being displayed.
|
||||
The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="presentationstyle"></a><span class="platform">ios</span>presentationStyle?: <span class="propType">enum('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen')</span> <a class="hash-link" href="docs/modal.html#presentationstyle">#</a></h4><div><p>The <code>presentationStyle</code> prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones).
|
||||
See <a href="https://developer.apple.com/reference/uikit/uimodalpresentationstyle">https://developer.apple.com/reference/uikit/uimodalpresentationstyle</a> for details.</p><ul><li><code>fullScreen</code> covers the screen completely</li><li><code>pageSheet</code> covers portrait-width view centered (only on larger devices)</li><li><code>formSheet</code> covers narrow-width view centered (only on larger devices)</li><li><code>overFullScreen</code> covers the screen completely, but allows transparency</li></ul><p>Default is set to <code>overFullScreen</code> or <code>fullScreen</code> depending on <code>transparent</code> property.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="supportedorientations"></a><span class="platform">ios</span>supportedOrientations?: <span class="propType"><span>[enum('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right')]</span></span> <a class="hash-link" href="docs/modal.html#supportedorientations">#</a></h4><div><p>The <code>supportedOrientations</code> prop allows the modal to be rotated to any of the specified orientations.
|
||||
On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.
|
||||
When using <code>presentationStyle</code> of <code>pageSheet</code> or <code>formSheet</code>, this property will be ignored by iOS.</p></div></div></div></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Modal/Modal.js">edit the content above on GitHub</a> and send us a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/listview.html#content">← Prev</a><a class="docs-next" href="docs/navigatorios.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></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 © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -13,7 +13,7 @@ that the app is loading or there is some activity in the app.</p><p>Example:</p>
|
||||
<span class="token operator">/</span><span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/progressbarandroid.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/progressbarandroid.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="color"></a>color?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/progressbarandroid.html#color">#</a></h4><div><p>Color of the progress bar.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="indeterminate"></a>indeterminate?: <span class="propType">indeterminateType</span> <a class="hash-link" href="docs/progressbarandroid.html#indeterminate">#</a></h4><div><p>If the progress bar will show indeterminate progress. Note that this
|
||||
can only be false if styleAttr is Horizontal.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progress"></a>progress?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/progressbarandroid.html#progress">#</a></h4><div><p>The progress value (between 0 and 1).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="styleattr"></a>styleAttr?: <span class="propType">PropTypes.oneOf(STYLE_ATTRIBUTES)</span> <a class="hash-link" href="docs/progressbarandroid.html#styleattr">#</a></h4><div><p>Style of the ProgressBar. One of:</p><ul><li>Horizontal</li><li>Normal (default)</li><li>Small</li><li>Large</li><li>Inverse</li><li>SmallInverse</li><li>LargeInverse</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/progressbarandroid.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div></div></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js">edit the content above on GitHub</a> and send us a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/pickerios.html#content">← Prev</a><a class="docs-next" href="docs/progressviewios.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></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 © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
can only be false if styleAttr is Horizontal.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progress"></a>progress?: <span class="propType">number</span> <a class="hash-link" href="docs/progressbarandroid.html#progress">#</a></h4><div><p>The progress value (between 0 and 1).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="styleattr"></a>styleAttr?: <span class="propType">enum('Horizontal', 'Normal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse')</span> <a class="hash-link" href="docs/progressbarandroid.html#styleattr">#</a></h4><div><p>Style of the ProgressBar. One of:</p><ul><li>Horizontal</li><li>Normal (default)</li><li>Small</li><li>Large</li><li>Inverse</li><li>SmallInverse</li><li>LargeInverse</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">string</span> <a class="hash-link" href="docs/progressbarandroid.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div></div></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js">edit the content above on GitHub</a> and send us a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/pickerios.html#content">← Prev</a><a class="docs-next" href="docs/progressviewios.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></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 © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -25,81 +25,66 @@ wraps all of the child views. Example:</p><div class="prism language-javascript"
|
||||
contentContainer<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
paddingVertical<span class="token punctuation">:</span> <span class="token number">20</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="horizontal"></a>horizontal?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/scrollview.html#horizontal">#</a></h4><div><p>When true, the scroll view's children are arranged horizontally in a row
|
||||
instead of vertically in a column. The default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboarddismissmode"></a>keyboardDismissMode?: <span class="propType">PropTypes.oneOf([
|
||||
'none', // default
|
||||
'interactive',
|
||||
'on-drag',
|
||||
])</span> <a class="hash-link" href="docs/scrollview.html#keyboarddismissmode">#</a></h4><div><p>Determines whether the keyboard gets dismissed in response to a drag.</p><ul><li><code>'none'</code> (the default), drags do not dismiss the keyboard.</li><li><code>'on-drag'</code>, the keyboard is dismissed when a drag begins.</li><li><code>'interactive'</code>, the keyboard is dismissed interactively with the drag and moves in
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="horizontal"></a>horizontal?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#horizontal">#</a></h4><div><p>When true, the scroll view's children are arranged horizontally in a row
|
||||
instead of vertically in a column. The default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboarddismissmode"></a>keyboardDismissMode?: <span class="propType">enum('none', 'interactive', 'on-drag')</span> <a class="hash-link" href="docs/scrollview.html#keyboarddismissmode">#</a></h4><div><p>Determines whether the keyboard gets dismissed in response to a drag.</p><ul><li><code>'none'</code> (the default), drags do not dismiss the keyboard.</li><li><code>'on-drag'</code>, the keyboard is dismissed when a drag begins.</li><li><code>'interactive'</code>, the keyboard is dismissed interactively with the drag and moves in
|
||||
synchrony with the touch; dragging upwards cancels the dismissal.
|
||||
On android this is not supported and it will have the same behavior as 'none'.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboardshouldpersisttaps"></a>keyboardShouldPersistTaps?: <span class="propType">PropTypes.oneOf(['always', 'never', 'handled', false, true])</span> <a class="hash-link" href="docs/scrollview.html#keyboardshouldpersisttaps">#</a></h4><div><p>Determines when the keyboard should stay visible after a tap.</p><ul><li><code>'never'</code> (the default), tapping outside of the focused text input when the keyboard
|
||||
On android this is not supported and it will have the same behavior as 'none'.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboardshouldpersisttaps"></a>keyboardShouldPersistTaps?: <span class="propType">enum('always', 'never', 'handled', false, true)</span> <a class="hash-link" href="docs/scrollview.html#keyboardshouldpersisttaps">#</a></h4><div><p>Determines when the keyboard should stay visible after a tap.</p><ul><li><code>'never'</code> (the default), tapping outside of the focused text input when the keyboard
|
||||
is up dismisses the keyboard. When this happens, children won't receive the tap.</li><li><code>'always'</code>, the keyboard will not dismiss automatically, and the scroll view will not
|
||||
catch taps, but children of the scroll view can catch taps.</li><li><code>'handled'</code>, the keyboard will not dismiss automatically when the tap was handled by
|
||||
a children, (or captured by an ancestor).</li><li><code>false</code>, deprecated, use 'never' instead</li><li><code>true</code>, deprecated, use 'always' instead</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="oncontentsizechange"></a>onContentSizeChange?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/scrollview.html#oncontentsizechange">#</a></h4><div><p>Called when scrollable content view of the ScrollView changes.</p><p>Handler function is passed the content width and content height as parameters:
|
||||
a children, (or captured by an ancestor).</li><li><code>false</code>, deprecated, use 'never' instead</li><li><code>true</code>, deprecated, use 'always' instead</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="oncontentsizechange"></a>onContentSizeChange?: <span class="propType">function</span> <a class="hash-link" href="docs/scrollview.html#oncontentsizechange">#</a></h4><div><p>Called when scrollable content view of the ScrollView changes.</p><p>Handler function is passed the content width and content height as parameters:
|
||||
<code>(contentWidth, contentHeight)</code></p><p>It's implemented using onLayout handler attached to the content container
|
||||
which this ScrollView renders.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onscroll"></a>onScroll?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/scrollview.html#onscroll">#</a></h4><div><p>Fires at most once per frame during scrolling. The frequency of the
|
||||
events can be controlled using the <code>scrollEventThrottle</code> prop.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pagingenabled"></a>pagingEnabled?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/scrollview.html#pagingenabled">#</a></h4><div><p>When true, the scroll view stops on multiples of the scroll view's size
|
||||
which this ScrollView renders.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onscroll"></a>onScroll?: <span class="propType">function</span> <a class="hash-link" href="docs/scrollview.html#onscroll">#</a></h4><div><p>Fires at most once per frame during scrolling. The frequency of the
|
||||
events can be controlled using the <code>scrollEventThrottle</code> prop.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pagingenabled"></a>pagingEnabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#pagingenabled">#</a></h4><div><p>When true, the scroll view stops on multiples of the scroll view's size
|
||||
when scrolling. This can be used for horizontal pagination. The default
|
||||
value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="refreshcontrol"></a>refreshControl?: <span class="propType">PropTypes.element</span> <a class="hash-link" href="docs/scrollview.html#refreshcontrol">#</a></h4><div><p>A RefreshControl component, used to provide pull-to-refresh
|
||||
value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="refreshcontrol"></a>refreshControl?: <span class="propType">element</span> <a class="hash-link" href="docs/scrollview.html#refreshcontrol">#</a></h4><div><p>A RefreshControl component, used to provide pull-to-refresh
|
||||
functionality for the ScrollView. Only works for vertical ScrollViews
|
||||
(<code>horizontal</code> prop must be <code>false</code>).</p><p>See <a href="docs/refreshcontrol.html" target="_blank">RefreshControl</a>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/scrollview.html#removeclippedsubviews">#</a></h4><div><p>Experimental: When true, offscreen child views (whose <code>overflow</code> value is
|
||||
(<code>horizontal</code> prop must be <code>false</code>).</p><p>See <a href="docs/refreshcontrol.html" target="_blank">RefreshControl</a>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#removeclippedsubviews">#</a></h4><div><p>Experimental: When true, offscreen child views (whose <code>overflow</code> value is
|
||||
<code>hidden</code>) are removed from their native backing superview when offscreen.
|
||||
This can improve scrolling performance on long lists. The default value is
|
||||
true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollenabled"></a>scrollEnabled?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/scrollview.html#scrollenabled">#</a></h4><div><p>When false, the view cannot be scrolled via touch interaction.
|
||||
The default value is true.</p><p>Note that the view can be always be scrolled by calling <code>scrollTo</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showshorizontalscrollindicator"></a>showsHorizontalScrollIndicator?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/scrollview.html#showshorizontalscrollindicator">#</a></h4><div><p>When true, shows a horizontal scroll indicator.
|
||||
The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showsverticalscrollindicator"></a>showsVerticalScrollIndicator?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/scrollview.html#showsverticalscrollindicator">#</a></h4><div><p>When true, shows a vertical scroll indicator.
|
||||
The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stickyheaderindices"></a>stickyHeaderIndices?: <span class="propType">PropTypes.arrayOf(PropTypes.number)</span> <a class="hash-link" href="docs/scrollview.html#stickyheaderindices">#</a></h4><div><p>An array of child indices determining which children get docked to the
|
||||
true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollenabled"></a>scrollEnabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#scrollenabled">#</a></h4><div><p>When false, the view cannot be scrolled via touch interaction.
|
||||
The default value is true.</p><p>Note that the view can be always be scrolled by calling <code>scrollTo</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showshorizontalscrollindicator"></a>showsHorizontalScrollIndicator?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#showshorizontalscrollindicator">#</a></h4><div><p>When true, shows a horizontal scroll indicator.
|
||||
The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showsverticalscrollindicator"></a>showsVerticalScrollIndicator?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#showsverticalscrollindicator">#</a></h4><div><p>When true, shows a vertical scroll indicator.
|
||||
The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stickyheaderindices"></a>stickyHeaderIndices?: <span class="propType"><span>[number]</span></span> <a class="hash-link" href="docs/scrollview.html#stickyheaderindices">#</a></h4><div><p>An array of child indices determining which children get docked to the
|
||||
top of the screen when scrolling. For example, passing
|
||||
<code>stickyHeaderIndices={[0]}</code> will cause the first child to be fixed to the
|
||||
top of the scroll view. This property is not supported in conjunction
|
||||
with <code>horizontal={true}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">style</span> <a class="hash-link" href="docs/scrollview.html#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="docs/layout-props.html#props">Layout Props...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/shadow-props.html#props">Shadow Props...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/transforms.html#props">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">ReactPropTypes.oneOf(['visible', 'hidden'])</span> </h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomLeftRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomWidth <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftWidth <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRightColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderRightWidth <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderStyle <span class="propType">ReactPropTypes.oneOf(['solid', 'dotted', 'dashed'])</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderTopLeftRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopWidth <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>elevation <span class="propType">ReactPropTypes.number</span> <div><p>(Android-only) Sets the elevation of a view, using Android's underlying
|
||||
with <code>horizontal={true}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">style</span> <a class="hash-link" href="docs/scrollview.html#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="docs/layout-props.html#props">Layout Props...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/shadow-props.html#props">Shadow Props...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/transforms.html#props">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">enum('visible', 'hidden')</span> </h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRightColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderRightWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderStyle <span class="propType">enum('solid', 'dotted', 'dashed')</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderTopLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>elevation <span class="propType">number</span> <div><p>(Android-only) Sets the elevation of a view, using Android's underlying
|
||||
<a href="https://developer.android.com/training/material/shadows-clipping.html#Elevation" target="_blank">elevation API</a>.
|
||||
This adds a drop shadow to the item and affects z-order for overlapping views.
|
||||
Only supported on Android 5.0+, has no effect on earlier versions.</p></div></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="endfillcolor"></a><span class="platform">android</span>endFillColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/scrollview.html#endfillcolor">#</a></h4><div><p>Sometimes a scrollview takes up more space than its content fills. When this is
|
||||
the case, this prop will fill the rest of the scrollview with a color to avoid setting
|
||||
a background and creating unnecessary overdraw. This is an advanced optimization
|
||||
that is not needed in the general case.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="overscrollmode"></a><span class="platform">android</span>overScrollMode?: <span class="propType">PropTypes.oneOf([
|
||||
'auto',
|
||||
'always',
|
||||
'never',
|
||||
])</span> <a class="hash-link" href="docs/scrollview.html#overscrollmode">#</a></h4><div><p>Used to override default value of overScroll mode.</p><p>Possible values:</p><ul><li><code>'auto'</code> - Default value, allow a user to over-scroll
|
||||
this view only if the content is large enough to meaningfully scroll.</li><li><code>'always'</code> - Always allow a user to over-scroll this view.</li><li><code>'never'</code> - Never allow a user to over-scroll this view.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollperftag"></a><span class="platform">android</span>scrollPerfTag?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/scrollview.html#scrollperftag">#</a></h4><div><p>Tag used to log scroll performance on this scroll view. Will force
|
||||
that is not needed in the general case.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="overscrollmode"></a><span class="platform">android</span>overScrollMode?: <span class="propType">enum('auto', 'always', 'never')</span> <a class="hash-link" href="docs/scrollview.html#overscrollmode">#</a></h4><div><p>Used to override default value of overScroll mode.</p><p>Possible values:</p><ul><li><code>'auto'</code> - Default value, allow a user to over-scroll
|
||||
this view only if the content is large enough to meaningfully scroll.</li><li><code>'always'</code> - Always allow a user to over-scroll this view.</li><li><code>'never'</code> - Never allow a user to over-scroll this view.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollperftag"></a><span class="platform">android</span>scrollPerfTag?: <span class="propType">string</span> <a class="hash-link" href="docs/scrollview.html#scrollperftag">#</a></h4><div><p>Tag used to log scroll performance on this scroll view. Will force
|
||||
momentum events to be turned on (see sendMomentumEvents). This doesn't do
|
||||
anything out of the box and you need to implement a custom native
|
||||
FpsListener for it to be useful.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="deprecated-sendupdatedchildframes"></a><span class="platform">ios</span>DEPRECATED_sendUpdatedChildFrames?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/scrollview.html#deprecated-sendupdatedchildframes">#</a></h4><div><p>When true, ScrollView will emit updateChildFrames data in scroll events,
|
||||
FpsListener for it to be useful.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="deprecated-sendupdatedchildframes"></a><span class="platform">ios</span>DEPRECATED_sendUpdatedChildFrames?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#deprecated-sendupdatedchildframes">#</a></h4><div><p>When true, ScrollView will emit updateChildFrames data in scroll events,
|
||||
otherwise will not compute or emit child frame data. This only exists
|
||||
to support legacy issues, <code>onLayout</code> should be used instead to retrieve
|
||||
frame data.
|
||||
The default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="alwaysbouncehorizontal"></a><span class="platform">ios</span>alwaysBounceHorizontal?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/scrollview.html#alwaysbouncehorizontal">#</a></h4><div><p>When true, the scroll view bounces horizontally when it reaches the end
|
||||
The default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="alwaysbouncehorizontal"></a><span class="platform">ios</span>alwaysBounceHorizontal?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#alwaysbouncehorizontal">#</a></h4><div><p>When true, the scroll view bounces horizontally when it reaches the end
|
||||
even if the content is smaller than the scroll view itself. The default
|
||||
value is true when <code>horizontal={true}</code> and false otherwise.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="alwaysbouncevertical"></a><span class="platform">ios</span>alwaysBounceVertical?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/scrollview.html#alwaysbouncevertical">#</a></h4><div><p>When true, the scroll view bounces vertically when it reaches the end
|
||||
value is true when <code>horizontal={true}</code> and false otherwise.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="alwaysbouncevertical"></a><span class="platform">ios</span>alwaysBounceVertical?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#alwaysbouncevertical">#</a></h4><div><p>When true, the scroll view bounces vertically when it reaches the end
|
||||
even if the content is smaller than the scroll view itself. The default
|
||||
value is false when <code>horizontal={true}</code> and true otherwise.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="automaticallyadjustcontentinsets"></a><span class="platform">ios</span>automaticallyAdjustContentInsets?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/scrollview.html#automaticallyadjustcontentinsets">#</a></h4><div><p>Controls whether iOS should automatically adjust the content inset
|
||||
value is false when <code>horizontal={true}</code> and true otherwise.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="automaticallyadjustcontentinsets"></a><span class="platform">ios</span>automaticallyAdjustContentInsets?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#automaticallyadjustcontentinsets">#</a></h4><div><p>Controls whether iOS should automatically adjust the content inset
|
||||
for scroll views that are placed behind a navigation bar or
|
||||
tab bar/ toolbar. The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bounces"></a><span class="platform">ios</span>bounces?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/scrollview.html#bounces">#</a></h4><div><p>When true, the scroll view bounces when it reaches the end of the
|
||||
tab bar/ toolbar. The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bounces"></a><span class="platform">ios</span>bounces?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#bounces">#</a></h4><div><p>When true, the scroll view bounces when it reaches the end of the
|
||||
content if the content is larger then the scroll view along the axis of
|
||||
the scroll direction. When false, it disables all bouncing even if
|
||||
the <code>alwaysBounce*</code> props are true. The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bounceszoom"></a><span class="platform">ios</span>bouncesZoom?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/scrollview.html#bounceszoom">#</a></h4><div><p>When true, gestures can drive zoom past min/max and the zoom will animate
|
||||
the <code>alwaysBounce*</code> props are true. The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bounceszoom"></a><span class="platform">ios</span>bouncesZoom?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#bounceszoom">#</a></h4><div><p>When true, gestures can drive zoom past min/max and the zoom will animate
|
||||
to the min/max value at gesture end, otherwise the zoom will not exceed
|
||||
the limits.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="cancancelcontenttouches"></a><span class="platform">ios</span>canCancelContentTouches?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/scrollview.html#cancancelcontenttouches">#</a></h4><div><p>When false, once tracking starts, won't try to drag if the touch moves.
|
||||
The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="centercontent"></a><span class="platform">ios</span>centerContent?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/scrollview.html#centercontent">#</a></h4><div><p>When true, the scroll view automatically centers the content when the
|
||||
the limits.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="cancancelcontenttouches"></a><span class="platform">ios</span>canCancelContentTouches?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#cancancelcontenttouches">#</a></h4><div><p>When false, once tracking starts, won't try to drag if the touch moves.
|
||||
The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="centercontent"></a><span class="platform">ios</span>centerContent?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#centercontent">#</a></h4><div><p>When true, the scroll view automatically centers the content when the
|
||||
content is smaller than the scroll view bounds; when the content is
|
||||
larger than the scroll view, this property has no effect. The default
|
||||
value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinset"></a><span class="platform">ios</span>contentInset?: <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/scrollview.html#contentinset">#</a></h4><div><p>The amount by which the scroll view content is inset from the edges
|
||||
of the scroll view. Defaults to <code>{top: 0, left: 0, bottom: 0, right: 0}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentoffset"></a><span class="platform">ios</span>contentOffset?: <span class="propType">PointPropType</span> <a class="hash-link" href="docs/scrollview.html#contentoffset">#</a></h4><div><p>Used to manually set the starting scroll offset.
|
||||
The default value is <code>{x: 0, y: 0}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="decelerationrate"></a><span class="platform">ios</span>decelerationRate?: <span class="propType">PropTypes.oneOfType([
|
||||
PropTypes.oneOf(['fast', 'normal']),
|
||||
PropTypes.number,
|
||||
])</span> <a class="hash-link" href="docs/scrollview.html#decelerationrate">#</a></h4><div><p>A floating-point number that determines how quickly the scroll view
|
||||
The default value is <code>{x: 0, y: 0}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="decelerationrate"></a><span class="platform">ios</span>decelerationRate?: <span class="propType"><span><span>enum('fast', 'normal'), </span>number</span></span> <a class="hash-link" href="docs/scrollview.html#decelerationrate">#</a></h4><div><p>A floating-point number that determines how quickly the scroll view
|
||||
decelerates after the user lifts their finger. You may also use string
|
||||
shortcuts <code>"normal"</code> and <code>"fast"</code> which match the underlying iOS settings
|
||||
for <code>UIScrollViewDecelerationRateNormal</code> and
|
||||
<code>UIScrollViewDecelerationRateFast</code> respectively.</p><ul><li><code>'normal'</code>: 0.998 (the default)</li><li><code>'fast'</code>: 0.99</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="directionallockenabled"></a><span class="platform">ios</span>directionalLockEnabled?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/scrollview.html#directionallockenabled">#</a></h4><div><p>When true, the ScrollView will try to lock to only vertical or horizontal
|
||||
scrolling while dragging. The default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="indicatorstyle"></a><span class="platform">ios</span>indicatorStyle?: <span class="propType">PropTypes.oneOf([
|
||||
'default', // default
|
||||
'black',
|
||||
'white',
|
||||
])</span> <a class="hash-link" href="docs/scrollview.html#indicatorstyle">#</a></h4><div><p>The style of the scroll indicators.</p><ul><li><code>'default'</code> (the default), same as <code>black</code>.</li><li><code>'black'</code>, scroll indicator is black. This style is good against a light background.</li><li><code>'white'</code>, scroll indicator is white. This style is good against a dark background.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maximumzoomscale"></a><span class="platform">ios</span>maximumZoomScale?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/scrollview.html#maximumzoomscale">#</a></h4><div><p>The maximum allowed zoom scale. The default value is 1.0.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumzoomscale"></a><span class="platform">ios</span>minimumZoomScale?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/scrollview.html#minimumzoomscale">#</a></h4><div><p>The minimum allowed zoom scale. The default value is 1.0.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onscrollanimationend"></a><span class="platform">ios</span>onScrollAnimationEnd?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/scrollview.html#onscrollanimationend">#</a></h4><div><p>Called when a scrolling animation ends.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrolleventthrottle"></a><span class="platform">ios</span>scrollEventThrottle?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/scrollview.html#scrolleventthrottle">#</a></h4><div><p>This controls how often the scroll event will be fired while scrolling
|
||||
<code>UIScrollViewDecelerationRateFast</code> respectively.</p><ul><li><code>'normal'</code>: 0.998 (the default)</li><li><code>'fast'</code>: 0.99</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="directionallockenabled"></a><span class="platform">ios</span>directionalLockEnabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#directionallockenabled">#</a></h4><div><p>When true, the ScrollView will try to lock to only vertical or horizontal
|
||||
scrolling while dragging. The default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="indicatorstyle"></a><span class="platform">ios</span>indicatorStyle?: <span class="propType">enum('default', 'black', 'white')</span> <a class="hash-link" href="docs/scrollview.html#indicatorstyle">#</a></h4><div><p>The style of the scroll indicators.</p><ul><li><code>'default'</code> (the default), same as <code>black</code>.</li><li><code>'black'</code>, scroll indicator is black. This style is good against a light background.</li><li><code>'white'</code>, scroll indicator is white. This style is good against a dark background.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maximumzoomscale"></a><span class="platform">ios</span>maximumZoomScale?: <span class="propType">number</span> <a class="hash-link" href="docs/scrollview.html#maximumzoomscale">#</a></h4><div><p>The maximum allowed zoom scale. The default value is 1.0.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumzoomscale"></a><span class="platform">ios</span>minimumZoomScale?: <span class="propType">number</span> <a class="hash-link" href="docs/scrollview.html#minimumzoomscale">#</a></h4><div><p>The minimum allowed zoom scale. The default value is 1.0.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onscrollanimationend"></a><span class="platform">ios</span>onScrollAnimationEnd?: <span class="propType">function</span> <a class="hash-link" href="docs/scrollview.html#onscrollanimationend">#</a></h4><div><p>Called when a scrolling animation ends.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrolleventthrottle"></a><span class="platform">ios</span>scrollEventThrottle?: <span class="propType">number</span> <a class="hash-link" href="docs/scrollview.html#scrolleventthrottle">#</a></h4><div><p>This controls how often the scroll event will be fired while scrolling
|
||||
(as a time interval in ms). A lower number yields better accuracy for code
|
||||
that is tracking the scroll position, but can lead to scroll performance
|
||||
problems due to the volume of information being send over the bridge.
|
||||
@@ -109,17 +94,13 @@ scroll position tracking, set this value higher to limit the information
|
||||
being sent across the bridge. The default value is zero, which results in
|
||||
the scroll event being sent only once each time the view is scrolled.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollindicatorinsets"></a><span class="platform">ios</span>scrollIndicatorInsets?: <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/scrollview.html#scrollindicatorinsets">#</a></h4><div><p>The amount by which the scroll view indicators are inset from the edges
|
||||
of the scroll view. This should normally be set to the same value as
|
||||
the <code>contentInset</code>. Defaults to <code>{0, 0, 0, 0}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollstotop"></a><span class="platform">ios</span>scrollsToTop?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/scrollview.html#scrollstotop">#</a></h4><div><p>When true, the scroll view scrolls to top when the status bar is tapped.
|
||||
The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="snaptoalignment"></a><span class="platform">ios</span>snapToAlignment?: <span class="propType">PropTypes.oneOf([
|
||||
'start', // default
|
||||
'center',
|
||||
'end',
|
||||
])</span> <a class="hash-link" href="docs/scrollview.html#snaptoalignment">#</a></h4><div><p>When <code>snapToInterval</code> is set, <code>snapToAlignment</code> will define the relationship
|
||||
of the snapping to the scroll view.</p><ul><li><code>'start'</code> (the default) will align the snap at the left (horizontal) or top (vertical)</li><li><code>'center'</code> will align the snap in the center</li><li><code>'end'</code> will align the snap at the right (horizontal) or bottom (vertical)</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="snaptointerval"></a><span class="platform">ios</span>snapToInterval?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/scrollview.html#snaptointerval">#</a></h4><div><p>When set, causes the scroll view to stop at multiples of the value of
|
||||
the <code>contentInset</code>. Defaults to <code>{0, 0, 0, 0}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollstotop"></a><span class="platform">ios</span>scrollsToTop?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#scrollstotop">#</a></h4><div><p>When true, the scroll view scrolls to top when the status bar is tapped.
|
||||
The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="snaptoalignment"></a><span class="platform">ios</span>snapToAlignment?: <span class="propType">enum('start', 'center', 'end')</span> <a class="hash-link" href="docs/scrollview.html#snaptoalignment">#</a></h4><div><p>When <code>snapToInterval</code> is set, <code>snapToAlignment</code> will define the relationship
|
||||
of the snapping to the scroll view.</p><ul><li><code>'start'</code> (the default) will align the snap at the left (horizontal) or top (vertical)</li><li><code>'center'</code> will align the snap in the center</li><li><code>'end'</code> will align the snap at the right (horizontal) or bottom (vertical)</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="snaptointerval"></a><span class="platform">ios</span>snapToInterval?: <span class="propType">number</span> <a class="hash-link" href="docs/scrollview.html#snaptointerval">#</a></h4><div><p>When set, causes the scroll view to stop at multiples of the value of
|
||||
<code>snapToInterval</code>. This can be used for paginating through children
|
||||
that have lengths smaller than the scroll view. Typically used in
|
||||
combination with <code>snapToAlignment</code> and <code>decelerationRate="fast"</code>.
|
||||
Overrides less configurable <code>pagingEnabled</code> prop.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="zoomscale"></a><span class="platform">ios</span>zoomScale?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/scrollview.html#zoomscale">#</a></h4><div><p>The current scale of the scroll view content. The default value is 1.0.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/scrollview.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrollto"></a>scrollTo<span class="methodType">(y?: number, object, x?: number, animated?: boolean)</span> <a class="hash-link" href="docs/scrollview.html#scrollto">#</a></h4><div><p>Scrolls to a given x, y offset, either immediately or with a smooth animation.</p><p>Example:</p><p><code>scrollTo({x: 0, y: 0, animated: true})</code></p><p>Note: The weird function signature is due to the fact that, for historical reasons,
|
||||
Overrides less configurable <code>pagingEnabled</code> prop.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="zoomscale"></a><span class="platform">ios</span>zoomScale?: <span class="propType">number</span> <a class="hash-link" href="docs/scrollview.html#zoomscale">#</a></h4><div><p>The current scale of the scroll view content. The default value is 1.0.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/scrollview.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrollto"></a>scrollTo<span class="methodType">(y?: number, object, x?: number, animated?: boolean)</span> <a class="hash-link" href="docs/scrollview.html#scrollto">#</a></h4><div><p>Scrolls to a given x, y offset, either immediately or with a smooth animation.</p><p>Example:</p><p><code>scrollTo({x: 0, y: 0, animated: true})</code></p><p>Note: The weird function signature is due to the fact that, for historical reasons,
|
||||
the function also accepts separate arguments as an alternative to the options object.
|
||||
This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoend"></a>scrollToEnd<span class="methodType">(options?: object)</span> <a class="hash-link" href="docs/scrollview.html#scrolltoend">#</a></h4><div><p>If this is a vertical ScrollView scrolls to the bottom.
|
||||
If this is a horizontal ScrollView scrolls to the right.</p><p>Use <code>scrollToEnd({animated: true})</code> for smooth animated scrolling,
|
||||
|
||||
@@ -7,11 +7,11 @@ selects a value and changes the index, as shown in the example below.</p><div cl
|
||||
onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>selectedIndex<span class="token punctuation">:</span> event<span class="token punctuation">.</span>nativeEvent<span class="token punctuation">.</span>selectedSegmentIndex<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>
|
||||
<span class="token operator">/</span><span class="token operator">></span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/segmentedcontrolios.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/segmentedcontrolios.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="enabled"></a>enabled?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/segmentedcontrolios.html#enabled">#</a></h4><div><p>If false the user won't be able to interact with the control.
|
||||
Default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="momentary"></a>momentary?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/segmentedcontrolios.html#momentary">#</a></h4><div><p>If true, then selecting a segment won't persist visually.
|
||||
The <code>onValueChange</code> callback will still work as expected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchange"></a>onChange?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/segmentedcontrolios.html#onchange">#</a></h4><div><p>Callback that is called when the user taps a segment;
|
||||
passes the event as an argument</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onvaluechange"></a>onValueChange?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/segmentedcontrolios.html#onvaluechange">#</a></h4><div><p>Callback that is called when the user taps a segment;
|
||||
passes the segment's value as an argument</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectedindex"></a>selectedIndex?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/segmentedcontrolios.html#selectedindex">#</a></h4><div><p>The index in <code>props.values</code> of the segment to be (pre)selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a>tintColor?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/segmentedcontrolios.html#tintcolor">#</a></h4><div><p>Accent color of the control.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="values"></a>values?: <span class="propType">PropTypes.arrayOf(PropTypes.string)</span> <a class="hash-link" href="docs/segmentedcontrolios.html#values">#</a></h4><div><p>The labels for the control's segment buttons, in order.</p></div></div></div></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js">edit the content above on GitHub</a> and send us a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/sectionlist.html#content">← Prev</a><a class="docs-next" href="docs/slider.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></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 © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token operator">/</span><span class="token operator">></span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/segmentedcontrolios.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/segmentedcontrolios.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="enabled"></a>enabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/segmentedcontrolios.html#enabled">#</a></h4><div><p>If false the user won't be able to interact with the control.
|
||||
Default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="momentary"></a>momentary?: <span class="propType">bool</span> <a class="hash-link" href="docs/segmentedcontrolios.html#momentary">#</a></h4><div><p>If true, then selecting a segment won't persist visually.
|
||||
The <code>onValueChange</code> callback will still work as expected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchange"></a>onChange?: <span class="propType">function</span> <a class="hash-link" href="docs/segmentedcontrolios.html#onchange">#</a></h4><div><p>Callback that is called when the user taps a segment;
|
||||
passes the event as an argument</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onvaluechange"></a>onValueChange?: <span class="propType">function</span> <a class="hash-link" href="docs/segmentedcontrolios.html#onvaluechange">#</a></h4><div><p>Callback that is called when the user taps a segment;
|
||||
passes the segment's value as an argument</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectedindex"></a>selectedIndex?: <span class="propType">number</span> <a class="hash-link" href="docs/segmentedcontrolios.html#selectedindex">#</a></h4><div><p>The index in <code>props.values</code> of the segment to be (pre)selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a>tintColor?: <span class="propType">string</span> <a class="hash-link" href="docs/segmentedcontrolios.html#tintcolor">#</a></h4><div><p>Accent color of the control.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="values"></a>values?: <span class="propType"><span>[string]</span></span> <a class="hash-link" href="docs/segmentedcontrolios.html#values">#</a></h4><div><p>The labels for the control's segment buttons, in order.</p></div></div></div></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js">edit the content above on GitHub</a> and send us a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/sectionlist.html#content">← Prev</a><a class="docs-next" href="docs/slider.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></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 © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -2,8 +2,8 @@
|
||||
updates the <code>value</code> prop in order for the component to reflect user actions.
|
||||
If the <code>value</code> prop is not updated, the component will continue to render
|
||||
the supplied <code>value</code> prop instead of the expected result of any user actions.</p><p>@keyword checkbox
|
||||
@keyword toggle</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/switch.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/switch.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="disabled"></a>disabled?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/switch.html#disabled">#</a></h4><div><p>If true the user won't be able to toggle the switch.
|
||||
Default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ontintcolor"></a>onTintColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/switch.html#ontintcolor">#</a></h4><div><p>Background color when the switch is turned on.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onvaluechange"></a>onValueChange?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/switch.html#onvaluechange">#</a></h4><div><p>Invoked with the new value when the value changes.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/switch.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="thumbtintcolor"></a>thumbTintColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/switch.html#thumbtintcolor">#</a></h4><div><p>Color of the foreground switch grip.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a>tintColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/switch.html#tintcolor">#</a></h4><div><p>Border color on iOS and background color on Android when the switch is turned off.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="value"></a>value?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/switch.html#value">#</a></h4><div><p>The value of the switch. If true the switch will be turned on.
|
||||
@keyword toggle</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/switch.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/switch.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="disabled"></a>disabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/switch.html#disabled">#</a></h4><div><p>If true the user won't be able to toggle the switch.
|
||||
Default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ontintcolor"></a>onTintColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/switch.html#ontintcolor">#</a></h4><div><p>Background color when the switch is turned on.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onvaluechange"></a>onValueChange?: <span class="propType">function</span> <a class="hash-link" href="docs/switch.html#onvaluechange">#</a></h4><div><p>Invoked with the new value when the value changes.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">string</span> <a class="hash-link" href="docs/switch.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="thumbtintcolor"></a>thumbTintColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/switch.html#thumbtintcolor">#</a></h4><div><p>Color of the foreground switch grip.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a>tintColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/switch.html#tintcolor">#</a></h4><div><p>Border color on iOS and background color on Android when the switch is turned off.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="value"></a>value?: <span class="propType">bool</span> <a class="hash-link" href="docs/switch.html#value">#</a></h4><div><p>The value of the switch. If true the switch will be turned on.
|
||||
Default value is false.</p></div></div></div></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Switch/Switch.js">edit the content above on GitHub</a> and send us a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/statusbar.html#content">← Prev</a><a class="docs-next" href="docs/tabbarios.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></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 © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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),
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -37,50 +37,27 @@ stack on top of each other on account of the literal newlines:</p><div class="we
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token comment" spellcheck="true">
|
||||
// skip this line if using Create React Native App
|
||||
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span><span class="token string">'TextInANest'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> TextInANest<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.2.6/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20StyleSheet%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20TextInANest%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7B%0A%20%20%20%20%20%20titleText%3A%20%22Bird's%20Nest%22%2C%0A%20%20%20%20%20%20bodyText%3A%20'This%20is%20not%20really%20a%20bird%20nest.'%0A%20%20%20%20%7D%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.baseText%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.titleText%7D%20onPress%3D%7Bthis.onPressTitle%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%7Bthis.state.titleText%7D%7B'%5Cn'%7D%7B'%5Cn'%7D%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CText%20numberOfLines%3D%7B5%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%7Bthis.state.bodyText%7D%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20baseText%3A%20%7B%0A%20%20%20%20fontFamily%3A%20'Cochin'%2C%0A%20%20%7D%2C%0A%20%20titleText%3A%20%7B%0A%20%20%20%20fontSize%3A%2020%2C%0A%20%20%20%20fontWeight%3A%20'bold'%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('TextInANest'%2C%20()%20%3D%3E%20TextInANest)%3B" frameborder="0"></iframe></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/text.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a>accessible?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/text.html#accessible">#</a></h4><div><p>When set to <code>true</code>, indicates that the view is an accessibility element. The default value
|
||||
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span><span class="token string">'TextInANest'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> TextInANest<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.2.6/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20StyleSheet%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20TextInANest%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7B%0A%20%20%20%20%20%20titleText%3A%20%22Bird's%20Nest%22%2C%0A%20%20%20%20%20%20bodyText%3A%20'This%20is%20not%20really%20a%20bird%20nest.'%0A%20%20%20%20%7D%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.baseText%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.titleText%7D%20onPress%3D%7Bthis.onPressTitle%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%7Bthis.state.titleText%7D%7B'%5Cn'%7D%7B'%5Cn'%7D%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CText%20numberOfLines%3D%7B5%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%7Bthis.state.bodyText%7D%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20baseText%3A%20%7B%0A%20%20%20%20fontFamily%3A%20'Cochin'%2C%0A%20%20%7D%2C%0A%20%20titleText%3A%20%7B%0A%20%20%20%20fontSize%3A%2020%2C%0A%20%20%20%20fontWeight%3A%20'bold'%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('TextInANest'%2C%20()%20%3D%3E%20TextInANest)%3B" frameborder="0"></iframe></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/text.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a>accessible?: <span class="propType">bool</span> <a class="hash-link" href="docs/text.html#accessible">#</a></h4><div><p>When set to <code>true</code>, indicates that the view is an accessibility element. The default value
|
||||
for a <code>Text</code> element is <code>true</code>.</p><p>See the
|
||||
<a href="docs/accessibility.html#accessible-ios-android" target="_blank">Accessibility guide</a>
|
||||
for more information.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="allowfontscaling"></a>allowFontScaling?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/text.html#allowfontscaling">#</a></h4><div><p>Specifies whether fonts should scale to respect Text Size accessibility settings. The
|
||||
default is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ellipsizemode"></a>ellipsizeMode?: <span class="propType">PropTypes.oneOf(['head', 'middle', 'tail', 'clip'])</span> <a class="hash-link" href="docs/text.html#ellipsizemode">#</a></h4><div><p>When <code>numberOfLines</code> is set, this prop defines how text will be truncated.
|
||||
for more information.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="allowfontscaling"></a>allowFontScaling?: <span class="propType">bool</span> <a class="hash-link" href="docs/text.html#allowfontscaling">#</a></h4><div><p>Specifies whether fonts should scale to respect Text Size accessibility settings. The
|
||||
default is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ellipsizemode"></a>ellipsizeMode?: <span class="propType">enum('head', 'middle', 'tail', 'clip')</span> <a class="hash-link" href="docs/text.html#ellipsizemode">#</a></h4><div><p>When <code>numberOfLines</code> is set, this prop defines how text will be truncated.
|
||||
<code>numberOfLines</code> must be set in conjunction with this prop.</p><p>This can be one of the following values:</p><ul><li><code>head</code> - The line is displayed so that the end fits in the container and the missing text
|
||||
at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"</li><li><code>middle</code> - The line is displayed so that the beginning and end fit in the container and the
|
||||
missing text in the middle is indicated by an ellipsis glyph. "ab...yz"</li><li><code>tail</code> - The line is displayed so that the beginning fits in the container and the
|
||||
missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."</li><li><code>clip</code> - Lines are not drawn past the edge of the text container.</li></ul><p>The default is <code>tail</code>.</p><blockquote><p><code>clip</code> is working only for iOS</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="nativeid"></a>nativeID?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/text.html#nativeid">#</a></h4><div><p>Used to locate this view from native code.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="numberoflines"></a>numberOfLines?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/text.html#numberoflines">#</a></h4><div><p>Used to truncate the text with an ellipsis after computing the text
|
||||
missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."</li><li><code>clip</code> - Lines are not drawn past the edge of the text container.</li></ul><p>The default is <code>tail</code>.</p><blockquote><p><code>clip</code> is working only for iOS</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="nativeid"></a>nativeID?: <span class="propType">string</span> <a class="hash-link" href="docs/text.html#nativeid">#</a></h4><div><p>Used to locate this view from native code.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="numberoflines"></a>numberOfLines?: <span class="propType">number</span> <a class="hash-link" href="docs/text.html#numberoflines">#</a></h4><div><p>Used to truncate the text with an ellipsis after computing the text
|
||||
layout, including line wrapping, such that the total number of lines
|
||||
does not exceed this number.</p><p>This prop is commonly used with <code>ellipsizeMode</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/text.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with</p><p> <code>{nativeEvent: {layout: {x, y, width, height}}}</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlongpress"></a>onLongPress?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/text.html#onlongpress">#</a></h4><div><p>This function is called on long press.</p><p>e.g., <code>onLongPress={this.increaseSize}></code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpress"></a>onPress?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/text.html#onpress">#</a></h4><div><p>This function is called on press.</p><p>e.g., <code>onPress={() => console.log('1st')}</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pressretentionoffset"></a>pressRetentionOffset?: <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/text.html#pressretentionoffset">#</a></h4><div><p>When the scroll view is disabled, this defines how far your touch may
|
||||
does not exceed this number.</p><p>This prop is commonly used with <code>ellipsizeMode</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout?: <span class="propType">function</span> <a class="hash-link" href="docs/text.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with</p><p> <code>{nativeEvent: {layout: {x, y, width, height}}}</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlongpress"></a>onLongPress?: <span class="propType">function</span> <a class="hash-link" href="docs/text.html#onlongpress">#</a></h4><div><p>This function is called on long press.</p><p>e.g., <code>onLongPress={this.increaseSize}></code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpress"></a>onPress?: <span class="propType">function</span> <a class="hash-link" href="docs/text.html#onpress">#</a></h4><div><p>This function is called on press.</p><p>e.g., <code>onPress={() => console.log('1st')}</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pressretentionoffset"></a>pressRetentionOffset?: <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/text.html#pressretentionoffset">#</a></h4><div><p>When the scroll view is disabled, this defines how far your touch may
|
||||
move off of the button, before deactivating the button. Once deactivated,
|
||||
try moving it back and you'll see that the button is once again
|
||||
reactivated! Move it back and forth several times while the scroll view
|
||||
is disabled. Ensure you pass in a constant to reduce memory allocations.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectable"></a>selectable?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/text.html#selectable">#</a></h4><div><p>Lets the user select text, to use the native copy and paste functionality.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">style</span> <a class="hash-link" href="docs/text.html#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="docs/view.html#style">View#style...</a></h6></div><div class="prop"><h6 class="propTitle">color <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">fontFamily <span class="propType">ReactPropTypes.string</span> </h6></div><div class="prop"><h6 class="propTitle">fontSize <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">fontStyle <span class="propType">ReactPropTypes.oneOf(['normal', 'italic'])</span> </h6></div><div class="prop"><h6 class="propTitle">fontWeight <span class="propType">ReactPropTypes.oneOf(
|
||||
['normal' /*default*/, 'bold',
|
||||
'100', '200', '300', '400', '500', '600', '700', '800', '900']
|
||||
)</span> <div><p>Specifies font weight. The values 'normal' and 'bold' are supported for
|
||||
is disabled. Ensure you pass in a constant to reduce memory allocations.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectable"></a>selectable?: <span class="propType">bool</span> <a class="hash-link" href="docs/text.html#selectable">#</a></h4><div><p>Lets the user select text, to use the native copy and paste functionality.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">style</span> <a class="hash-link" href="docs/text.html#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="docs/view.html#style">View#style...</a></h6></div><div class="prop"><h6 class="propTitle">color <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">fontFamily <span class="propType">string</span> </h6></div><div class="prop"><h6 class="propTitle">fontSize <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">fontStyle <span class="propType">enum('normal', 'italic')</span> </h6></div><div class="prop"><h6 class="propTitle">fontWeight <span class="propType">enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')</span> <div><p>Specifies font weight. The values 'normal' and 'bold' are supported for
|
||||
most fonts. Not all fonts have a variant for each of the numeric values,
|
||||
in that case the closest one is chosen.</p></div></h6></div><div class="prop"><h6 class="propTitle">lineHeight <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle">textAlign <span class="propType">ReactPropTypes.oneOf(
|
||||
['auto' /*default*/, 'left', 'right', 'center', 'justify']
|
||||
)</span> <div><p>Specifies text alignment. The value 'justify' is only supported on iOS and
|
||||
fallbacks to <code>left</code> on Android.</p></div></h6></div><div class="prop"><h6 class="propTitle">textDecorationLine <span class="propType">ReactPropTypes.oneOf(
|
||||
['none' /*default*/, 'underline', 'line-through', 'underline line-through']
|
||||
)</span> </h6></div><div class="prop"><h6 class="propTitle">textShadowColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">textShadowOffset <span class="propType">ReactPropTypes.shape(
|
||||
{width: ReactPropTypes.number, height: ReactPropTypes.number}
|
||||
)</span> </h6></div><div class="prop"><h6 class="propTitle">textShadowRadius <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>includeFontPadding <span class="propType">ReactPropTypes.bool</span> <div><p>Set to <code>false</code> to remove extra font padding intended to make space for certain ascenders / descenders.
|
||||
in that case the closest one is chosen.</p></div></h6></div><div class="prop"><h6 class="propTitle">lineHeight <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">textAlign <span class="propType">enum('auto', 'left', 'right', 'center', 'justify')</span> <div><p>Specifies text alignment. The value 'justify' is only supported on iOS and
|
||||
fallbacks to <code>left</code> on Android.</p></div></h6></div><div class="prop"><h6 class="propTitle">textDecorationLine <span class="propType">enum('none', 'underline', 'line-through', 'underline line-through')</span> </h6></div><div class="prop"><h6 class="propTitle">textShadowColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">textShadowOffset <span class="propType"><span>{<span><span><span>width: number</span>, </span><span>height: number</span></span>}</span></span> </h6></div><div class="prop"><h6 class="propTitle">textShadowRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>includeFontPadding <span class="propType">bool</span> <div><p>Set to <code>false</code> to remove extra font padding intended to make space for certain ascenders / descenders.
|
||||
With some fonts, this padding can make text look slightly misaligned when centered vertically.
|
||||
For best results also set <code>textAlignVertical</code> to <code>center</code>. Default is true.</p></div></h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>textAlignVertical <span class="propType">ReactPropTypes.oneOf(
|
||||
['auto' /*default*/, 'top', 'bottom', 'center']
|
||||
)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>fontVariant <span class="propType">ReactPropTypes.arrayOf(
|
||||
ReactPropTypes.oneOf([
|
||||
'small-caps',
|
||||
'oldstyle-nums',
|
||||
'lining-nums',
|
||||
'tabular-nums',
|
||||
'proportional-nums',
|
||||
])
|
||||
)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>letterSpacing <span class="propType">ReactPropTypes.number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>textDecorationColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>textDecorationStyle <span class="propType">ReactPropTypes.oneOf(
|
||||
['solid' /*default*/, 'double', 'dotted','dashed']
|
||||
)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>writingDirection <span class="propType">ReactPropTypes.oneOf(
|
||||
['auto' /*default*/, 'ltr', 'rtl']
|
||||
)</span> </h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/text.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="disabled"></a><span class="platform">android</span>disabled?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/text.html#disabled">#</a></h4><div><p>Specifies the disabled state of the text view for testing purposes</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectioncolor"></a><span class="platform">android</span>selectionColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/text.html#selectioncolor">#</a></h4><div><p>The highlight color of the text.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="textbreakstrategy"></a><span class="platform">android</span>textBreakStrategy?: <span class="propType">PropTypes.oneOf(['simple', 'highQuality', 'balanced'])</span> <a class="hash-link" href="docs/text.html#textbreakstrategy">#</a></h4><div><p>Set text break strategy on Android API Level 23+, possible values are <code>simple</code>, <code>highQuality</code>, <code>balanced</code>
|
||||
The default value is <code>highQuality</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="adjustsfontsizetofit"></a><span class="platform">ios</span>adjustsFontSizeToFit?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/text.html#adjustsfontsizetofit">#</a></h4><div><p>Specifies whether font should be scaled down automatically to fit given style constraints.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumfontscale"></a><span class="platform">ios</span>minimumFontScale?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/text.html#minimumfontscale">#</a></h4><div><p>Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="suppresshighlighting"></a><span class="platform">ios</span>suppressHighlighting?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/text.html#suppresshighlighting">#</a></h4><div><p>When <code>true</code>, no visual change is made when text is pressed down. By
|
||||
For best results also set <code>textAlignVertical</code> to <code>center</code>. Default is true.</p></div></h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>textAlignVertical <span class="propType">enum('auto', 'top', 'bottom', 'center')</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>fontVariant <span class="propType"><span>[enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums')]</span></span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>letterSpacing <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>textDecorationColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>textDecorationStyle <span class="propType">enum('solid', 'double', 'dotted', 'dashed')</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>writingDirection <span class="propType">enum('auto', 'ltr', 'rtl')</span> </h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">string</span> <a class="hash-link" href="docs/text.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="disabled"></a><span class="platform">android</span>disabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/text.html#disabled">#</a></h4><div><p>Specifies the disabled state of the text view for testing purposes</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectioncolor"></a><span class="platform">android</span>selectionColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/text.html#selectioncolor">#</a></h4><div><p>The highlight color of the text.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="textbreakstrategy"></a><span class="platform">android</span>textBreakStrategy?: <span class="propType">enum('simple', 'highQuality', 'balanced')</span> <a class="hash-link" href="docs/text.html#textbreakstrategy">#</a></h4><div><p>Set text break strategy on Android API Level 23+, possible values are <code>simple</code>, <code>highQuality</code>, <code>balanced</code>
|
||||
The default value is <code>highQuality</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="adjustsfontsizetofit"></a><span class="platform">ios</span>adjustsFontSizeToFit?: <span class="propType">bool</span> <a class="hash-link" href="docs/text.html#adjustsfontsizetofit">#</a></h4><div><p>Specifies whether font should be scaled down automatically to fit given style constraints.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumfontscale"></a><span class="platform">ios</span>minimumFontScale?: <span class="propType">number</span> <a class="hash-link" href="docs/text.html#minimumfontscale">#</a></h4><div><p>Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="suppresshighlighting"></a><span class="platform">ios</span>suppressHighlighting?: <span class="propType">bool</span> <a class="hash-link" href="docs/text.html#suppresshighlighting">#</a></h4><div><p>When <code>true</code>, no visual change is made when text is pressed down. By
|
||||
default, a gray oval highlights the text on press down.</p></div></div></div></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Text/Text.js">edit the content above on GitHub</a> and send us a pull request!</p><div><h1><a class="anchor" name="description"></a>Description <a class="hash-link" href="docs/text.html#description">#</a></h1><div><h2><a class="anchor" name="nested-text"></a>Nested Text <a class="hash-link" href="docs/text.html#nested-text">#</a></h2><p>Both iOS and Android allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (<code>NSAttributedString</code> on iOS, <code>SpannableString</code> on Android). In practice, this is very tedious. For React Native, we decided to use web paradigm for this where you can nest text to achieve the same effect.</p><div class="web-player"><div class="prism language-javascript"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> AppRegistry<span class="token punctuation">,</span> Text <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
|
||||
@@ -86,102 +86,50 @@ app's activity <code>windowSoftInputMode</code> param to <code>adjustResize
|
||||
This may cause issues with components that have position: 'absolute'
|
||||
while keyboard is active. To avoid this behavior either specify <code>windowSoftInputMode</code>
|
||||
in AndroidManifest.xml ( <a href="https://developer.android.com/guide/topics/manifest/activity-element.html">https://developer.android.com/guide/topics/manifest/activity-element.html</a> )
|
||||
or control this param programmatically with native code.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/textinput.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/textinput.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="autocapitalize"></a>autoCapitalize?: <span class="propType">PropTypes.oneOf([
|
||||
'none',
|
||||
'sentences',
|
||||
'words',
|
||||
'characters',
|
||||
])</span> <a class="hash-link" href="docs/textinput.html#autocapitalize">#</a></h4><div><p>Can tell <code>TextInput</code> to automatically capitalize certain characters.</p><ul><li><code>characters</code>: all characters.</li><li><code>words</code>: first letter of each word.</li><li><code>sentences</code>: first letter of each sentence (<em>default</em>).</li><li><code>none</code>: don't auto capitalize anything.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="autocorrect"></a>autoCorrect?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/textinput.html#autocorrect">#</a></h4><div><p>If <code>false</code>, disables auto-correct. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="autofocus"></a>autoFocus?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/textinput.html#autofocus">#</a></h4><div><p>If <code>true</code>, focuses the input on <code>componentDidMount</code>.
|
||||
The default value is <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bluronsubmit"></a>blurOnSubmit?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/textinput.html#bluronsubmit">#</a></h4><div><p>If <code>true</code>, the text field will blur when submitted.
|
||||
or control this param programmatically with native code.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/textinput.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/textinput.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="autocapitalize"></a>autoCapitalize?: <span class="propType">enum('none', 'sentences', 'words', 'characters')</span> <a class="hash-link" href="docs/textinput.html#autocapitalize">#</a></h4><div><p>Can tell <code>TextInput</code> to automatically capitalize certain characters.</p><ul><li><code>characters</code>: all characters.</li><li><code>words</code>: first letter of each word.</li><li><code>sentences</code>: first letter of each sentence (<em>default</em>).</li><li><code>none</code>: don't auto capitalize anything.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="autocorrect"></a>autoCorrect?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#autocorrect">#</a></h4><div><p>If <code>false</code>, disables auto-correct. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="autofocus"></a>autoFocus?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#autofocus">#</a></h4><div><p>If <code>true</code>, focuses the input on <code>componentDidMount</code>.
|
||||
The default value is <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bluronsubmit"></a>blurOnSubmit?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#bluronsubmit">#</a></h4><div><p>If <code>true</code>, the text field will blur when submitted.
|
||||
The default value is true for single-line fields and false for
|
||||
multiline fields. Note that for multiline fields, setting <code>blurOnSubmit</code>
|
||||
to <code>true</code> means that pressing return will blur the field and trigger the
|
||||
<code>onSubmitEditing</code> event instead of inserting a newline into the field.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="carethidden"></a>caretHidden?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/textinput.html#carethidden">#</a></h4><div><p>If <code>true</code>, caret is hidden. The default value is <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="defaultvalue"></a>defaultValue?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/textinput.html#defaultvalue">#</a></h4><div><p>Provides an initial value that will change when the user starts typing.
|
||||
<code>onSubmitEditing</code> event instead of inserting a newline into the field.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="carethidden"></a>caretHidden?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#carethidden">#</a></h4><div><p>If <code>true</code>, caret is hidden. The default value is <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="defaultvalue"></a>defaultValue?: <span class="propType">string</span> <a class="hash-link" href="docs/textinput.html#defaultvalue">#</a></h4><div><p>Provides an initial value that will change when the user starts typing.
|
||||
Useful for simple use-cases where you do not want to deal with listening
|
||||
to events and updating the value prop to keep the controlled state in sync.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="editable"></a>editable?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/textinput.html#editable">#</a></h4><div><p>If <code>false</code>, text is not editable. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboardtype"></a>keyboardType?: <span class="propType">PropTypes.oneOf([
|
||||
// Cross-platform
|
||||
'default',
|
||||
'email-address',
|
||||
'numeric',
|
||||
'phone-pad',
|
||||
// iOS-only
|
||||
'ascii-capable',
|
||||
'numbers-and-punctuation',
|
||||
'url',
|
||||
'number-pad',
|
||||
'name-phone-pad',
|
||||
'decimal-pad',
|
||||
'twitter',
|
||||
'web-search',
|
||||
])</span> <a class="hash-link" href="docs/textinput.html#keyboardtype">#</a></h4><div><p>Determines which keyboard to open, e.g.<code>numeric</code>.</p><p>The following values work across platforms:</p><ul><li><code>default</code></li><li><code>numeric</code></li><li><code>email-address</code></li><li><code>phone-pad</code></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maxlength"></a>maxLength?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/textinput.html#maxlength">#</a></h4><div><p>Limits the maximum number of characters that can be entered. Use this
|
||||
instead of implementing the logic in JS to avoid flicker.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="multiline"></a>multiline?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/textinput.html#multiline">#</a></h4><div><p>If <code>true</code>, the text input can be multiple lines.
|
||||
The default value is <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onblur"></a>onBlur?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/textinput.html#onblur">#</a></h4><div><p>Callback that is called when the text input is blurred.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchange"></a>onChange?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/textinput.html#onchange">#</a></h4><div><p>Callback that is called when the text input's text changes.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchangetext"></a>onChangeText?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/textinput.html#onchangetext">#</a></h4><div><p>Callback that is called when the text input's text changes.
|
||||
Changed text is passed as an argument to the callback handler.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="oncontentsizechange"></a>onContentSizeChange?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/textinput.html#oncontentsizechange">#</a></h4><div><p>Callback that is called when the text input's content size changes.
|
||||
to events and updating the value prop to keep the controlled state in sync.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="editable"></a>editable?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#editable">#</a></h4><div><p>If <code>false</code>, text is not editable. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboardtype"></a>keyboardType?: <span class="propType">enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search')</span> <a class="hash-link" href="docs/textinput.html#keyboardtype">#</a></h4><div><p>Determines which keyboard to open, e.g.<code>numeric</code>.</p><p>The following values work across platforms:</p><ul><li><code>default</code></li><li><code>numeric</code></li><li><code>email-address</code></li><li><code>phone-pad</code></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maxlength"></a>maxLength?: <span class="propType">number</span> <a class="hash-link" href="docs/textinput.html#maxlength">#</a></h4><div><p>Limits the maximum number of characters that can be entered. Use this
|
||||
instead of implementing the logic in JS to avoid flicker.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="multiline"></a>multiline?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#multiline">#</a></h4><div><p>If <code>true</code>, the text input can be multiple lines.
|
||||
The default value is <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onblur"></a>onBlur?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onblur">#</a></h4><div><p>Callback that is called when the text input is blurred.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchange"></a>onChange?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onchange">#</a></h4><div><p>Callback that is called when the text input's text changes.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchangetext"></a>onChangeText?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onchangetext">#</a></h4><div><p>Callback that is called when the text input's text changes.
|
||||
Changed text is passed as an argument to the callback handler.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="oncontentsizechange"></a>onContentSizeChange?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#oncontentsizechange">#</a></h4><div><p>Callback that is called when the text input's content size changes.
|
||||
This will be called with
|
||||
<code>{ nativeEvent: { contentSize: { width, height } } }</code>.</p><p>Only called for multiline text inputs.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendediting"></a>onEndEditing?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/textinput.html#onendediting">#</a></h4><div><p>Callback that is called when text input ends.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onfocus"></a>onFocus?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/textinput.html#onfocus">#</a></h4><div><p>Callback that is called when the text input is focused.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/textinput.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with <code>{x, y, width, height}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onscroll"></a>onScroll?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/textinput.html#onscroll">#</a></h4><div><p>Invoked on content scroll with <code>{ nativeEvent: { contentOffset: { x, y } } }</code>.
|
||||
<code>{ nativeEvent: { contentSize: { width, height } } }</code>.</p><p>Only called for multiline text inputs.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendediting"></a>onEndEditing?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onendediting">#</a></h4><div><p>Callback that is called when text input ends.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onfocus"></a>onFocus?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onfocus">#</a></h4><div><p>Callback that is called when the text input is focused.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with <code>{x, y, width, height}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onscroll"></a>onScroll?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onscroll">#</a></h4><div><p>Invoked on content scroll with <code>{ nativeEvent: { contentOffset: { x, y } } }</code>.
|
||||
May also contain other properties from ScrollEvent but on Android contentSize
|
||||
is not provided for performance reasons.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onselectionchange"></a>onSelectionChange?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/textinput.html#onselectionchange">#</a></h4><div><p>Callback that is called when the text input selection is changed.
|
||||
is not provided for performance reasons.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onselectionchange"></a>onSelectionChange?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onselectionchange">#</a></h4><div><p>Callback that is called when the text input selection is changed.
|
||||
This will be called with
|
||||
<code>{ nativeEvent: { selection: { start, end } } }</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onsubmitediting"></a>onSubmitEditing?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/textinput.html#onsubmitediting">#</a></h4><div><p>Callback that is called when the text input's submit button is pressed.
|
||||
Invalid if <code>multiline={true}</code> is specified.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="placeholder"></a>placeholder?: <span class="propType">PropTypes.node</span> <a class="hash-link" href="docs/textinput.html#placeholder">#</a></h4><div><p>The string that will be rendered before text input has been entered.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="placeholdertextcolor"></a>placeholderTextColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/textinput.html#placeholdertextcolor">#</a></h4><div><p>The text color of the placeholder string.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="returnkeytype"></a>returnKeyType?: <span class="propType">PropTypes.oneOf([
|
||||
// Cross-platform
|
||||
'done',
|
||||
'go',
|
||||
'next',
|
||||
'search',
|
||||
'send',
|
||||
// Android-only
|
||||
'none',
|
||||
'previous',
|
||||
// iOS-only
|
||||
'default',
|
||||
'emergency-call',
|
||||
'google',
|
||||
'join',
|
||||
'route',
|
||||
'yahoo',
|
||||
])</span> <a class="hash-link" href="docs/textinput.html#returnkeytype">#</a></h4><div><p>Determines how the return key should look. On Android you can also use
|
||||
<code>returnKeyLabel</code>.</p><p><em>Cross platform</em></p><p>The following values work across platforms:</p><ul><li><code>done</code></li><li><code>go</code></li><li><code>next</code></li><li><code>search</code></li><li><code>send</code></li></ul><p><em>Android Only</em></p><p>The following values work on Android only:</p><ul><li><code>none</code></li><li><code>previous</code></li></ul><p><em>iOS Only</em></p><p>The following values work on iOS only:</p><ul><li><code>default</code></li><li><code>emergency-call</code></li><li><code>google</code></li><li><code>join</code></li><li><code>route</code></li><li><code>yahoo</code></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="securetextentry"></a>secureTextEntry?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/textinput.html#securetextentry">#</a></h4><div><p>If <code>true</code>, the text input obscures the text entered so that sensitive text
|
||||
like passwords stay secure. The default value is <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selecttextonfocus"></a>selectTextOnFocus?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/textinput.html#selecttextonfocus">#</a></h4><div><p>If <code>true</code>, all text will automatically be selected on focus.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selection"></a>selection?: <span class="propType">PropTypes.shape({
|
||||
start: PropTypes.number.isRequired,
|
||||
end: PropTypes.number,
|
||||
})</span> <a class="hash-link" href="docs/textinput.html#selection">#</a></h4><div><p>The start and end of the text input's selection. Set start and end to
|
||||
<code>{ nativeEvent: { selection: { start, end } } }</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onsubmitediting"></a>onSubmitEditing?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onsubmitediting">#</a></h4><div><p>Callback that is called when the text input's submit button is pressed.
|
||||
Invalid if <code>multiline={true}</code> is specified.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="placeholder"></a>placeholder?: <span class="propType">node</span> <a class="hash-link" href="docs/textinput.html#placeholder">#</a></h4><div><p>The string that will be rendered before text input has been entered.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="placeholdertextcolor"></a>placeholderTextColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/textinput.html#placeholdertextcolor">#</a></h4><div><p>The text color of the placeholder string.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="returnkeytype"></a>returnKeyType?: <span class="propType">enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo')</span> <a class="hash-link" href="docs/textinput.html#returnkeytype">#</a></h4><div><p>Determines how the return key should look. On Android you can also use
|
||||
<code>returnKeyLabel</code>.</p><p><em>Cross platform</em></p><p>The following values work across platforms:</p><ul><li><code>done</code></li><li><code>go</code></li><li><code>next</code></li><li><code>search</code></li><li><code>send</code></li></ul><p><em>Android Only</em></p><p>The following values work on Android only:</p><ul><li><code>none</code></li><li><code>previous</code></li></ul><p><em>iOS Only</em></p><p>The following values work on iOS only:</p><ul><li><code>default</code></li><li><code>emergency-call</code></li><li><code>google</code></li><li><code>join</code></li><li><code>route</code></li><li><code>yahoo</code></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="securetextentry"></a>secureTextEntry?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#securetextentry">#</a></h4><div><p>If <code>true</code>, the text input obscures the text entered so that sensitive text
|
||||
like passwords stay secure. The default value is <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selecttextonfocus"></a>selectTextOnFocus?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#selecttextonfocus">#</a></h4><div><p>If <code>true</code>, all text will automatically be selected on focus.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selection"></a>selection?: <span class="propType"><span>{<span><span><span>start: number</span>, </span><span>end: number</span></span>}</span></span> <a class="hash-link" href="docs/textinput.html#selection">#</a></h4><div><p>The start and end of the text input's selection. Set start and end to
|
||||
the same value to position the cursor.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectioncolor"></a>selectionColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/textinput.html#selectioncolor">#</a></h4><div><p>The highlight and cursor color of the text input.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType"><a href="docs/text.html#style">Text#style</a></span> <a class="hash-link" href="docs/textinput.html#style">#</a></h4><div><p>Note that not all Text styles are supported,
|
||||
see <a href="https://github.com/facebook/react-native/issues/7070" target="_blank">Issue#7070</a>
|
||||
for more detail.</p><p><a href="docs/style.html" target="_blank">Styles</a></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="value"></a>value?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/textinput.html#value">#</a></h4><div><p>The value to show for the text input. <code>TextInput</code> is a controlled
|
||||
for more detail.</p><p><a href="docs/style.html" target="_blank">Styles</a></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="value"></a>value?: <span class="propType">string</span> <a class="hash-link" href="docs/textinput.html#value">#</a></h4><div><p>The value to show for the text input. <code>TextInput</code> is a controlled
|
||||
component, which means the native value will be forced to match this
|
||||
value prop if provided. For most uses, this works great, but in some
|
||||
cases this may cause flickering - one common cause is preventing edits
|
||||
by keeping value the same. In addition to simply setting the same value,
|
||||
either set <code>editable={false}</code>, or set/update <code>maxLength</code> to prevent
|
||||
unwanted edits without flicker.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="disablefullscreenui"></a><span class="platform">android</span>disableFullscreenUI?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/textinput.html#disablefullscreenui">#</a></h4><div><p>When <code>false</code>, if there is a small amount of space available around a text input
|
||||
unwanted edits without flicker.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="disablefullscreenui"></a><span class="platform">android</span>disableFullscreenUI?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#disablefullscreenui">#</a></h4><div><p>When <code>false</code>, if there is a small amount of space available around a text input
|
||||
(e.g. landscape orientation on a phone), the OS may choose to have the user edit
|
||||
the text inside of a full screen text input mode. When <code>true</code>, this feature is
|
||||
disabled and users will always edit the text directly inside of the text input.
|
||||
Defaults to <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="inlineimageleft"></a><span class="platform">android</span>inlineImageLeft?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/textinput.html#inlineimageleft">#</a></h4><div><p>If defined, the provided image resource will be rendered on the left.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="inlineimagepadding"></a><span class="platform">android</span>inlineImagePadding?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/textinput.html#inlineimagepadding">#</a></h4><div><p>Padding between the inline image, if any, and the text input itself.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="numberoflines"></a><span class="platform">android</span>numberOfLines?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/textinput.html#numberoflines">#</a></h4><div><p>Sets the number of lines for a <code>TextInput</code>. Use it with multiline set to
|
||||
<code>true</code> to be able to fill the lines.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="returnkeylabel"></a><span class="platform">android</span>returnKeyLabel?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/textinput.html#returnkeylabel">#</a></h4><div><p>Sets the return key to the label. Use it instead of <code>returnKeyType</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="textbreakstrategy"></a><span class="platform">android</span>textBreakStrategy?: <span class="propType">PropTypes.oneOf(['simple', 'highQuality', 'balanced'])</span> <a class="hash-link" href="docs/textinput.html#textbreakstrategy">#</a></h4><div><p>Set text break strategy on Android API Level 23+, possible values are <code>simple</code>, <code>highQuality</code>, <code>balanced</code>
|
||||
The default value is <code>simple</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="underlinecolorandroid"></a><span class="platform">android</span>underlineColorAndroid?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/textinput.html#underlinecolorandroid">#</a></h4><div><p>The color of the <code>TextInput</code> underline.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="clearbuttonmode"></a><span class="platform">ios</span>clearButtonMode?: <span class="propType">PropTypes.oneOf([
|
||||
'never',
|
||||
'while-editing',
|
||||
'unless-editing',
|
||||
'always',
|
||||
])</span> <a class="hash-link" href="docs/textinput.html#clearbuttonmode">#</a></h4><div><p>When the clear button should appear on the right side of the text view.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="cleartextonfocus"></a><span class="platform">ios</span>clearTextOnFocus?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/textinput.html#cleartextonfocus">#</a></h4><div><p>If <code>true</code>, clears the text field automatically when editing begins.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="datadetectortypes"></a><span class="platform">ios</span>dataDetectorTypes?: <span class="propType">PropTypes.oneOfType([
|
||||
PropTypes.oneOf(DataDetectorTypes),
|
||||
PropTypes.arrayOf(PropTypes.oneOf(DataDetectorTypes)),
|
||||
])</span> <a class="hash-link" href="docs/textinput.html#datadetectortypes">#</a></h4><div><p>Determines the types of data converted to clickable URLs in the text input.
|
||||
Defaults to <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="inlineimageleft"></a><span class="platform">android</span>inlineImageLeft?: <span class="propType">string</span> <a class="hash-link" href="docs/textinput.html#inlineimageleft">#</a></h4><div><p>If defined, the provided image resource will be rendered on the left.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="inlineimagepadding"></a><span class="platform">android</span>inlineImagePadding?: <span class="propType">number</span> <a class="hash-link" href="docs/textinput.html#inlineimagepadding">#</a></h4><div><p>Padding between the inline image, if any, and the text input itself.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="numberoflines"></a><span class="platform">android</span>numberOfLines?: <span class="propType">number</span> <a class="hash-link" href="docs/textinput.html#numberoflines">#</a></h4><div><p>Sets the number of lines for a <code>TextInput</code>. Use it with multiline set to
|
||||
<code>true</code> to be able to fill the lines.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="returnkeylabel"></a><span class="platform">android</span>returnKeyLabel?: <span class="propType">string</span> <a class="hash-link" href="docs/textinput.html#returnkeylabel">#</a></h4><div><p>Sets the return key to the label. Use it instead of <code>returnKeyType</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="textbreakstrategy"></a><span class="platform">android</span>textBreakStrategy?: <span class="propType">enum('simple', 'highQuality', 'balanced')</span> <a class="hash-link" href="docs/textinput.html#textbreakstrategy">#</a></h4><div><p>Set text break strategy on Android API Level 23+, possible values are <code>simple</code>, <code>highQuality</code>, <code>balanced</code>
|
||||
The default value is <code>simple</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="underlinecolorandroid"></a><span class="platform">android</span>underlineColorAndroid?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/textinput.html#underlinecolorandroid">#</a></h4><div><p>The color of the <code>TextInput</code> underline.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="clearbuttonmode"></a><span class="platform">ios</span>clearButtonMode?: <span class="propType">enum('never', 'while-editing', 'unless-editing', 'always')</span> <a class="hash-link" href="docs/textinput.html#clearbuttonmode">#</a></h4><div><p>When the clear button should appear on the right side of the text view.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="cleartextonfocus"></a><span class="platform">ios</span>clearTextOnFocus?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#cleartextonfocus">#</a></h4><div><p>If <code>true</code>, clears the text field automatically when editing begins.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="datadetectortypes"></a><span class="platform">ios</span>dataDetectorTypes?: <span class="propType"><span><span>enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), </span><span>[enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all')]</span></span></span> <a class="hash-link" href="docs/textinput.html#datadetectortypes">#</a></h4><div><p>Determines the types of data converted to clickable URLs in the text input.
|
||||
Only valid if <code>multiline={true}</code> and <code>editable={false}</code>.
|
||||
By default no data types are detected.</p><p>You can provide one type or an array of many types.</p><p>Possible values for <code>dataDetectorTypes</code> are:</p><ul><li><code>'phoneNumber'</code></li><li><code>'link'</code></li><li><code>'address'</code></li><li><code>'calendarEvent'</code></li><li><code>'none'</code></li><li><code>'all'</code></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="enablesreturnkeyautomatically"></a><span class="platform">ios</span>enablesReturnKeyAutomatically?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/textinput.html#enablesreturnkeyautomatically">#</a></h4><div><p>If <code>true</code>, the keyboard disables the return key when there is no text and
|
||||
automatically enables it when there is text. The default value is <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboardappearance"></a><span class="platform">ios</span>keyboardAppearance?: <span class="propType">PropTypes.oneOf([
|
||||
'default',
|
||||
'light',
|
||||
'dark',
|
||||
])</span> <a class="hash-link" href="docs/textinput.html#keyboardappearance">#</a></h4><div><p>Determines the color of the keyboard.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onkeypress"></a><span class="platform">ios</span>onKeyPress?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/textinput.html#onkeypress">#</a></h4><div><p>Callback that is called when a key is pressed.
|
||||
By default no data types are detected.</p><p>You can provide one type or an array of many types.</p><p>Possible values for <code>dataDetectorTypes</code> are:</p><ul><li><code>'phoneNumber'</code></li><li><code>'link'</code></li><li><code>'address'</code></li><li><code>'calendarEvent'</code></li><li><code>'none'</code></li><li><code>'all'</code></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="enablesreturnkeyautomatically"></a><span class="platform">ios</span>enablesReturnKeyAutomatically?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#enablesreturnkeyautomatically">#</a></h4><div><p>If <code>true</code>, the keyboard disables the return key when there is no text and
|
||||
automatically enables it when there is text. The default value is <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboardappearance"></a><span class="platform">ios</span>keyboardAppearance?: <span class="propType">enum('default', 'light', 'dark')</span> <a class="hash-link" href="docs/textinput.html#keyboardappearance">#</a></h4><div><p>Determines the color of the keyboard.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onkeypress"></a><span class="platform">ios</span>onKeyPress?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onkeypress">#</a></h4><div><p>Callback that is called when a key is pressed.
|
||||
This will be called with <code>{ nativeEvent: { key: keyValue } }</code>
|
||||
where <code>keyValue</code> is <code>'Enter'</code> or <code>'Backspace'</code> for respective keys and
|
||||
the typed-in character otherwise including <code>' '</code> for space.
|
||||
Fires before <code>onChange</code> callbacks.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectionstate"></a><span class="platform">ios</span>selectionState?: <span class="propType">PropTypes.instanceOf(DocumentSelectionState)</span> <a class="hash-link" href="docs/textinput.html#selectionstate">#</a></h4><div><p>An instance of <code>DocumentSelectionState</code>, this is some state that is responsible for
|
||||
Fires before <code>onChange</code> callbacks.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectionstate"></a><span class="platform">ios</span>selectionState?: <span class="propType">DocumentSelectionState</span> <a class="hash-link" href="docs/textinput.html#selectionstate">#</a></h4><div><p>An instance of <code>DocumentSelectionState</code>, this is some state that is responsible for
|
||||
maintaining selection information for a document.</p><p>Some functionality that can be performed with this instance is:</p><ul><li><code>blur()</code></li><li><code>focus()</code></li><li><code>update()</code></li></ul><blockquote><p>You can reference <code>DocumentSelectionState</code> in
|
||||
<a href="https://github.com/facebook/react-native/blob/master/Libraries/vendor/document/selection/DocumentSelectionState.js" target="_blank"><code>vendor/document/selection/DocumentSelectionState.js</code></a></p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="spellcheck"></a><span class="platform">ios</span>spellCheck?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/textinput.html#spellcheck">#</a></h4><div><p>If <code>false</code>, disables spell-check style (i.e. red underlines).
|
||||
<a href="https://github.com/facebook/react-native/blob/master/Libraries/vendor/document/selection/DocumentSelectionState.js" target="_blank"><code>vendor/document/selection/DocumentSelectionState.js</code></a></p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="spellcheck"></a><span class="platform">ios</span>spellCheck?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#spellcheck">#</a></h4><div><p>If <code>false</code>, disables spell-check style (i.e. red underlines).
|
||||
The default value is inherited from <code>autoCorrect</code>.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/textinput.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="isfocused"></a>isFocused<span class="methodType">(): </span> <a class="hash-link" href="docs/textinput.html#isfocused">#</a></h4><div><p>Returns <code>true</code> if the input is currently focused; <code>false</code> otherwise.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="clear"></a>clear<span class="methodType">()</span> <a class="hash-link" href="docs/textinput.html#clear">#</a></h4><div><p>Removes all text from the <code>TextInput</code>.</p></div></div></div></span></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/TextInput/TextInput.js">edit the content above on GitHub</a> and send us a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/text.html#content">← Prev</a><a class="docs-next" href="docs/toolbarandroid.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></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 © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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),
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -6,7 +6,7 @@
|
||||
</span>InteractionManager<span class="token punctuation">.</span><span class="token function">clearInteractionHandle</span><span class="token punctuation">(</span>handle<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">
|
||||
// queued tasks run if all handles were cleared</span></div><h2><a class="anchor" name="timermixin"></a>TimerMixin <a class="hash-link" href="docs/timers.html#timermixin">#</a></h2><p>We found out that the primary cause of fatals in apps created with React Native was due to timers firing after a component was unmounted. To solve this recurring issue, we introduced <code>TimerMixin</code>. If you include <code>TimerMixin</code>, then you can replace your calls to <code>setTimeout(fn, 500)</code> with <code>this.setTimeout(fn, 500)</code> (just prepend <code>this.</code>) and everything will be properly cleaned up for you when the component unmounts.</p><p>This library does not ship with React Native - in order to use it on your project, you will need to install it with <code>npm i react-timer-mixin --save</code> from your project directory.</p><div class="prism language-javascript"><span class="token keyword">import</span> TimerMixin <span class="token keyword">from</span> <span class="token string">'react-timer-mixin'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> Component <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> Component <span class="token operator">=</span> <span class="token function">createReactClass</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
mixins<span class="token punctuation">:</span> <span class="token punctuation">[</span>TimerMixin<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
componentDidMount<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setTimeout</span><span class="token punctuation">(</span>
|
||||
|
||||
@@ -18,25 +18,20 @@ onActionSelected<span class="token punctuation">:</span> <span class="token keyw
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>position <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment" spellcheck="true"> // index of 'Settings'
|
||||
</span> <span class="token function">showSettings</span><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></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/toolbarandroid.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/toolbarandroid.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="actions"></a>actions?: <span class="propType">PropTypes.arrayOf(PropTypes.shape({
|
||||
title: PropTypes.string.isRequired,
|
||||
icon: optionalImageSource,
|
||||
show: PropTypes.oneOf(['always', 'ifRoom', 'never']),
|
||||
showWithText: PropTypes.bool
|
||||
}))</span> <a class="hash-link" href="docs/toolbarandroid.html#actions">#</a></h4><div><p>Sets possible actions on the toolbar as part of the action menu. These are displayed as icons
|
||||
<span class="token punctuation">}</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/toolbarandroid.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/toolbarandroid.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="actions"></a>actions?: <span class="propType"><span>[<span>{<span><span><span>title: string</span>, </span><span><span>icon: optionalImageSource</span>, </span><span><span>show: enum('always', 'ifRoom', 'never')</span>, </span><span>showWithText: bool</span></span>}</span>]</span></span> <a class="hash-link" href="docs/toolbarandroid.html#actions">#</a></h4><div><p>Sets possible actions on the toolbar as part of the action menu. These are displayed as icons
|
||||
or text on the right side of the widget. If they don't fit they are placed in an 'overflow'
|
||||
menu.</p><p>This property takes an array of objects, where each object has the following keys:</p><ul><li><code>title</code>: <strong>required</strong>, the title of this action</li><li><code>icon</code>: the icon for this action, e.g. <code>require('./some_icon.png')</code></li><li><code>show</code>: when to show this action as an icon or hide it in the overflow menu: <code>always</code>,
|
||||
<code>ifRoom</code> or <code>never</code></li><li><code>showWithText</code>: boolean, whether to show text alongside the icon or not</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinsetend"></a>contentInsetEnd?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/toolbarandroid.html#contentinsetend">#</a></h4><div><p>Sets the content inset for the toolbar ending edge.</p><p>The content inset affects the valid area for Toolbar content other than
|
||||
<code>ifRoom</code> or <code>never</code></li><li><code>showWithText</code>: boolean, whether to show text alongside the icon or not</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinsetend"></a>contentInsetEnd?: <span class="propType">number</span> <a class="hash-link" href="docs/toolbarandroid.html#contentinsetend">#</a></h4><div><p>Sets the content inset for the toolbar ending edge.</p><p>The content inset affects the valid area for Toolbar content other than
|
||||
the navigation button and menu. Insets define the minimum margin for
|
||||
these components and can be used to effectively align Toolbar content
|
||||
along well-known gridlines.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinsetstart"></a>contentInsetStart?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/toolbarandroid.html#contentinsetstart">#</a></h4><div><p>Sets the content inset for the toolbar starting edge.</p><p>The content inset affects the valid area for Toolbar content other than
|
||||
along well-known gridlines.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinsetstart"></a>contentInsetStart?: <span class="propType">number</span> <a class="hash-link" href="docs/toolbarandroid.html#contentinsetstart">#</a></h4><div><p>Sets the content inset for the toolbar starting edge.</p><p>The content inset affects the valid area for Toolbar content other than
|
||||
the navigation button and menu. Insets define the minimum margin for
|
||||
these components and can be used to effectively align Toolbar content
|
||||
along well-known gridlines.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="logo"></a>logo?: <span class="propType">optionalImageSource</span> <a class="hash-link" href="docs/toolbarandroid.html#logo">#</a></h4><div><p>Sets the toolbar logo.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navicon"></a>navIcon?: <span class="propType">optionalImageSource</span> <a class="hash-link" href="docs/toolbarandroid.html#navicon">#</a></h4><div><p>Sets the navigation icon.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onactionselected"></a>onActionSelected?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/toolbarandroid.html#onactionselected">#</a></h4><div><p>Callback that is called when an action is selected. The only argument that is passed to the
|
||||
callback is the position of the action in the actions array.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="oniconclicked"></a>onIconClicked?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/toolbarandroid.html#oniconclicked">#</a></h4><div><p>Callback called when the icon is selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="overflowicon"></a>overflowIcon?: <span class="propType">optionalImageSource</span> <a class="hash-link" href="docs/toolbarandroid.html#overflowicon">#</a></h4><div><p>Sets the overflow icon.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rtl"></a>rtl?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/toolbarandroid.html#rtl">#</a></h4><div><p>Used to set the toolbar direction to RTL.
|
||||
along well-known gridlines.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="logo"></a>logo?: <span class="propType">optionalImageSource</span> <a class="hash-link" href="docs/toolbarandroid.html#logo">#</a></h4><div><p>Sets the toolbar logo.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navicon"></a>navIcon?: <span class="propType">optionalImageSource</span> <a class="hash-link" href="docs/toolbarandroid.html#navicon">#</a></h4><div><p>Sets the navigation icon.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onactionselected"></a>onActionSelected?: <span class="propType">function</span> <a class="hash-link" href="docs/toolbarandroid.html#onactionselected">#</a></h4><div><p>Callback that is called when an action is selected. The only argument that is passed to the
|
||||
callback is the position of the action in the actions array.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="oniconclicked"></a>onIconClicked?: <span class="propType">function</span> <a class="hash-link" href="docs/toolbarandroid.html#oniconclicked">#</a></h4><div><p>Callback called when the icon is selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="overflowicon"></a>overflowIcon?: <span class="propType">optionalImageSource</span> <a class="hash-link" href="docs/toolbarandroid.html#overflowicon">#</a></h4><div><p>Sets the overflow icon.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rtl"></a>rtl?: <span class="propType">bool</span> <a class="hash-link" href="docs/toolbarandroid.html#rtl">#</a></h4><div><p>Used to set the toolbar direction to RTL.
|
||||
In addition to this property you need to add</p><p> android:supportsRtl="true"</p><p>to your application AndroidManifest.xml and then call
|
||||
<code>setLayoutDirection(LayoutDirection.RTL)</code> in your MainActivity
|
||||
<code>onCreate</code> method.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="subtitle"></a>subtitle?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/toolbarandroid.html#subtitle">#</a></h4><div><p>Sets the toolbar subtitle.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="subtitlecolor"></a>subtitleColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/toolbarandroid.html#subtitlecolor">#</a></h4><div><p>Sets the toolbar subtitle color.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/toolbarandroid.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="title"></a>title?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/toolbarandroid.html#title">#</a></h4><div><p>Sets the toolbar title.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="titlecolor"></a>titleColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/toolbarandroid.html#titlecolor">#</a></h4><div><p>Sets the toolbar title color.</p></div></div></div></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js">edit the content above on GitHub</a> and send us a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/textinput.html#content">← Prev</a><a class="docs-next" href="docs/touchablehighlight.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></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 © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<code>onCreate</code> method.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="subtitle"></a>subtitle?: <span class="propType">string</span> <a class="hash-link" href="docs/toolbarandroid.html#subtitle">#</a></h4><div><p>Sets the toolbar subtitle.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="subtitlecolor"></a>subtitleColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/toolbarandroid.html#subtitlecolor">#</a></h4><div><p>Sets the toolbar subtitle color.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">string</span> <a class="hash-link" href="docs/toolbarandroid.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="title"></a>title?: <span class="propType">string</span> <a class="hash-link" href="docs/toolbarandroid.html#title">#</a></h4><div><p>Sets the toolbar title.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="titlecolor"></a>titleColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/toolbarandroid.html#titlecolor">#</a></h4><div><p>Sets the toolbar title color.</p></div></div></div></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js">edit the content above on GitHub</a> and send us a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/textinput.html#content">← Prev</a><a class="docs-next" href="docs/touchablehighlight.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></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 © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
@@ -13,9 +13,9 @@ If you wish to have several child components, wrap them in a View.</p><p>Example
|
||||
<span class="token operator">/</span><span class="token operator">></span>
|
||||
<span class="token operator"><</span><span class="token operator">/</span>TouchableHighlight<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/touchablehighlight.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="docs/touchablewithoutfeedback.html#props">TouchableWithoutFeedback props...</a> <a class="hash-link" href="docs/touchablehighlight.html#touchablewithoutfeedback">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="activeopacity"></a>activeOpacity?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/touchablehighlight.html#activeopacity">#</a></h4><div><p>Determines what the opacity of the wrapped view should be when touch is
|
||||
active.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onhideunderlay"></a>onHideUnderlay?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/touchablehighlight.html#onhideunderlay">#</a></h4><div><p>Called immediately after the underlay is hidden</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onshowunderlay"></a>onShowUnderlay?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/touchablehighlight.html#onshowunderlay">#</a></h4><div><p>Called immediately after the underlay is shown</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">ViewPropTypes.style</span> <a class="hash-link" href="docs/touchablehighlight.html#style">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="underlaycolor"></a>underlayColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/touchablehighlight.html#underlaycolor">#</a></h4><div><p>The color of the underlay that will show through when the touch is
|
||||
active.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="hastvpreferredfocus"></a><span class="platform">ios</span>hasTVPreferredFocus?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/touchablehighlight.html#hastvpreferredfocus">#</a></h4><div><p><em>(Apple TV only)</em> TV preferred focus (see documentation for the View component).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tvparallaxproperties"></a><span class="platform">ios</span>tvParallaxProperties?: <span class="propType">PropTypes.object</span> <a class="hash-link" href="docs/touchablehighlight.html#tvparallaxproperties">#</a></h4><div><p><em>(Apple TV only)</em> Object with properties to control Apple TV parallax effects.</p><p>enabled: If true, parallax effects are enabled. Defaults to true.
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/touchablehighlight.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="docs/touchablewithoutfeedback.html#props">TouchableWithoutFeedback props...</a> <a class="hash-link" href="docs/touchablehighlight.html#touchablewithoutfeedback">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="activeopacity"></a>activeOpacity?: <span class="propType">number</span> <a class="hash-link" href="docs/touchablehighlight.html#activeopacity">#</a></h4><div><p>Determines what the opacity of the wrapped view should be when touch is
|
||||
active.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onhideunderlay"></a>onHideUnderlay?: <span class="propType">function</span> <a class="hash-link" href="docs/touchablehighlight.html#onhideunderlay">#</a></h4><div><p>Called immediately after the underlay is hidden</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onshowunderlay"></a>onShowUnderlay?: <span class="propType">function</span> <a class="hash-link" href="docs/touchablehighlight.html#onshowunderlay">#</a></h4><div><p>Called immediately after the underlay is shown</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">ViewPropTypes.style</span> <a class="hash-link" href="docs/touchablehighlight.html#style">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="underlaycolor"></a>underlayColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/touchablehighlight.html#underlaycolor">#</a></h4><div><p>The color of the underlay that will show through when the touch is
|
||||
active.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="hastvpreferredfocus"></a><span class="platform">ios</span>hasTVPreferredFocus?: <span class="propType">bool</span> <a class="hash-link" href="docs/touchablehighlight.html#hastvpreferredfocus">#</a></h4><div><p><em>(Apple TV only)</em> TV preferred focus (see documentation for the View component).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tvparallaxproperties"></a><span class="platform">ios</span>tvParallaxProperties?: <span class="propType">object</span> <a class="hash-link" href="docs/touchablehighlight.html#tvparallaxproperties">#</a></h4><div><p><em>(Apple TV only)</em> Object with properties to control Apple TV parallax effects.</p><p>enabled: If true, parallax effects are enabled. Defaults to true.
|
||||
shiftDistanceX: Defaults to 2.0.
|
||||
shiftDistanceY: Defaults to 2.0.
|
||||
tiltAngle: Defaults to 0.05.
|
||||
|
||||
@@ -16,7 +16,7 @@ RCTView node with some additional properties set.</p><p>Background drawable of n
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/touchablenativefeedback.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="docs/touchablewithoutfeedback.html#props">TouchableWithoutFeedback props...</a> <a class="hash-link" href="docs/touchablenativefeedback.html#touchablewithoutfeedback">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="background"></a>background?: <span class="propType">backgroundPropType</span> <a class="hash-link" href="docs/touchablenativefeedback.html#background">#</a></h4><div><p>Determines the type of background drawable that's going to be used to
|
||||
display feedback. It takes an object with <code>type</code> property and extra data
|
||||
depending on the <code>type</code>. It's recommended to use one of the static
|
||||
methods to generate that dictionary.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="useforeground"></a>useForeground?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/touchablenativefeedback.html#useforeground">#</a></h4><div><p>Set to true to add the ripple effect to the foreground of the view, instead of the
|
||||
methods to generate that dictionary.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="useforeground"></a>useForeground?: <span class="propType">bool</span> <a class="hash-link" href="docs/touchablenativefeedback.html#useforeground">#</a></h4><div><p>Set to true to add the ripple effect to the foreground of the view, instead of the
|
||||
background. This is useful if one of your child views has a background of its own, or you're
|
||||
e.g. displaying images, and you don't want the ripple to be covered by them.</p><p>Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on
|
||||
Android 6.0 and above. If you try to use this on older versions you will get a warning and
|
||||
|
||||
@@ -9,8 +9,8 @@ added to the view hiearchy. Be aware that this can affect layout.</p><p>Example
|
||||
<span class="token operator">/</span><span class="token operator">></span>
|
||||
<span class="token operator"><</span><span class="token operator">/</span>TouchableOpacity<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/touchableopacity.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="docs/touchablewithoutfeedback.html#props">TouchableWithoutFeedback props...</a> <a class="hash-link" href="docs/touchableopacity.html#touchablewithoutfeedback">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="activeopacity"></a>activeOpacity?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/touchableopacity.html#activeopacity">#</a></h4><div><p>Determines what the opacity of the wrapped view should be when touch is
|
||||
active. Defaults to 0.2.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="focusedopacity"></a>focusedOpacity?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/touchableopacity.html#focusedopacity">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tvparallaxproperties"></a>tvParallaxProperties?: <span class="propType">PropTypes.object</span> <a class="hash-link" href="docs/touchableopacity.html#tvparallaxproperties">#</a></h4><div><p>Apple TV parallax effects</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/touchableopacity.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setopacityto"></a>setOpacityTo<span class="methodType">(value: number, duration: number)</span> <a class="hash-link" href="docs/touchableopacity.html#setopacityto">#</a></h4><div><p>Animate the touchable to a new opacity.</p></div></div></div></span></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableOpacity.js">edit the content above on GitHub</a> and send us a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/touchablenativefeedback.html#content">← Prev</a><a class="docs-next" href="docs/touchablewithoutfeedback.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></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 © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/touchableopacity.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="docs/touchablewithoutfeedback.html#props">TouchableWithoutFeedback props...</a> <a class="hash-link" href="docs/touchableopacity.html#touchablewithoutfeedback">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="activeopacity"></a>activeOpacity?: <span class="propType">number</span> <a class="hash-link" href="docs/touchableopacity.html#activeopacity">#</a></h4><div><p>Determines what the opacity of the wrapped view should be when touch is
|
||||
active. Defaults to 0.2.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="focusedopacity"></a>focusedOpacity?: <span class="propType">number</span> <a class="hash-link" href="docs/touchableopacity.html#focusedopacity">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tvparallaxproperties"></a>tvParallaxProperties?: <span class="propType">object</span> <a class="hash-link" href="docs/touchableopacity.html#tvparallaxproperties">#</a></h4><div><p>Apple TV parallax effects</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/touchableopacity.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setopacityto"></a>setOpacityTo<span class="methodType">(value: number, duration: number)</span> <a class="hash-link" href="docs/touchableopacity.html#setopacityto">#</a></h4><div><p>Animate the touchable to a new opacity.</p></div></div></div></span></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableOpacity.js">edit the content above on GitHub</a> and send us a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/touchablenativefeedback.html#content">← Prev</a><a class="docs-next" href="docs/touchablewithoutfeedback.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></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 © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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)
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -16,42 +16,37 @@ padding.</p><div class="prism language-javascript"><span class="token keyword">c
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span></div><blockquote><p><code>View</code>s are designed to be used with <a href="docs/style.html" target="_blank"><code>StyleSheet</code></a> for clarity
|
||||
and performance, although inline styles are also supported.</p></blockquote><h3><a class="anchor" name="synthetic-touch-events"></a>Synthetic Touch Events <a class="hash-link" href="docs/view.html#synthetic-touch-events">#</a></h3><p>For <code>View</code> responder props (e.g., <code>onResponderMove</code>), the synthetic touch event passed to them
|
||||
are of the following form:</p><ul><li><code>nativeEvent</code><ul><li><code>changedTouches</code> - Array of all touch events that have changed since the last event.</li><li><code>identifier</code> - The ID of the touch.</li><li><code>locationX</code> - The X position of the touch, relative to the element.</li><li><code>locationY</code> - The Y position of the touch, relative to the element.</li><li><code>pageX</code> - The X position of the touch, relative to the root element.</li><li><code>pageY</code> - The Y position of the touch, relative to the root element.</li><li><code>target</code> - The node id of the element receiving the touch event.</li><li><code>timestamp</code> - A time identifier for the touch, useful for velocity calculation.</li><li><code>touches</code> - Array of all current touches on the screen.</li></ul></li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/view.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/view.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitylabel"></a>accessibilityLabel?: <span class="propType">PropTypes.node</span> <a class="hash-link" href="docs/view.html#accessibilitylabel">#</a></h4><div><p>Overrides the text that's read by the screen reader when the user interacts
|
||||
are of the following form:</p><ul><li><code>nativeEvent</code><ul><li><code>changedTouches</code> - Array of all touch events that have changed since the last event.</li><li><code>identifier</code> - The ID of the touch.</li><li><code>locationX</code> - The X position of the touch, relative to the element.</li><li><code>locationY</code> - The Y position of the touch, relative to the element.</li><li><code>pageX</code> - The X position of the touch, relative to the root element.</li><li><code>pageY</code> - The Y position of the touch, relative to the root element.</li><li><code>target</code> - The node id of the element receiving the touch event.</li><li><code>timestamp</code> - A time identifier for the touch, useful for velocity calculation.</li><li><code>touches</code> - Array of all current touches on the screen.</li></ul></li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/view.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/view.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitylabel"></a>accessibilityLabel?: <span class="propType">node</span> <a class="hash-link" href="docs/view.html#accessibilitylabel">#</a></h4><div><p>Overrides the text that's read by the screen reader when the user interacts
|
||||
with the element. By default, the label is constructed by traversing all the
|
||||
children and accumulating all the <code>Text</code> nodes separated by space.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a>accessible?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/view.html#accessible">#</a></h4><div><p>When <code>true</code>, indicates that the view is an accessibility element. By default,
|
||||
children and accumulating all the <code>Text</code> nodes separated by space.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a>accessible?: <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#accessible">#</a></h4><div><p>When <code>true</code>, indicates that the view is an accessibility element. By default,
|
||||
all the touchable elements are accessible.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="hitslop"></a>hitSlop?: <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/view.html#hitslop">#</a></h4><div><p>This defines how far a touch event can start away from the view.
|
||||
Typical interface guidelines recommend touch targets that are at least
|
||||
30 - 40 points/density-independent pixels.</p><p>For example, if a touchable view has a height of 20 the touchable height can be extended to
|
||||
40 with <code>hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}</code></p><blockquote><p>The touch area never extends past the parent view bounds and the Z-index
|
||||
of sibling views always takes precedence if a touch hits two overlapping
|
||||
views.</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="nativeid"></a>nativeID?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/view.html#nativeid">#</a></h4><div><p>Used to locate this view from native classes.</p><blockquote><p>This disables the 'layout-only view removal' optimization for this view!</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onaccessibilitytap"></a>onAccessibilityTap?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onaccessibilitytap">#</a></h4><div><p>When <code>accessible</code> is true, the system will try to invoke this function
|
||||
when the user performs accessibility tap gesture.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with:</p><p><code>{nativeEvent: { layout: {x, y, width, height}}}</code></p><p>This event is fired immediately once the layout has been calculated, but
|
||||
views.</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="nativeid"></a>nativeID?: <span class="propType">string</span> <a class="hash-link" href="docs/view.html#nativeid">#</a></h4><div><p>Used to locate this view from native classes.</p><blockquote><p>This disables the 'layout-only view removal' optimization for this view!</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onaccessibilitytap"></a>onAccessibilityTap?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onaccessibilitytap">#</a></h4><div><p>When <code>accessible</code> is true, the system will try to invoke this function
|
||||
when the user performs accessibility tap gesture.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with:</p><p><code>{nativeEvent: { layout: {x, y, width, height}}}</code></p><p>This event is fired immediately once the layout has been calculated, but
|
||||
the new layout may not yet be reflected on the screen at the time the
|
||||
event is received, especially if a layout animation is in progress.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmagictap"></a>onMagicTap?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onmagictap">#</a></h4><div><p>When <code>accessible</code> is <code>true</code>, the system will invoke this function when the
|
||||
user performs the magic tap gesture.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmoveshouldsetresponder"></a>onMoveShouldSetResponder?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onmoveshouldsetresponder">#</a></h4><div><p>Does this view want to "claim" touch responsiveness? This is called for every touch move on
|
||||
event is received, especially if a layout animation is in progress.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmagictap"></a>onMagicTap?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onmagictap">#</a></h4><div><p>When <code>accessible</code> is <code>true</code>, the system will invoke this function when the
|
||||
user performs the magic tap gesture.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmoveshouldsetresponder"></a>onMoveShouldSetResponder?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onmoveshouldsetresponder">#</a></h4><div><p>Does this view want to "claim" touch responsiveness? This is called for every touch move on
|
||||
the <code>View</code> when it is not the responder.</p><p><code>View.props.onMoveShouldSetResponder: (event) => [true | false]</code>, where <code>event</code> is a
|
||||
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmoveshouldsetrespondercapture"></a>onMoveShouldSetResponderCapture?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onmoveshouldsetrespondercapture">#</a></h4><div><p>If a parent <code>View</code> wants to prevent a child <code>View</code> from becoming responder on a move,
|
||||
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmoveshouldsetrespondercapture"></a>onMoveShouldSetResponderCapture?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onmoveshouldsetrespondercapture">#</a></h4><div><p>If a parent <code>View</code> wants to prevent a child <code>View</code> from becoming responder on a move,
|
||||
it should have this handler which returns <code>true</code>.</p><p><code>View.props.onMoveShouldSetResponderCapture: (event) => [true | false]</code>, where <code>event</code> is a
|
||||
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrespondergrant"></a>onResponderGrant?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onrespondergrant">#</a></h4><div><p>The View is now responding for touch events. This is the time to highlight and show the user
|
||||
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrespondergrant"></a>onResponderGrant?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onrespondergrant">#</a></h4><div><p>The View is now responding for touch events. This is the time to highlight and show the user
|
||||
what is happening.</p><p><code>View.props.onResponderGrant: (event) => {}</code>, where <code>event</code> is a synthetic touch event as
|
||||
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrespondermove"></a>onResponderMove?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onrespondermove">#</a></h4><div><p>The user is moving their finger.</p><p><code>View.props.onResponderMove: (event) => {}</code>, where <code>event</code> is a synthetic touch event as
|
||||
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderreject"></a>onResponderReject?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onresponderreject">#</a></h4><div><p>Another responder is already active and will not release it to that <code>View</code> asking to be
|
||||
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrespondermove"></a>onResponderMove?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onrespondermove">#</a></h4><div><p>The user is moving their finger.</p><p><code>View.props.onResponderMove: (event) => {}</code>, where <code>event</code> is a synthetic touch event as
|
||||
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderreject"></a>onResponderReject?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onresponderreject">#</a></h4><div><p>Another responder is already active and will not release it to that <code>View</code> asking to be
|
||||
the responder.</p><p><code>View.props.onResponderReject: (event) => {}</code>, where <code>event</code> is a synthetic touch event as
|
||||
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderrelease"></a>onResponderRelease?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onresponderrelease">#</a></h4><div><p>Fired at the end of the touch.</p><p><code>View.props.onResponderRelease: (event) => {}</code>, where <code>event</code> is a synthetic touch event as
|
||||
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderterminate"></a>onResponderTerminate?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onresponderterminate">#</a></h4><div><p>The responder has been taken from the <code>View</code>. Might be taken by other views after a call to
|
||||
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderrelease"></a>onResponderRelease?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onresponderrelease">#</a></h4><div><p>Fired at the end of the touch.</p><p><code>View.props.onResponderRelease: (event) => {}</code>, where <code>event</code> is a synthetic touch event as
|
||||
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderterminate"></a>onResponderTerminate?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onresponderterminate">#</a></h4><div><p>The responder has been taken from the <code>View</code>. Might be taken by other views after a call to
|
||||
<code>onResponderTerminationRequest</code>, or might be taken by the OS without asking (e.g., happens
|
||||
with control center/ notification center on iOS)</p><p><code>View.props.onResponderTerminate: (event) => {}</code>, where <code>event</code> is a synthetic touch event as
|
||||
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderterminationrequest"></a>onResponderTerminationRequest?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onresponderterminationrequest">#</a></h4><div><p>Some other <code>View</code> wants to become responder and is asking this <code>View</code> to release its
|
||||
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderterminationrequest"></a>onResponderTerminationRequest?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onresponderterminationrequest">#</a></h4><div><p>Some other <code>View</code> wants to become responder and is asking this <code>View</code> to release its
|
||||
responder. Returning <code>true</code> allows its release.</p><p><code>View.props.onResponderTerminationRequest: (event) => {}</code>, where <code>event</code> is a synthetic touch
|
||||
event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onstartshouldsetresponder"></a>onStartShouldSetResponder?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onstartshouldsetresponder">#</a></h4><div><p>Does this view want to become responder on the start of a touch?</p><p><code>View.props.onStartShouldSetResponder: (event) => [true | false]</code>, where <code>event</code> is a
|
||||
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onstartshouldsetrespondercapture"></a>onStartShouldSetResponderCapture?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/view.html#onstartshouldsetrespondercapture">#</a></h4><div><p>If a parent <code>View</code> wants to prevent a child <code>View</code> from becoming responder on a touch start,
|
||||
event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onstartshouldsetresponder"></a>onStartShouldSetResponder?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onstartshouldsetresponder">#</a></h4><div><p>Does this view want to become responder on the start of a touch?</p><p><code>View.props.onStartShouldSetResponder: (event) => [true | false]</code>, where <code>event</code> is a
|
||||
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onstartshouldsetrespondercapture"></a>onStartShouldSetResponderCapture?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onstartshouldsetrespondercapture">#</a></h4><div><p>If a parent <code>View</code> wants to prevent a child <code>View</code> from becoming responder on a touch start,
|
||||
it should have this handler which returns <code>true</code>.</p><p><code>View.props.onStartShouldSetResponderCapture: (event) => [true | false]</code>, where <code>event</code> is a
|
||||
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pointerevents"></a>pointerEvents?: <span class="propType">PropTypes.oneOf([
|
||||
'box-none',
|
||||
'none',
|
||||
'box-only',
|
||||
'auto',
|
||||
])</span> <a class="hash-link" href="docs/view.html#pointerevents">#</a></h4><div><p>Controls whether the <code>View</code> can be the target of touch events.</p><ul><li><code>'auto'</code>: The View can be the target of touch events.</li><li><code>'none'</code>: The View is never the target of touch events.</li><li><code>'box-none'</code>: The View is never the target of touch events but it's
|
||||
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pointerevents"></a>pointerEvents?: <span class="propType">enum('box-none', 'none', 'box-only', 'auto')</span> <a class="hash-link" href="docs/view.html#pointerevents">#</a></h4><div><p>Controls whether the <code>View</code> can be the target of touch events.</p><ul><li><code>'auto'</code>: The View can be the target of touch events.</li><li><code>'none'</code>: The View is never the target of touch events.</li><li><code>'box-none'</code>: The View is never the target of touch events but it's
|
||||
subviews can be. It behaves like if the view had the following classes
|
||||
in CSS:<div class="prism language-javascript"><span class="token punctuation">.</span>box<span class="token operator">-</span>none <span class="token punctuation">{</span>
|
||||
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||||
@@ -69,33 +64,24 @@ in CSS:<div class="prism language-javascript"><span class="token punctuation">.<
|
||||
already deviating from the spec by adding additional modes, we opt to not
|
||||
include <code>pointerEvents</code> on <code>style</code>. On some platforms, we would need to
|
||||
implement it as a <code>className</code> anyways. Using <code>style</code> or not is an
|
||||
implementation detail of the platform.</p></blockquote></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/view.html#removeclippedsubviews">#</a></h4><div><p>This is a special performance property exposed by <code>RCTView</code> and is useful
|
||||
implementation detail of the platform.</p></blockquote></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews?: <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#removeclippedsubviews">#</a></h4><div><p>This is a special performance property exposed by <code>RCTView</code> and is useful
|
||||
for scrolling content when there are many subviews, most of which are
|
||||
offscreen. For this property to be effective, it must be applied to a
|
||||
view that contains many subviews that extend outside its bound. The
|
||||
subviews must also have <code>overflow: hidden</code>, as should the containing view
|
||||
(or one of its superviews).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">stylePropType</span> <a class="hash-link" href="docs/view.html#style">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/view.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p><blockquote><p>This disables the 'layout-only view removal' optimization for this view!</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitycomponenttype"></a><span class="platform">android</span>accessibilityComponentType?: <span class="propType">PropTypes.oneOf(AccessibilityComponentTypes)</span> <a class="hash-link" href="docs/view.html#accessibilitycomponenttype">#</a></h4><div><p>Indicates to accessibility services to treat UI component like a
|
||||
native one. Works for Android only.</p><p>Possible values are one of:</p><ul><li><code>'none'</code></li><li><code>'button'</code></li><li><code>'radiobutton_checked'</code></li><li><code>'radiobutton_unchecked'</code></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilityliveregion"></a><span class="platform">android</span>accessibilityLiveRegion?: <span class="propType">PropTypes.oneOf([
|
||||
'none',
|
||||
'polite',
|
||||
'assertive',
|
||||
])</span> <a class="hash-link" href="docs/view.html#accessibilityliveregion">#</a></h4><div><p>Indicates to accessibility services whether the user should be notified
|
||||
(or one of its superviews).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">stylePropType</span> <a class="hash-link" href="docs/view.html#style">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">string</span> <a class="hash-link" href="docs/view.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p><blockquote><p>This disables the 'layout-only view removal' optimization for this view!</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitycomponenttype"></a><span class="platform">android</span>accessibilityComponentType?: <span class="propType">AccessibilityComponentTypes</span> <a class="hash-link" href="docs/view.html#accessibilitycomponenttype">#</a></h4><div><p>Indicates to accessibility services to treat UI component like a
|
||||
native one. Works for Android only.</p><p>Possible values are one of:</p><ul><li><code>'none'</code></li><li><code>'button'</code></li><li><code>'radiobutton_checked'</code></li><li><code>'radiobutton_unchecked'</code></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilityliveregion"></a><span class="platform">android</span>accessibilityLiveRegion?: <span class="propType">enum('none', 'polite', 'assertive')</span> <a class="hash-link" href="docs/view.html#accessibilityliveregion">#</a></h4><div><p>Indicates to accessibility services whether the user should be notified
|
||||
when this view changes. Works for Android API >= 19 only.
|
||||
Possible values:</p><ul><li><code>'none'</code> - Accessibility services should not announce changes to this view.</li><li><code>'polite'</code>- Accessibility services should announce changes to this view.</li><li><code>'assertive'</code> - Accessibility services should interrupt ongoing speech to immediately announce changes to this view.</li></ul><p>See the <a href="http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion" target="_blank">Android <code>View</code> docs</a>
|
||||
for reference.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="collapsable"></a><span class="platform">android</span>collapsable?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/view.html#collapsable">#</a></h4><div><p>Views that are only used to layout their children or otherwise don't draw
|
||||
for reference.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="collapsable"></a><span class="platform">android</span>collapsable?: <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#collapsable">#</a></h4><div><p>Views that are only used to layout their children or otherwise don't draw
|
||||
anything may be automatically removed from the native hierarchy as an
|
||||
optimization. Set this property to <code>false</code> to disable this optimization and
|
||||
ensure that this <code>View</code> exists in the native view hierarchy.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="importantforaccessibility"></a><span class="platform">android</span>importantForAccessibility?: <span class="propType">PropTypes.oneOf([
|
||||
'auto',
|
||||
'yes',
|
||||
'no',
|
||||
'no-hide-descendants',
|
||||
])</span> <a class="hash-link" href="docs/view.html#importantforaccessibility">#</a></h4><div><p>Controls how view is important for accessibility which is if it
|
||||
ensure that this <code>View</code> exists in the native view hierarchy.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="importantforaccessibility"></a><span class="platform">android</span>importantForAccessibility?: <span class="propType">enum('auto', 'yes', 'no', 'no-hide-descendants')</span> <a class="hash-link" href="docs/view.html#importantforaccessibility">#</a></h4><div><p>Controls how view is important for accessibility which is if it
|
||||
fires accessibility events and if it is reported to accessibility services
|
||||
that query the screen. Works for Android only.</p><p>Possible values:</p><ul><li><code>'auto'</code> - The system determines whether the view is important for accessibility -
|
||||
default (recommended).</li><li><code>'yes'</code> - The view is important for accessibility.</li><li><code>'no'</code> - The view is not important for accessibility.</li><li><code>'no-hide-descendants'</code> - The view is not important for accessibility,
|
||||
nor are any of its descendant views.</li></ul><p>See the <a href="http://developer.android.com/reference/android/R.attr.html#importantForAccessibility" target="_blank">Android <code>importantForAccessibility</code> docs</a>
|
||||
for reference.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="needsoffscreenalphacompositing"></a><span class="platform">android</span>needsOffscreenAlphaCompositing?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/view.html#needsoffscreenalphacompositing">#</a></h4><div><p>Whether this <code>View</code> needs to rendered offscreen and composited with an alpha
|
||||
for reference.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="needsoffscreenalphacompositing"></a><span class="platform">android</span>needsOffscreenAlphaCompositing?: <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#needsoffscreenalphacompositing">#</a></h4><div><p>Whether this <code>View</code> needs to rendered offscreen and composited with an alpha
|
||||
in order to preserve 100% correct colors and blending behavior. The default
|
||||
(<code>false</code>) falls back to drawing the component and its children with an alpha
|
||||
applied to the paint used to draw each element instead of rendering the full
|
||||
@@ -109,22 +95,19 @@ animation, consider combining it with renderToHardwareTextureAndroid if the
|
||||
view <strong>contents</strong> are static (i.e. it doesn't need to be redrawn each frame).
|
||||
If that property is enabled, this View will be rendered off-screen once,
|
||||
saved in a hardware texture, and then composited onto the screen with an alpha
|
||||
each frame without having to switch rendering targets on the GPU.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendertohardwaretextureandroid"></a><span class="platform">android</span>renderToHardwareTextureAndroid?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/view.html#rendertohardwaretextureandroid">#</a></h4><div><p>Whether this <code>View</code> should render itself (and all of its children) into a
|
||||
each frame without having to switch rendering targets on the GPU.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendertohardwaretextureandroid"></a><span class="platform">android</span>renderToHardwareTextureAndroid?: <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#rendertohardwaretextureandroid">#</a></h4><div><p>Whether this <code>View</code> should render itself (and all of its children) into a
|
||||
single hardware texture on the GPU.</p><p>On Android, this is useful for animations and interactions that only
|
||||
modify opacity, rotation, translation, and/or scale: in those cases, the
|
||||
view doesn't have to be redrawn and display lists don't need to be
|
||||
re-executed. The texture can just be re-used and re-composited with
|
||||
different parameters. The downside is that this can use up limited video
|
||||
memory, so this prop should be set back to false at the end of the
|
||||
interaction/animation.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitytraits"></a><span class="platform">ios</span>accessibilityTraits?: <span class="propType">PropTypes.oneOfType([
|
||||
PropTypes.oneOf(AccessibilityTraits),
|
||||
PropTypes.arrayOf(PropTypes.oneOf(AccessibilityTraits)),
|
||||
])</span> <a class="hash-link" href="docs/view.html#accessibilitytraits">#</a></h4><div><p>Provides additional traits to screen reader. By default no traits are
|
||||
interaction/animation.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitytraits"></a><span class="platform">ios</span>accessibilityTraits?: <span class="propType"><span><span>AccessibilityTraits, </span><span>[AccessibilityTraits]</span></span></span> <a class="hash-link" href="docs/view.html#accessibilitytraits">#</a></h4><div><p>Provides additional traits to screen reader. By default no traits are
|
||||
provided unless specified otherwise in element.</p><p>You can provide one trait or an array of many traits.</p><p>Possible values for <code>AccessibilityTraits</code> are:</p><ul><li><code>'none'</code> - The element has no traits.</li><li><code>'button'</code> - The element should be treated as a button.</li><li><code>'link'</code> - The element should be treated as a link.</li><li><code>'header'</code> - The element is a header that divides content into sections.</li><li><code>'search'</code> - The element should be treated as a search field.</li><li><code>'image'</code> - The element should be treated as an image.</li><li><code>'selected'</code> - The element is selected.</li><li><code>'plays'</code> - The element plays sound.</li><li><code>'key'</code> - The element should be treated like a keyboard key.</li><li><code>'text'</code> - The element should be treated as text.</li><li><code>'summary'</code> - The element provides app summary information.</li><li><code>'disabled'</code> - The element is disabled.</li><li><code>'frequentUpdates'</code> - The element frequently changes its value.</li><li><code>'startsMedia'</code> - The element starts a media session.</li><li><code>'adjustable'</code> - The element allows adjustment over a range of values.</li><li><code>'allowsDirectInteraction'</code> - The element allows direct touch interaction for VoiceOver users.</li><li><code>'pageTurn'</code> - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.</li></ul><p>See the <a href="docs/accessibility.html#accessibilitytraits-ios" target="_blank">Accessibility guide</a>
|
||||
for more information.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilityviewismodal"></a><span class="platform">ios</span>accessibilityViewIsModal?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/view.html#accessibilityviewismodal">#</a></h4><div><p>A value indicating whether VoiceOver should ignore the elements
|
||||
for more information.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilityviewismodal"></a><span class="platform">ios</span>accessibilityViewIsModal?: <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#accessibilityviewismodal">#</a></h4><div><p>A value indicating whether VoiceOver should ignore the elements
|
||||
within views that are siblings of the receiver.
|
||||
Default is <code>false</code>.</p><p>See the <a href="docs/accessibility.html#accessibilitytraits-ios" target="_blank">Accessibility guide</a>
|
||||
for more information.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="shouldrasterizeios"></a><span class="platform">ios</span>shouldRasterizeIOS?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/view.html#shouldrasterizeios">#</a></h4><div><p>Whether this <code>View</code> should be rendered as a bitmap before compositing.</p><p>On iOS, this is useful for animations and interactions that do not
|
||||
for more information.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="shouldrasterizeios"></a><span class="platform">ios</span>shouldRasterizeIOS?: <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#shouldrasterizeios">#</a></h4><div><p>Whether this <code>View</code> should be rendered as a bitmap before compositing.</p><p>On iOS, this is useful for animations and interactions that do not
|
||||
modify this component's dimensions nor its children; for example, when
|
||||
translating the position of a static view, rasterization allows the
|
||||
renderer to reuse a cached bitmap of a static view and quickly composite
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -11,80 +11,35 @@
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span></div><p>You can use this component to navigate back and forth in the web view's
|
||||
history and configure various properties for the web content.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/webview.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/webview.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="automaticallyadjustcontentinsets"></a>automaticallyAdjustContentInsets?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/webview.html#automaticallyadjustcontentinsets">#</a></h4><div><p>Controls whether to adjust the content inset for web views that are
|
||||
history and configure various properties for the web content.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/webview.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/webview.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="automaticallyadjustcontentinsets"></a>automaticallyAdjustContentInsets?: <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#automaticallyadjustcontentinsets">#</a></h4><div><p>Controls whether to adjust the content inset for web views that are
|
||||
placed behind a navigation bar, tab bar, or toolbar. The default value
|
||||
is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinset"></a>contentInset?: <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/webview.html#contentinset">#</a></h4><div><p>The amount by which the web view content is inset from the edges of
|
||||
the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="html"></a>html?: <span class="propType">string</span> <a class="hash-link" href="docs/webview.html#html">#</a></h4><div class="deprecated"><div class="deprecatedTitle"><img class="deprecatedIcon" src="img/Warning.png"><span>Deprecated</span></div><div class="deprecatedMessage"><div><p>Use the <code>source</code> prop instead.</p></div></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="injectjavascript"></a>injectJavaScript?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/webview.html#injectjavascript">#</a></h4><div><p>Function that accepts a string that will be passed to the WebView and
|
||||
executed immediately as JavaScript.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="injectedjavascript"></a>injectedJavaScript?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/webview.html#injectedjavascript">#</a></h4><div><p>Set this to provide JavaScript that will be injected into the web page
|
||||
when the view loads.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mediaplaybackrequiresuseraction"></a>mediaPlaybackRequiresUserAction?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/webview.html#mediaplaybackrequiresuseraction">#</a></h4><div><p>Boolean that determines whether HTML5 audio and video requires the user
|
||||
to tap them before they start playing. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onerror"></a>onError?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/webview.html#onerror">#</a></h4><div><p>Function that is invoked when the <code>WebView</code> load fails.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onload"></a>onLoad?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/webview.html#onload">#</a></h4><div><p>Function that is invoked when the <code>WebView</code> has finished loading.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onloadend"></a>onLoadEnd?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/webview.html#onloadend">#</a></h4><div><p>Function that is invoked when the <code>WebView</code> load succeeds or fails.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onloadstart"></a>onLoadStart?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/webview.html#onloadstart">#</a></h4><div><p>Function that is invoked when the <code>WebView</code> starts loading.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmessage"></a>onMessage?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/webview.html#onmessage">#</a></h4><div><p>A function that is invoked when the webview calls <code>window.postMessage</code>.
|
||||
the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="html"></a>html?: <span class="propType">string</span> <a class="hash-link" href="docs/webview.html#html">#</a></h4><div class="deprecated"><div class="deprecatedTitle"><img class="deprecatedIcon" src="img/Warning.png"><span>Deprecated</span></div><div class="deprecatedMessage"><div><p>Use the <code>source</code> prop instead.</p></div></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="injectjavascript"></a>injectJavaScript?: <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#injectjavascript">#</a></h4><div><p>Function that accepts a string that will be passed to the WebView and
|
||||
executed immediately as JavaScript.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="injectedjavascript"></a>injectedJavaScript?: <span class="propType">string</span> <a class="hash-link" href="docs/webview.html#injectedjavascript">#</a></h4><div><p>Set this to provide JavaScript that will be injected into the web page
|
||||
when the view loads.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mediaplaybackrequiresuseraction"></a>mediaPlaybackRequiresUserAction?: <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#mediaplaybackrequiresuseraction">#</a></h4><div><p>Boolean that determines whether HTML5 audio and video requires the user
|
||||
to tap them before they start playing. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onerror"></a>onError?: <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#onerror">#</a></h4><div><p>Function that is invoked when the <code>WebView</code> load fails.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onload"></a>onLoad?: <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#onload">#</a></h4><div><p>Function that is invoked when the <code>WebView</code> has finished loading.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onloadend"></a>onLoadEnd?: <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#onloadend">#</a></h4><div><p>Function that is invoked when the <code>WebView</code> load succeeds or fails.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onloadstart"></a>onLoadStart?: <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#onloadstart">#</a></h4><div><p>Function that is invoked when the <code>WebView</code> starts loading.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmessage"></a>onMessage?: <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#onmessage">#</a></h4><div><p>A function that is invoked when the webview calls <code>window.postMessage</code>.
|
||||
Setting this property will inject a <code>postMessage</code> global into your
|
||||
webview, but will still call pre-existing values of <code>postMessage</code>.</p><p><code>window.postMessage</code> accepts one argument, <code>data</code>, which will be
|
||||
available on the event object, <code>event.nativeEvent.data</code>. <code>data</code>
|
||||
must be a string.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onnavigationstatechange"></a>onNavigationStateChange?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/webview.html#onnavigationstatechange">#</a></h4><div><p>Function that is invoked when the <code>WebView</code> loading starts or ends.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendererror"></a>renderError?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/webview.html#rendererror">#</a></h4><div><p>Function that returns a view to show if there's an error.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderloading"></a>renderLoading?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/webview.html#renderloading">#</a></h4><div><p>Function that returns a loading indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scalespagetofit"></a>scalesPageToFit?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/webview.html#scalespagetofit">#</a></h4><div><p>Boolean that controls whether the web content is scaled to fit
|
||||
must be a string.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onnavigationstatechange"></a>onNavigationStateChange?: <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#onnavigationstatechange">#</a></h4><div><p>Function that is invoked when the <code>WebView</code> loading starts or ends.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendererror"></a>renderError?: <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#rendererror">#</a></h4><div><p>Function that returns a view to show if there's an error.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderloading"></a>renderLoading?: <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#renderloading">#</a></h4><div><p>Function that returns a loading indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scalespagetofit"></a>scalesPageToFit?: <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#scalespagetofit">#</a></h4><div><p>Boolean that controls whether the web content is scaled to fit
|
||||
the view and enables the user to change the scale. The default value
|
||||
is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="source"></a>source?: <span class="propType">PropTypes.oneOfType([
|
||||
PropTypes.shape({
|
||||
/*
|
||||
* The URI to load in the `WebView`. Can be a local or remote file.
|
||||
*/
|
||||
uri: PropTypes.string,
|
||||
/*
|
||||
* The HTTP Method to use. Defaults to GET if not specified.
|
||||
* NOTE: On Android, only GET and POST are supported.
|
||||
*/
|
||||
method: PropTypes.string,
|
||||
/*
|
||||
* Additional HTTP headers to send with the request.
|
||||
* NOTE: On Android, this can only be used with GET requests.
|
||||
*/
|
||||
headers: PropTypes.object,
|
||||
/*
|
||||
* The HTTP body to send with the request. This must be a valid
|
||||
* UTF-8 string, and will be sent exactly as specified, with no
|
||||
* additional encoding (e.g. URL-escaping or base64) applied.
|
||||
* NOTE: On Android, this can only be used with POST requests.
|
||||
*/
|
||||
body: PropTypes.string,
|
||||
}),
|
||||
PropTypes.shape({
|
||||
/*
|
||||
* A static HTML page to display in the WebView.
|
||||
*/
|
||||
html: PropTypes.string,
|
||||
/*
|
||||
* The base URL to be used for any relative links in the HTML.
|
||||
*/
|
||||
baseUrl: PropTypes.string,
|
||||
}),
|
||||
/*
|
||||
* Used internally by packager.
|
||||
*/
|
||||
PropTypes.number,
|
||||
])</span> <a class="hash-link" href="docs/webview.html#source">#</a></h4><div><p>Loads static html or a uri (with optional headers) in the WebView.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="startinloadingstate"></a>startInLoadingState?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/webview.html#startinloadingstate">#</a></h4><div><p>Boolean value that forces the <code>WebView</code> to show the loading view
|
||||
on the first load.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">ViewPropTypes.style</span> <a class="hash-link" href="docs/webview.html#style">#</a></h4><div><p>The style to apply to the <code>WebView</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="url"></a>url?: <span class="propType">string</span> <a class="hash-link" href="docs/webview.html#url">#</a></h4><div class="deprecated"><div class="deprecatedTitle"><img class="deprecatedIcon" src="img/Warning.png"><span>Deprecated</span></div><div class="deprecatedMessage"><div><p>Use the <code>source</code> prop instead.</p></div></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="domstorageenabled"></a><span class="platform">android</span>domStorageEnabled?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/webview.html#domstorageenabled">#</a></h4><div><p>Boolean value to control whether DOM Storage is enabled. Used only in
|
||||
Android.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="javascriptenabled"></a><span class="platform">android</span>javaScriptEnabled?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/webview.html#javascriptenabled">#</a></h4><div><p>Boolean value to enable JavaScript in the <code>WebView</code>. Used on Android only
|
||||
as JavaScript is enabled by default on iOS. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mixedcontentmode"></a><span class="platform">android</span>mixedContentMode?: <span class="propType">PropTypes.oneOf([
|
||||
'never',
|
||||
'always',
|
||||
'compatibility'
|
||||
])</span> <a class="hash-link" href="docs/webview.html#mixedcontentmode">#</a></h4><div><p>Specifies the mixed content mode. i.e WebView will allow a secure origin to load content from any other origin.</p><p>Possible values for <code>mixedContentMode</code> are:</p><ul><li><code>'never'</code> (default) - WebView will not allow a secure origin to load content from an insecure origin.</li><li><code>'always'</code> - WebView will allow a secure origin to load content from any other origin, even if that origin is insecure.</li><li><code>'compatibility'</code> - WebView will attempt to be compatible with the approach of a modern web browser with regard to mixed content.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="thirdpartycookiesenabled"></a><span class="platform">android</span>thirdPartyCookiesEnabled?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/webview.html#thirdpartycookiesenabled">#</a></h4><div><p>Boolean value to enable third party cookies in the <code>WebView</code>. Used on
|
||||
is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="source"></a>source?: <span class="propType"><span><span><span>{<span><span><span>uri: string</span>, </span><span><span>method: string</span>, </span><span><span>headers: object</span>, </span><span>body: string</span></span>}</span>, </span><span><span>{<span><span><span>html: string</span>, </span><span>baseUrl: string</span></span>}</span>, </span>number</span></span> <a class="hash-link" href="docs/webview.html#source">#</a></h4><div><p>Loads static html or a uri (with optional headers) in the WebView.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="startinloadingstate"></a>startInLoadingState?: <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#startinloadingstate">#</a></h4><div><p>Boolean value that forces the <code>WebView</code> to show the loading view
|
||||
on the first load.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">ViewPropTypes.style</span> <a class="hash-link" href="docs/webview.html#style">#</a></h4><div><p>The style to apply to the <code>WebView</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="url"></a>url?: <span class="propType">string</span> <a class="hash-link" href="docs/webview.html#url">#</a></h4><div class="deprecated"><div class="deprecatedTitle"><img class="deprecatedIcon" src="img/Warning.png"><span>Deprecated</span></div><div class="deprecatedMessage"><div><p>Use the <code>source</code> prop instead.</p></div></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="domstorageenabled"></a><span class="platform">android</span>domStorageEnabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#domstorageenabled">#</a></h4><div><p>Boolean value to control whether DOM Storage is enabled. Used only in
|
||||
Android.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="javascriptenabled"></a><span class="platform">android</span>javaScriptEnabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#javascriptenabled">#</a></h4><div><p>Boolean value to enable JavaScript in the <code>WebView</code>. Used on Android only
|
||||
as JavaScript is enabled by default on iOS. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mixedcontentmode"></a><span class="platform">android</span>mixedContentMode?: <span class="propType">enum('never', 'always', 'compatibility')</span> <a class="hash-link" href="docs/webview.html#mixedcontentmode">#</a></h4><div><p>Specifies the mixed content mode. i.e WebView will allow a secure origin to load content from any other origin.</p><p>Possible values for <code>mixedContentMode</code> are:</p><ul><li><code>'never'</code> (default) - WebView will not allow a secure origin to load content from an insecure origin.</li><li><code>'always'</code> - WebView will allow a secure origin to load content from any other origin, even if that origin is insecure.</li><li><code>'compatibility'</code> - WebView will attempt to be compatible with the approach of a modern web browser with regard to mixed content.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="thirdpartycookiesenabled"></a><span class="platform">android</span>thirdPartyCookiesEnabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#thirdpartycookiesenabled">#</a></h4><div><p>Boolean value to enable third party cookies in the <code>WebView</code>. Used on
|
||||
Android Lollipop and above only as third party cookies are enabled by
|
||||
default on Android Kitkat and below and on iOS. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="useragent"></a><span class="platform">android</span>userAgent?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/webview.html#useragent">#</a></h4><div><p>Sets the user-agent for the <code>WebView</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="allowsinlinemediaplayback"></a><span class="platform">ios</span>allowsInlineMediaPlayback?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/webview.html#allowsinlinemediaplayback">#</a></h4><div><p>Boolean that determines whether HTML5 videos play inline or use the
|
||||
default on Android Kitkat and below and on iOS. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="useragent"></a><span class="platform">android</span>userAgent?: <span class="propType">string</span> <a class="hash-link" href="docs/webview.html#useragent">#</a></h4><div><p>Sets the user-agent for the <code>WebView</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="allowsinlinemediaplayback"></a><span class="platform">ios</span>allowsInlineMediaPlayback?: <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#allowsinlinemediaplayback">#</a></h4><div><p>Boolean that determines whether HTML5 videos play inline or use the
|
||||
native full-screen controller. The default value is <code>false</code>.</p><p><strong>NOTE</strong> : In order for video to play inline, not only does this
|
||||
property need to be set to <code>true</code>, but the video element in the HTML
|
||||
document must also include the <code>webkit-playsinline</code> attribute.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bounces"></a><span class="platform">ios</span>bounces?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/webview.html#bounces">#</a></h4><div><p>Boolean value that determines whether the web view bounces
|
||||
when it reaches the edge of the content. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="datadetectortypes"></a><span class="platform">ios</span>dataDetectorTypes?: <span class="propType">PropTypes.oneOfType([
|
||||
PropTypes.oneOf(DataDetectorTypes),
|
||||
PropTypes.arrayOf(PropTypes.oneOf(DataDetectorTypes)),
|
||||
])</span> <a class="hash-link" href="docs/webview.html#datadetectortypes">#</a></h4><div><p>Determines the types of data converted to clickable URLs in the web view’s content.
|
||||
document must also include the <code>webkit-playsinline</code> attribute.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bounces"></a><span class="platform">ios</span>bounces?: <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#bounces">#</a></h4><div><p>Boolean value that determines whether the web view bounces
|
||||
when it reaches the edge of the content. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="datadetectortypes"></a><span class="platform">ios</span>dataDetectorTypes?: <span class="propType"><span><span>enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), </span><span>[enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all')]</span></span></span> <a class="hash-link" href="docs/webview.html#datadetectortypes">#</a></h4><div><p>Determines the types of data converted to clickable URLs in the web view’s content.
|
||||
By default only phone numbers are detected.</p><p>You can provide one type or an array of many types.</p><p>Possible values for <code>dataDetectorTypes</code> are:</p><ul><li><code>'phoneNumber'</code></li><li><code>'link'</code></li><li><code>'address'</code></li><li><code>'calendarEvent'</code></li><li><code>'none'</code></li><li><code>'all'</code></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="decelerationrate"></a><span class="platform">ios</span>decelerationRate?: <span class="propType">ScrollView.propTypes.decelerationRate</span> <a class="hash-link" href="docs/webview.html#decelerationrate">#</a></h4><div><p>A floating-point number that determines how quickly the scroll view
|
||||
decelerates after the user lifts their finger. You may also use the
|
||||
string shortcuts <code>"normal"</code> and <code>"fast"</code> which match the underlying iOS
|
||||
settings for <code>UIScrollViewDecelerationRateNormal</code> and
|
||||
<code>UIScrollViewDecelerationRateFast</code> respectively:</p><ul><li>normal: 0.998</li><li>fast: 0.99 (the default for iOS web view)</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onshouldstartloadwithrequest"></a><span class="platform">ios</span>onShouldStartLoadWithRequest?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/webview.html#onshouldstartloadwithrequest">#</a></h4><div><p>Function that allows custom handling of any web view requests. Return
|
||||
<code>UIScrollViewDecelerationRateFast</code> respectively:</p><ul><li>normal: 0.998</li><li>fast: 0.99 (the default for iOS web view)</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onshouldstartloadwithrequest"></a><span class="platform">ios</span>onShouldStartLoadWithRequest?: <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#onshouldstartloadwithrequest">#</a></h4><div><p>Function that allows custom handling of any web view requests. Return
|
||||
<code>true</code> from the function to continue loading the request and <code>false</code>
|
||||
to stop loading.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollenabled"></a><span class="platform">ios</span>scrollEnabled?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/webview.html#scrollenabled">#</a></h4><div><p>Boolean value that determines whether scrolling is enabled in the
|
||||
to stop loading.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollenabled"></a><span class="platform">ios</span>scrollEnabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#scrollenabled">#</a></h4><div><p>Boolean value that determines whether scrolling is enabled in the
|
||||
<code>WebView</code>. The default value is <code>true</code>.</p></div></div></div></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/WebView/WebView.ios.js">edit the content above on GitHub</a> and send us a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/virtualizedlist.html#content">← Prev</a><a class="docs-next" href="docs/accessibilityinfo.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></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 © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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),
|
||||
|
||||
+2
-2
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user