Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated docs for next

Browse Source
This commit is contained in:
Website Deployment Script
2017-04-15 01:03:20 +00:00
parent a9e934c093
commit 684e3dab85
32 changed files with 604 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files
releases/next/docs/activityindicator.html
+5 -2
View File
File diff suppressed because one or more lines are too long
releases/next/docs/datepickerios.html
+2 -2
View File
@@ -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&#x27;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">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(&#x27;date&#x27;, &#x27;time&#x27;, &#x27;datetime&#x27;)</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.
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([&#x27;date&#x27;, &#x27;time&#x27;, &#x27;datetime&#x27;])</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.
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">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&#x27;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">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&#x27;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><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/datepickerios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/DatePickerIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
releases/next/docs/drawerlayoutandroid.html
+15 -5
View File
@@ -24,18 +24,28 @@ 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>
&lt;DrawerLayoutAndroid drawerBackgroundColor<span class="token operator">=</span><span class="token string">&quot;rgba(0,0,0,0.5)&quot;</span><span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>DrawerLayoutAndroid<span class="token operator">&gt;</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">enum(&#x27;unlocked&#x27;, &#x27;locked-closed&#x27;, &#x27;locked-open&#x27;)</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">PropTypes.oneOf([
&#x27;unlocked&#x27;,
&#x27;locked-closed&#x27;,
&#x27;locked-open&#x27;
])</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">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(&#x27;none&#x27;, &#x27;on-drag&#x27;)</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">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([
&#x27;none&#x27;, // default
&#x27;on-drag&#x27;,
])</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.
- &#x27;none&#x27; (the default), drags do not dismiss the keyboard.
- &#x27;on-drag&#x27;, 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:
- &#x27;on-drag&#x27;, 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:
- 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">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
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
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">Tutorial</a><a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</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">Showcase</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</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="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://facebook.github.io/react/" target="_blank">React</a></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&amp;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(){
releases/next/docs/flatlist.html
+98 -59
View File
@@ -65,10 +65,10 @@ changes. This includes the <code>data</code> prop and parent component state.</l
offscreen. This means it&#x27;s possible to scroll faster than the fill rate ands momentarily see
blank content. This is a tradeoff that can be adjusted to suit the needs of each application,
and we are working on improving it behind the scenes.</li><li>By default, the list looks for a <code>key</code> prop on each item and uses that for the React key.
Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li></ul><p>NOTE: <code>removeClippedSubviews</code> might not be necessary and may cause bugs. If you see issues with
content not rendering, e.g when using <code>LayoutAnimation</code>, try setting
<code>removeClippedSubviews={false}</code>, and we may change the default in the future after more
experimentation in production apps.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/flatlist.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemseparatorcomponent"></a>ItemSeparatorComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/flatlist.html#itemseparatorcomponent">#</a></h4><div><p>Rendered in between each item, but not at the top or bottom.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listfootercomponent"></a>ListFooterComponent?: <span class="propType"><span>?<span><span>ReactClass&lt;any&gt; | </span>React.Element&lt;any&gt;</span></span></span> <a class="hash-link" href="docs/flatlist.html#listfootercomponent">#</a></h4><div><p>Rendered at the bottom of all the items. Can be a React Component Class, a render function, or
Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/flatlist.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemseparatorcomponent"></a>ItemSeparatorComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/flatlist.html#itemseparatorcomponent">#</a></h4><div><p>Rendered in between each item, but not at the top or bottom. By default, <code>highlighted</code> and
<code>leadingItem</code> props are provided. <code>renderItem</code> provides <code>separators.highlight</code>/<code>unhighlight</code>
which will update the <code>highlighted</code> prop, but you can also add custom props with
<code>separators.updateProps</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listfootercomponent"></a>ListFooterComponent?: <span class="propType"><span>?<span><span>ReactClass&lt;any&gt; | </span>React.Element&lt;any&gt;</span></span></span> <a class="hash-link" href="docs/flatlist.html#listfootercomponent">#</a></h4><div><p>Rendered at the bottom of all the items. Can be a React Component Class, a render function, or
a rendered element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listheadercomponent"></a>ListHeaderComponent?: <span class="propType"><span>?<span><span>ReactClass&lt;any&gt; | </span>React.Element&lt;any&gt;</span></span></span> <a class="hash-link" href="docs/flatlist.html#listheadercomponent">#</a></h4><div><p>Rendered at the top of all the items. Can be a React Component Class, a render function, or
a rendered element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="columnwrapperstyle"></a>columnWrapperStyle?: <span class="propType">StyleObj</span> <a class="hash-link" href="docs/flatlist.html#columnwrapperstyle">#</a></h4><div><p>Optional custom style for multi-item rows generated when numColumns &gt; 1.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="data"></a>data: <span class="propType"><span>?Array&lt;ItemT&gt;</span></span> <a class="hash-link" href="docs/flatlist.html#data">#</a></h4><div><p>For simplicity, data is just a plain array. If you want to use something else, like an
immutable list, use the underlying <code>VirtualizedList</code> directly.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="extradata"></a>extraData?: <span class="propType">any</span> <a class="hash-link" href="docs/flatlist.html#extradata">#</a></h4><div><p>A marker property for telling the list to re-render (since it implements <code>PureComponent</code>). If
@@ -92,13 +92,34 @@ within half the visible length of the list.</p></div></div><div class="prop"><h4
sure to also set the <code>refreshing</code> prop correctly.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onviewableitemschanged"></a>onViewableItemsChanged?: <span class="propType"><span>?(info: {
viewableItems: Array&lt;ViewToken&gt;,
changed: Array&lt;ViewToken&gt;,
}) =&gt; void</span></span> <a class="hash-link" href="docs/flatlist.html#onviewableitemschanged">#</a></h4><div><p>Called when the viewability of rows changes, as defined by the <code>viewabilityConfig</code> prop.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="refreshing"></a>refreshing?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/flatlist.html#refreshing">#</a></h4><div><p>Set this true while waiting for new data from a refresh.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderitem"></a>renderItem: <span class="propType">(info: {item: ItemT, index: number}) =&gt; ?React.Element&lt;any&gt;</span> <a class="hash-link" href="docs/flatlist.html#renderitem">#</a></h4><div><p>Takes an item from <code>data</code> and renders it into the list. Typical usage:</p><div class="prism language-javascript">_renderItem <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>
&lt;TouchableOpacity onPress<span class="token operator">=</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">&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_onPress<span class="token punctuation">(</span></span>item<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TouchableOpacity<span class="token operator">&gt;</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>
&lt;FlatList data<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">&#x27;Title Text&#x27;</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">&#x27;item1&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span> renderItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_renderItem<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span></div><p>Provides additional metadata like <code>index</code> if you need it.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewabilityconfig"></a>viewabilityConfig?: <span class="propType">ViewabilityConfig</span> <a class="hash-link" href="docs/flatlist.html#viewabilityconfig">#</a></h4><div><p>See <code>ViewabilityHelper</code> for flow type and further documentation.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/flatlist.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoend"></a>scrollToEnd<span class="methodType">(params?: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltoend">#</a></h4><div><p>Scrolls to the end of the content. May be janky without <code>getItemLayout</code> prop.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoindex"></a>scrollToIndex<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltoindex">#</a></h4><div><p>Scrolls to the item at a the specified index such that it is positioned in the viewable area
}) =&gt; void</span></span> <a class="hash-link" href="docs/flatlist.html#onviewableitemschanged">#</a></h4><div><p>Called when the viewability of rows changes, as defined by the <code>viewabilityConfig</code> prop.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="refreshing"></a>refreshing?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/flatlist.html#refreshing">#</a></h4><div><p>Set this true while waiting for new data from a refresh.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews?: <span class="propType">boolean</span> <a class="hash-link" href="docs/flatlist.html#removeclippedsubviews">#</a></h4><div><p>Note: may have bugs (missing content) in some circumstances - use at your own risk.</p><p>This may improve scroll performance for large lists.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderitem"></a>renderItem: <span class="propType">(info: {
item: ItemT,
index: number,
separators: {
highlight: () =&gt; void,
unhighlight: () =&gt; void,
updateProps: (select: &#x27;leading&#x27; | &#x27;trailing&#x27;, newProps: Object) =&gt; void,
},
}) =&gt; ?React.Element&lt;any&gt;</span> <a class="hash-link" href="docs/flatlist.html#renderitem">#</a></h4><div><p>Takes an item from <code>data</code> and renders it into the list. Example usage:</p><div class="prism language-javascript">&lt;FlatList
ItemSeparatorComponent<span class="token operator">=</span><span class="token punctuation">{</span>Platform<span class="token punctuation">.</span>OS <span class="token operator">!</span><span class="token operator">==</span> <span class="token string">&#x27;android&#x27;</span> &amp;&amp; <span class="token punctuation">(</span><span class="token punctuation">{</span>highlighted<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>style<span class="token punctuation">.</span>separator<span class="token punctuation">,</span> highlighted &amp;&amp; <span class="token punctuation">{</span>marginLeft<span class="token punctuation">:</span> <span class="token number">0</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">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">}</span>
data<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">&#x27;Title Text&#x27;</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">&#x27;item1&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
renderItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">{</span>item<span class="token punctuation">,</span> separators<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>
&lt;TouchableHighlight
onPress<span class="token operator">=</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">&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_onPress<span class="token punctuation">(</span></span>item<span class="token punctuation">)</span><span class="token punctuation">}</span>
onShowUnderlay<span class="token operator">=</span><span class="token punctuation">{</span>separators<span class="token punctuation">.</span>highlight<span class="token punctuation">}</span>
onHideUnderlay<span class="token operator">=</span><span class="token punctuation">{</span>separators<span class="token punctuation">.</span>unhighlight<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;white&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span></div><p>Provides additional metadata like <code>index</code> if you need it, as well as a more generic
<code>separators.updateProps</code> function which let&#x27;s you set whatever props you want to change the
rendering of either the leading separator or trailing separator in case the more common
<code>highlight</code> and <code>unhighlight</code> (which set the <code>highlighted: boolean</code> prop) are insufficient for
your use-case.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewabilityconfig"></a>viewabilityConfig?: <span class="propType">ViewabilityConfig</span> <a class="hash-link" href="docs/flatlist.html#viewabilityconfig">#</a></h4><div><p>See <code>ViewabilityHelper</code> for flow type and further documentation.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/flatlist.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoend"></a>scrollToEnd<span class="methodType">(params?: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltoend">#</a></h4><div><p>Scrolls to the end of the content. May be janky without <code>getItemLayout</code> prop.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoindex"></a>scrollToIndex<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltoindex">#</a></h4><div><p>Scrolls to the item at a the specified index such that it is positioned in the viewable area
such that <code>viewPosition</code> 0 places it at the top, 1 at the bottom, and 0.5 centered in the
middle. <code>viewOffset</code> is a fixed number of pixels to offset the final target position.</p><p>Note: cannot scroll to locations outside the render window without specifying the
<code>getItemLayout</code> prop.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoitem"></a>scrollToItem<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltoitem">#</a></h4><div><p>Requires linear scan through data - use <code>scrollToIndex</code> instead if possible.</p><p>Note: cannot scroll to locations outside the render window without specifying the
@@ -123,6 +144,7 @@ const <span class="token punctuation">{</span>
FooterComponent<span class="token punctuation">,</span>
HeaderComponent<span class="token punctuation">,</span>
ItemComponent<span class="token punctuation">,</span>
ItemSeparatorComponent<span class="token punctuation">,</span>
PlainInput<span class="token punctuation">,</span>
SeparatorComponent<span class="token punctuation">,</span>
Spindicator<span class="token punctuation">,</span>
@@ -186,54 +208,59 @@ class <span class="token class-name">FlatListExample</span> extends <span class=
&lt;UIExplorerPage
noSpacer<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
noScroll<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>searchRow<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>options<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;PlainInput
onChangeText<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onChangeFilterText<span class="token punctuation">}</span>
placeholder<span class="token operator">=</span><span class="token string">&quot;Search...&quot;</span>
value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>filterText<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;PlainInput
onChangeText<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onChangeScrollToIndex<span class="token punctuation">}</span>
placeholder<span class="token operator">=</span><span class="token string">&quot;scrollToIndex...&quot;</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>options<span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token punctuation">{</span><span class="token function">renderSmallSwitchOption<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">&#x27;virtualized&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token punctuation">{</span><span class="token function">renderSmallSwitchOption<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">&#x27;horizontal&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token punctuation">{</span><span class="token function">renderSmallSwitchOption<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">&#x27;fixedHeight&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token punctuation">{</span><span class="token function">renderSmallSwitchOption<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">&#x27;logViewable&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token punctuation">{</span><span class="token function">renderSmallSwitchOption<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">&#x27;debug&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
&lt;Spindicator value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_scrollPos<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>searchRow<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>options<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;PlainInput
onChangeText<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onChangeFilterText<span class="token punctuation">}</span>
placeholder<span class="token operator">=</span><span class="token string">&quot;Search...&quot;</span>
value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>filterText<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;PlainInput
onChangeText<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onChangeScrollToIndex<span class="token punctuation">}</span>
placeholder<span class="token operator">=</span><span class="token string">&quot;scrollToIndex...&quot;</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>options<span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token punctuation">{</span><span class="token function">renderSmallSwitchOption<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">&#x27;virtualized&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token punctuation">{</span><span class="token function">renderSmallSwitchOption<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">&#x27;horizontal&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token punctuation">{</span><span class="token function">renderSmallSwitchOption<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">&#x27;fixedHeight&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token punctuation">{</span><span class="token function">renderSmallSwitchOption<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">&#x27;logViewable&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token punctuation">{</span><span class="token function">renderSmallSwitchOption<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">&#x27;debug&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
&lt;Spindicator value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_scrollPos<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;SeparatorComponent <span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;AnimatedFlatList
ItemSeparatorComponent<span class="token operator">=</span><span class="token punctuation">{</span>ItemSeparatorComponent<span class="token punctuation">}</span>
ListHeaderComponent<span class="token operator">=</span><span class="token punctuation">{</span>&lt;HeaderComponent <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">}</span>
ListFooterComponent<span class="token operator">=</span><span class="token punctuation">{</span>FooterComponent<span class="token punctuation">}</span>
data<span class="token operator">=</span><span class="token punctuation">{</span>filteredData<span class="token punctuation">}</span>
debug<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>debug<span class="token punctuation">}</span>
disableVirtualization<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>virtualized<span class="token punctuation">}</span>
getItemLayout<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fixedHeight <span class="token operator">?</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_getItemLayout <span class="token punctuation">:</span>
undefined
<span class="token punctuation">}</span>
horizontal<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>horizontal<span class="token punctuation">}</span>
key<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>horizontal <span class="token operator">?</span> <span class="token string">&#x27;h&#x27;</span> <span class="token punctuation">:</span> <span class="token string">&#x27;v&#x27;</span><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>state<span class="token punctuation">.</span>fixedHeight <span class="token operator">?</span> <span class="token string">&#x27;f&#x27;</span> <span class="token punctuation">:</span> <span class="token string">&#x27;d&#x27;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
keyboardShouldPersistTaps<span class="token operator">=</span><span class="token string">&quot;always&quot;</span>
keyboardDismissMode<span class="token operator">=</span><span class="token string">&quot;on-drag&quot;</span>
legacyImplementation<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span>
numColumns<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span>
onEndReached<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onEndReached<span class="token punctuation">}</span>
onRefresh<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onRefresh<span class="token punctuation">}</span>
onScroll<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>horizontal <span class="token operator">?</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_scrollSinkX <span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_scrollSinkY<span class="token punctuation">}</span>
onViewableItemsChanged<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onViewableItemsChanged<span class="token punctuation">}</span>
ref<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_captureRef<span class="token punctuation">}</span>
refreshing<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span>
renderItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_renderItemComponent<span class="token punctuation">}</span>
contentContainerStyle<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>list<span class="token punctuation">}</span>
viewabilityConfig<span class="token operator">=</span><span class="token punctuation">{</span>VIEWABILITY_CONFIG<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;SeparatorComponent <span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;AnimatedFlatList
ItemSeparatorComponent<span class="token operator">=</span><span class="token punctuation">{</span>SeparatorComponent<span class="token punctuation">}</span>
ListHeaderComponent<span class="token operator">=</span><span class="token punctuation">{</span>&lt;HeaderComponent <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">}</span>
ListFooterComponent<span class="token operator">=</span><span class="token punctuation">{</span>FooterComponent<span class="token punctuation">}</span>
data<span class="token operator">=</span><span class="token punctuation">{</span>filteredData<span class="token punctuation">}</span>
debug<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>debug<span class="token punctuation">}</span>
disableVirtualization<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>virtualized<span class="token punctuation">}</span>
getItemLayout<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fixedHeight <span class="token operator">?</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_getItemLayout <span class="token punctuation">:</span>
undefined
<span class="token punctuation">}</span>
horizontal<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>horizontal<span class="token punctuation">}</span>
key<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>horizontal <span class="token operator">?</span> <span class="token string">&#x27;h&#x27;</span> <span class="token punctuation">:</span> <span class="token string">&#x27;v&#x27;</span><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>state<span class="token punctuation">.</span>fixedHeight <span class="token operator">?</span> <span class="token string">&#x27;f&#x27;</span> <span class="token punctuation">:</span> <span class="token string">&#x27;d&#x27;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
legacyImplementation<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span>
numColumns<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span>
onEndReached<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onEndReached<span class="token punctuation">}</span>
onRefresh<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onRefresh<span class="token punctuation">}</span>
onScroll<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>horizontal <span class="token operator">?</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_scrollSinkX <span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_scrollSinkY<span class="token punctuation">}</span>
onViewableItemsChanged<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onViewableItemsChanged<span class="token punctuation">}</span>
ref<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_captureRef<span class="token punctuation">}</span>
refreshing<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span>
renderItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_renderItemComponent<span class="token punctuation">}</span>
viewabilityConfig<span class="token operator">=</span><span class="token punctuation">{</span>VIEWABILITY_CONFIG<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>UIExplorerPage<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
@@ -242,18 +269,23 @@ class <span class="token class-name">FlatListExample</span> extends <span class=
<span class="token keyword">return</span> <span class="token function">getItemLayout<span class="token punctuation">(</span></span>data<span class="token punctuation">,</span> index<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>horizontal<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
_onEndReached <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>data<span class="token punctuation">.</span>length <span class="token operator">&gt;=</span> <span class="token number">1000</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</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">setState<span class="token punctuation">(</span></span><span class="token punctuation">(</span>state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
data<span class="token punctuation">:</span> state<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">concat<span class="token punctuation">(</span></span><span class="token function">genItemData<span class="token punctuation">(</span></span><span class="token number">100</span><span class="token punctuation">,</span> state<span class="token punctuation">.</span>data<span class="token punctuation">.</span>length<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 punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
_onRefresh <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token function">alert<span class="token punctuation">(</span></span><span class="token string">&#x27;onRefresh: nothing to refresh :P&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
_renderItemComponent <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
_renderItemComponent <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>item<span class="token punctuation">,</span> separators<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;ItemComponent
item<span class="token operator">=</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span>
horizontal<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>horizontal<span class="token punctuation">}</span>
fixedHeight<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fixedHeight<span class="token punctuation">}</span>
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_pressItem<span class="token punctuation">}</span>
onShowUnderlay<span class="token operator">=</span><span class="token punctuation">{</span>separators<span class="token punctuation">.</span>highlight<span class="token punctuation">}</span>
onHideUnderlay<span class="token operator">=</span><span class="token punctuation">{</span>separators<span class="token punctuation">.</span>unhighlight<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
@@ -277,7 +309,7 @@ class <span class="token class-name">FlatListExample</span> extends <span class=
<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>
_pressItem <span class="token operator">=</span> <span class="token punctuation">(</span>key<span class="token punctuation">:</span> number<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
_pressItem <span class="token operator">=</span> <span class="token punctuation">(</span>key<span class="token punctuation">:</span> string<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_listRef<span class="token punctuation">.</span><span class="token function">getNode<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">recordInteraction<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">pressItem<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
@@ -286,6 +318,13 @@ class <span class="token class-name">FlatListExample</span> extends <span class=
const styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
container<span class="token punctuation">:</span> <span class="token punctuation">{</span>
backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;rgb(239, 239, 244)&#x27;</span><span class="token punctuation">,</span>
flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
list<span class="token punctuation">:</span> <span class="token punctuation">{</span>
backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;white&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
flexDirection<span class="token punctuation">:</span> <span class="token string">&#x27;row&#x27;</span><span class="token punctuation">,</span>
flexWrap<span class="token punctuation">:</span> <span class="token string">&#x27;wrap&#x27;</span><span class="token punctuation">,</span>
releases/next/docs/image.html
+18 -9
View File
@@ -63,8 +63,8 @@ class <span class="token class-name">DisplayAnImageWithStyle</span> extends <spa
</span> compile <span class="token string">&#x27;com.facebook.fresco:webpsupport:0.11.0&#x27;</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 class <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>
public <span class="token function">AnimatedFactoryImpl<span class="token punctuation">(</span></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="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) =&gt; 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(&#x27;cover&#x27;, &#x27;contain&#x27;, &#x27;stretch&#x27;, &#x27;repeat&#x27;, &#x27;center&#x27;)</span> <a class="hash-link" href="docs/image.html#resizemode">#</a></h4><div><p>Determines how to resize the image when the frame doesn&#x27;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="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) =&gt; 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([&#x27;cover&#x27;, &#x27;contain&#x27;, &#x27;stretch&#x27;, &#x27;repeat&#x27;, &#x27;center&#x27;])</span> <a class="hash-link" href="docs/image.html#resizemode">#</a></h4><div><p>Determines how to resize the image when the frame doesn&#x27;t match the raw
image dimensions.</p><ul><li><p><code>cover</code>: Scale the image uniformly (maintain the image&#x27;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&#x27;s aspect ratio)
@@ -85,25 +85,34 @@ 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">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(&#x27;auto&#x27;, &#x27;resize&#x27;, &#x27;scale&#x27;)</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&#x27;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">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([&#x27;auto&#x27;, &#x27;resize&#x27;, &#x27;scale&#x27;])</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&#x27;s dimensions
differ from the image view&#x27;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">node</span> <a class="hash-link" href="docs/image.html#accessibilitylabel">#</a></h4><div><p>The text that&#x27;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="blurradius"></a><span class="platform">ios</span>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="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">PropTypes.node</span> <a class="hash-link" href="docs/image.html#accessibilitylabel">#</a></h4><div><p>The text that&#x27;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="blurradius"></a><span class="platform">ios</span>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="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"><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
<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
should be either a local file path or the name of a static image resource
(which should be wrapped in the <code>require(&#x27;./path/to/image.png&#x27;)</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>&lt;Image/&gt;</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(&#x27;./image.jpg&#x27;)</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
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(&#x27;./image.jpg&#x27;)</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
what constitutes a &quot;partial load&quot; 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">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.
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.
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
releases/next/docs/keyboardavoidingview.html
+1 -1
View File
File diff suppressed because one or more lines are too long
releases/next/docs/layout-props.html
+1 -1
View File
File diff suppressed because one or more lines are too long
releases/next/docs/linking-libraries-ios.html
+1 -1
View File
@@ -6,7 +6,7 @@ the root of the repository. Some of them are pure JavaScript, and you only need
to <code>require</code> it. Other libraries also rely on some native code, in that case
you&#x27;ll have to add these files to your app, otherwise the app will throw an
error as soon as you try to use the library.</em></p><h2><a class="anchor" name="here-the-few-steps-to-link-your-libraries-that-contain-native-code"></a>Here the few steps to link your libraries that contain native code <a class="hash-link" href="docs/linking-libraries-ios.html#here-the-few-steps-to-link-your-libraries-that-contain-native-code">#</a></h2><h3><a class="anchor" name="automatic-linking"></a>Automatic linking <a class="hash-link" href="docs/linking-libraries-ios.html#automatic-linking">#</a></h3><h4><a class="anchor" name="step-1"></a>Step 1 <a class="hash-link" href="docs/linking-libraries-ios.html#step-1">#</a></h4><p>Install a library with native dependencies:</p><div class="prism language-javascript">$ npm install &lt;library<span class="token operator">-</span><span class="token keyword">with</span><span class="token operator">-</span>native<span class="token operator">-</span>dependencies<span class="token operator">&gt;</span> <span class="token operator">--</span>save</div><p><strong>Note:</strong> <em><code>--save</code> or <code>--save-dev</code> flag is very important for this step. React Native will link
your libs based on <code>dependencies</code> and <code>devDependencies</code> in your <code>package.json</code> file.</em></p><h4><a class="anchor" name="step-2"></a>Step 2 <a class="hash-link" href="docs/linking-libraries-ios.html#step-2">#</a></h4><p>Link your native dependencies:</p><div class="prism language-javascript">$ react<span class="token operator">-</span>native link</div><p>Done! All libraries with a native dependencies should be successfully linked to your iOS/Android project.</p><h3><a class="anchor" name="manual-linking"></a>Manual linking <a class="hash-link" href="docs/linking-libraries-ios.html#manual-linking">#</a></h3><h4><a class="anchor" name="step-1"></a>Step 1 <a class="hash-link" href="docs/linking-libraries-ios.html#step-1">#</a></h4><p>If the library has native code, there must be a <code>.xcodeproj</code> file inside it&#x27;s
your libs based on <code>dependencies</code> and <code>devDependencies</code> in your <code>package.json</code> file.</em></p><h4><a class="anchor" name="step-2"></a>Step 2 <a class="hash-link" href="docs/linking-libraries-ios.html#step-2">#</a></h4><p>Link your native dependencies:</p><div class="prism language-javascript">$ react<span class="token operator">-</span>native link</div><p>Done! All libraries with native dependencies should be successfully linked to your iOS/Android project.</p><h3><a class="anchor" name="manual-linking"></a>Manual linking <a class="hash-link" href="docs/linking-libraries-ios.html#manual-linking">#</a></h3><h4><a class="anchor" name="step-1"></a>Step 1 <a class="hash-link" href="docs/linking-libraries-ios.html#step-1">#</a></h4><p>If the library has native code, there must be a <code>.xcodeproj</code> file inside it&#x27;s
folder.
Drag this file to your project on Xcode (usually under the <code>Libraries</code> group
on Xcode);</p><p><img src="img/AddToLibraries.png" alt=""></p><h4><a class="anchor" name="step-2"></a>Step 2 <a class="hash-link" href="docs/linking-libraries-ios.html#step-2">#</a></h4><p>Click on your main project file (the one that represents the <code>.xcodeproj</code>)
releases/next/docs/linking.html
+3 -2
View File
@@ -15,7 +15,7 @@ documentation for more information.</p><div class="prism language-javascript">&l
android<span class="token punctuation">:</span>launchMode<span class="token operator">=</span><span class="token string">&quot;singleTask&quot;</span><span class="token operator">&gt;</span></div><p>NOTE: On iOS you&#x27;ll need to link <code>RCTLinking</code> to your project by following
the steps described <a href="docs/linking-libraries-ios.html#manual-linking" target="_blank">here</a>.
In case you also want to listen to incoming app links during your app&#x27;s
execution you&#x27;ll need to add the following lines to you <code>*AppDelegate.m</code>:</p><div class="prism language-javascript">#import &lt;React<span class="token operator">/</span>RCTLinkingManager<span class="token punctuation">.</span>h<span class="token operator">&gt;</span>
execution you&#x27;ll need to add the following lines to your <code>*AppDelegate.m</code>:</p><div class="prism language-javascript">#import &lt;React<span class="token operator">/</span>RCTLinkingManager<span class="token punctuation">.</span>h<span class="token operator">&gt;</span>
<span class="token operator">-</span> <span class="token punctuation">(</span>BOOL<span class="token punctuation">)</span>application<span class="token punctuation">:</span><span class="token punctuation">(</span>UIApplication <span class="token operator">*</span><span class="token punctuation">)</span>application openURL<span class="token punctuation">:</span><span class="token punctuation">(</span>NSURL <span class="token operator">*</span><span class="token punctuation">)</span>url
sourceApplication<span class="token punctuation">:</span><span class="token punctuation">(</span>NSString <span class="token operator">*</span><span class="token punctuation">)</span>sourceApplication annotation<span class="token punctuation">:</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span>annotation
@@ -55,6 +55,7 @@ inside <code>Info.plist</code> or canOpenURL will always return false.</p><p>@pa
it will give the link url, otherwise it will give <code>null</code></p><p>NOTE: To support deep linking on Android, refer <a href="http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents">http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents</a></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/Linking/Linking.js">edit the content above on GitHub</a> and send us a pull request!</p><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/linking.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/LinkingExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> PropTypes <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;prop-types&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> <span class="token punctuation">{</span>
Linking<span class="token punctuation">,</span>
@@ -67,7 +68,7 @@ it will give the link url, otherwise it will give <code>null</code></p><p>NOTE:
class <span class="token class-name">OpenURLButton</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
static propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>
url<span class="token punctuation">:</span> React<span class="token punctuation">.</span>PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">,</span>
url<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
handleClick <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
releases/next/docs/listview.html
+13 -13
View File
@@ -31,42 +31,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">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
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
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">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
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
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">function</span> <a class="hash-link" href="docs/listview.html#onchangevisiblerows">#</a></h4><div><p>(visibleRows, changedRows) =&gt; 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">PropTypes.func</span> <a class="hash-link" href="docs/listview.html#onchangevisiblerows">#</a></h4><div><p>(visibleRows, changedRows) =&gt; 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">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
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
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">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 &#x27;rows&#x27; are actually
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 &#x27;rows&#x27; are actually
cells, i.e. they don&#x27;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&#x27;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">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">PropTypes.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: &#x27;hidden&#x27; 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">function</span> <a class="hash-link" href="docs/listview.html#renderfooter">#</a></h4><div><p>() =&gt; 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">PropTypes.func</span> <a class="hash-link" href="docs/listview.html#renderfooter">#</a></h4><div><p>() =&gt; 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">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) =&gt; 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">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) =&gt; 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&#x27;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">function</span> <a class="hash-link" href="docs/listview.html#renderscrollcomponent">#</a></h4><div><p>(props) =&gt; 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) =&gt; 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) =&gt; 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">PropTypes.func.isRequired</span> <a class="hash-link" href="docs/listview.html#renderscrollcomponent">#</a></h4><div><p>(props) =&gt; 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) =&gt; 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) =&gt; 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">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
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
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">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">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
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
releases/next/docs/modal.html
+2 -2
View File
@@ -44,8 +44,8 @@ class <span class="token class-name">ModalExample</span> extends <span class="to
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</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">enum(&#x27;none&#x27;, &#x27;slide&#x27;, &#x27;fade&#x27;)</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 === &#x27;android&#x27; ? 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 &#x27;portrait&#x27; or &#x27;landscape&#x27;. 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="supportedorientations"></a><span class="platform">ios</span>supportedOrientations?: <span class="propType"><span>[enum(&#x27;portrait&#x27;, &#x27;portrait-upside-down&#x27;, &#x27;landscape&#x27;, &#x27;landscape-left&#x27;, &#x27;landscape-right&#x27;)]</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.
<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([&#x27;none&#x27;, &#x27;slide&#x27;, &#x27;fade&#x27;])</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 === &#x27;android&#x27; ? 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 &#x27;portrait&#x27; or &#x27;landscape&#x27;. 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="supportedorientations"></a><span class="platform">ios</span>supportedOrientations?: <span class="propType">PropTypes.arrayOf(PropTypes.oneOf([&#x27;portrait&#x27;, &#x27;portrait-upside-down&#x27;, &#x27;landscape&#x27;, &#x27;landscape-left&#x27;, &#x27;landscape-right&#x27;]))</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&#x27;s specified in your app&#x27;s Info.plist&#x27;s UISupportedInterfaceOrientations field.</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><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/modal.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/ModalExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
releases/next/docs/navigatorios.html
+132 -6
View File
@@ -3,7 +3,7 @@
enabling you to implement a navigation stack. It works exactly the same as it
would on a native app using <code>UINavigationController</code>, providing the same
animations and behavior from UIKIt.</p><p>As the name implies, it is only available on iOS. Take a look at
<a href="https://reactnavigation.org/" target="_blank"><code>React Navigation</code></a> for a cross-platform
<a href="https://reactnavigation.org/" target="_blank"><code>React Navigation</code></a> for a cross-platform
solution in JavaScript, or check out either of these components for native
solutions: <a href="http://airbnb.io/native-navigation/" target="_blank">native-navigation</a>,
<a href="https://github.com/wix/react-native-navigation" target="_blank">react-native-navigation</a>.</p><p>To set up the navigator, provide the <code>initialRoute</code> prop with a route
@@ -130,18 +130,144 @@ passed to the <code>NavigatorIOS</code> component.</p><div class="prism language
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></div><p>In the example above the navigation bar color is changed when the new route
is pushed.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/navigatorios.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="bartintcolor"></a>barTintColor?: <span class="propType">string</span> <a class="hash-link" href="docs/navigatorios.html#bartintcolor">#</a></h4><div><p>The default background color of the navigation bar.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialroute"></a>initialRoute: <span class="propType"><span>{<span><span><span>component: function</span>, </span><span><span>title: string</span>, </span><span><span>titleImage: Image.propTypes.source</span>, </span><span><span>passProps: object</span>, </span><span><span>backButtonIcon: Image.propTypes.source</span>, </span><span><span>backButtonTitle: string</span>, </span><span><span>leftButtonIcon: Image.propTypes.source</span>, </span><span><span>leftButtonTitle: string</span>, </span><span><span>leftButtonSystemIcon: Object.keys(SystemIcons)</span>, </span><span><span>onLeftButtonPress: function</span>, </span><span><span>rightButtonIcon: Image.propTypes.source</span>, </span><span><span>rightButtonTitle: string</span>, </span><span><span>rightButtonSystemIcon: Object.keys(SystemIcons)</span>, </span><span><span>onRightButtonPress: function</span>, </span><span><span>wrapperStyle: ViewPropTypes.style</span>, </span><span><span>navigationBarHidden: bool</span>, </span><span><span>shadowHidden: bool</span>, </span><span><span>tintColor: string</span>, </span><span><span>barTintColor: string</span>, </span><span><span>titleTextColor: string</span>, </span><span>translucent: bool</span></span>}</span></span> <a class="hash-link" href="docs/navigatorios.html#initialroute">#</a></h4><div><p>NavigatorIOS uses <code>route</code> objects to identify child views, their props,
is pushed.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/navigatorios.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="bartintcolor"></a>barTintColor?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/navigatorios.html#bartintcolor">#</a></h4><div><p>The default background color of the navigation bar.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialroute"></a>initialRoute?: <span class="propType">PropTypes.shape({
/**
* The React Class to render for this route
*/
component: PropTypes.func.isRequired,
/**
* The title displayed in the navigation bar and the back button for this
* route.
*/
title: PropTypes.string.isRequired,
/**
* If set, a title image will appear instead of the text title.
*/
titleImage: Image.propTypes.source,
/**
* Use this to specify additional props to pass to the rendered
* component. `NavigatorIOS` will automatically pass in `route` and
* `navigator` props to the comoponent.
*/
passProps: PropTypes.object,
/**
* If set, the left navigation button image will be displayed using this
* source. Note that this doesn&#x27;t apply to the header of the current
* view, but to those views that are subsequently pushed.
*/
backButtonIcon: Image.propTypes.source,
/**
* If set, the left navigation button text will be set to this. Note that
* this doesn&#x27;t apply to the left button of the current view, but to
* those views that are subsequently pushed
*/
backButtonTitle: PropTypes.string,
/**
* If set, the left navigation button image will be displayed using
* this source.
*/
leftButtonIcon: Image.propTypes.source,
/**
* If set, the left navigation button will display this text.
*/
leftButtonTitle: PropTypes.string,
/**
* If set, the left header button will appear with this system icon
*
* Supported icons are `done`, `cancel`, `edit`, `save`, `add`,
* `compose`, `reply`, `action`, `organize`, `bookmarks`, `search`,
* `refresh`, `stop`, `camera`, `trash`, `play`, `pause`, `rewind`,
* `fast-forward`, `undo`, `redo`, and `page-curl`
*/
leftButtonSystemIcon: PropTypes.oneOf(Object.keys(SystemIcons)),
/**
* This function will be invoked when the left navigation bar item is
* pressed.
*/
onLeftButtonPress: PropTypes.func,
/**
* If set, the right navigation button image will be displayed using
* this source.
*/
rightButtonIcon: Image.propTypes.source,
/**
* If set, the right navigation button will display this text.
*/
rightButtonTitle: PropTypes.string,
/**
* If set, the right header button will appear with this system icon
*
* See leftButtonSystemIcon for supported icons
*/
rightButtonSystemIcon: PropTypes.oneOf(Object.keys(SystemIcons)),
/**
* This function will be invoked when the right navigation bar item is
* pressed.
*/
onRightButtonPress: PropTypes.func,
/**
* Styles for the navigation item containing the component.
*/
wrapperStyle: ViewPropTypes.style,
/**
* Boolean value that indicates whether the navigation bar is hidden.
*/
navigationBarHidden: PropTypes.bool,
/**
* Boolean value that indicates whether to hide the 1px hairline
* shadow.
*/
shadowHidden: PropTypes.bool,
/**
* The color used for the buttons in the navigation bar.
*/
tintColor: PropTypes.string,
/**
* The background color of the navigation bar.
*/
barTintColor: PropTypes.string,
/**
* The text color of the navigation bar title.
*/
titleTextColor: PropTypes.string,
/**
* Bboolean value that indicates whether the navigation bar is
* translucent.
*/
translucent: PropTypes.bool,
}).isRequired</span> <a class="hash-link" href="docs/navigatorios.html#initialroute">#</a></h4><div><p>NavigatorIOS uses <code>route</code> objects to identify child views, their props,
and navigation bar configuration. Navigation operations such as push
operations expect routes to look like this the <code>initialRoute</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="interactivepopgestureenabled"></a>interactivePopGestureEnabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/navigatorios.html#interactivepopgestureenabled">#</a></h4><div><p>Boolean value that indicates whether the interactive pop gesture is
operations expect routes to look like this the <code>initialRoute</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="interactivepopgestureenabled"></a>interactivePopGestureEnabled?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/navigatorios.html#interactivepopgestureenabled">#</a></h4><div><p>Boolean value that indicates whether the interactive pop gesture is
enabled. This is useful for enabling/disabling the back swipe navigation
gesture.</p><p>If this prop is not provided, the default behavior is for the back swipe
gesture to be enabled when the navigation bar is shown and disabled when
the navigation bar is hidden. Once you&#x27;ve provided the
<code>interactivePopGestureEnabled</code> prop, you can never restore the default
behavior.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemwrapperstyle"></a>itemWrapperStyle?: <span class="propType">ViewPropTypes.style</span> <a class="hash-link" href="docs/navigatorios.html#itemwrapperstyle">#</a></h4><div><p>The default wrapper style for components in the navigator.
A common use case is to set the <code>backgroundColor</code> for every scene.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navigationbarhidden"></a>navigationBarHidden?: <span class="propType">bool</span> <a class="hash-link" href="docs/navigatorios.html#navigationbarhidden">#</a></h4><div><p>Boolean value that indicates whether the navigation bar is hidden
by default.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="shadowhidden"></a>shadowHidden?: <span class="propType">bool</span> <a class="hash-link" href="docs/navigatorios.html#shadowhidden">#</a></h4><div><p>Boolean value that indicates whether to hide the 1px hairline shadow
by default.</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/navigatorios.html#tintcolor">#</a></h4><div><p>The default color used for the buttons in the navigation bar.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="titletextcolor"></a>titleTextColor?: <span class="propType">string</span> <a class="hash-link" href="docs/navigatorios.html#titletextcolor">#</a></h4><div><p>The default text color of the navigation bar title.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="translucent"></a>translucent?: <span class="propType">bool</span> <a class="hash-link" href="docs/navigatorios.html#translucent">#</a></h4><div><p>Boolean value that indicates whether the navigation bar is
A common use case is to set the <code>backgroundColor</code> for every scene.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navigationbarhidden"></a>navigationBarHidden?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/navigatorios.html#navigationbarhidden">#</a></h4><div><p>Boolean value that indicates whether the navigation bar is hidden
by default.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="shadowhidden"></a>shadowHidden?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/navigatorios.html#shadowhidden">#</a></h4><div><p>Boolean value that indicates whether to hide the 1px hairline shadow
by default.</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/navigatorios.html#tintcolor">#</a></h4><div><p>The default color used for the buttons in the navigation bar.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="titletextcolor"></a>titleTextColor?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/navigatorios.html#titletextcolor">#</a></h4><div><p>The default text color of the navigation bar title.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="translucent"></a>translucent?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/navigatorios.html#translucent">#</a></h4><div><p>Boolean value that indicates whether the navigation bar is
translucent by default</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/navigatorios.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="push"></a>push<span class="methodType">(route: object)</span> <a class="hash-link" href="docs/navigatorios.html#push">#</a></h4><div><p>Navigate forward to a new route.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>The new route to navigate to.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="popn"></a>popN<span class="methodType">(n: number)</span> <a class="hash-link" href="docs/navigatorios.html#popn">#</a></h4><div><p>Go back N scenes at once. When N=1, behavior matches <code>pop()</code>.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>n<br><br><div><span>number</span></div></td><td class="description"><div><p>The number of scenes to pop.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="pop"></a>pop<span class="methodType">()</span> <a class="hash-link" href="docs/navigatorios.html#pop">#</a></h4><div><p>Pop back to the previous scene.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="replaceatindex"></a>replaceAtIndex<span class="methodType">(route: object, index: number)</span> <a class="hash-link" href="docs/navigatorios.html#replaceatindex">#</a></h4><div><p>Replace a route in the navigation stack.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>The new route that will replace the specified one.</p></div></td></tr><tr><td>index<br><br><div><span>number</span></div></td><td class="description"><div><p>The route into the stack that should be replaced.
If it is negative, it counts from the back of the stack.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="replace"></a>replace<span class="methodType">(route: object)</span> <a class="hash-link" href="docs/navigatorios.html#replace">#</a></h4><div><p>Replace the route for the current scene and immediately
load the view for the new route.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>The new route to navigate to.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="replaceprevious"></a>replacePrevious<span class="methodType">(route: object)</span> <a class="hash-link" href="docs/navigatorios.html#replaceprevious">#</a></h4><div><p>Replace the route/view for the previous scene.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>The new route to will replace the previous scene.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="poptotop"></a>popToTop<span class="methodType">()</span> <a class="hash-link" href="docs/navigatorios.html#poptotop">#</a></h4><div><p>Go back to the topmost item in the navigation stack.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="poptoroute"></a>popToRoute<span class="methodType">(route: object)</span> <a class="hash-link" href="docs/navigatorios.html#poptoroute">#</a></h4><div><p>Go back to the item for a particular route object.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>The new route to navigate to.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="replacepreviousandpop"></a>replacePreviousAndPop<span class="methodType">(route: object)</span> <a class="hash-link" href="docs/navigatorios.html#replacepreviousandpop">#</a></h4><div><p>Replaces the previous route/view and transitions back to it.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>The new route that replaces the previous scene.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="resetto"></a>resetTo<span class="methodType">(route: object)</span> <a class="hash-link" href="docs/navigatorios.html#resetto">#</a></h4><div><p>Replaces the top item and pop to it.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>The new route that will replace the topmost item.</p></div></td></tr></tbody></table></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/Navigation/NavigatorIOS.ios.js">edit the content above on GitHub</a> and send us a pull request!</p><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/navigatorios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/NavigatorIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
releases/next/docs/network.html
+1 -1
View File
@@ -60,7 +60,7 @@ ws<span class="token punctuation">.</span>onerror <span class="token operator">=
ws<span class="token punctuation">.</span>onclose <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // connection closed
</span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span>e<span class="token punctuation">.</span>code<span class="token punctuation">,</span> e<span class="token punctuation">.</span>reason<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></div><p>Your app can now display all sorts of data and you may soon need to organize this content into several screens. To manage the transition between these screens, you will need to learn about <a href="docs/using-navigators.html" target="_blank">navigators</a>.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/using-a-listview.html#content">← Prev</a><a class="docs-next" href="docs/more-resources.html#content">Next →</a></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/Networking.md">edit the content above on GitHub</a> and send us a pull request!</p></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">Tutorial</a><a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</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">Showcase</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</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="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://facebook.github.io/react/" target="_blank">React</a></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&amp;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><p>Your app can now display all sorts of data and you may soon need to organize this content into several screens. To manage the transition between these screens, you will need to learn about <a href="docs/navigation.html" target="_blank">navigators</a>.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/using-a-listview.html#content">← Prev</a><a class="docs-next" href="docs/more-resources.html#content">Next →</a></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/Networking.md">edit the content above on GitHub</a> and send us a pull request!</p></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">Tutorial</a><a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</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">Showcase</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</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="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://facebook.github.io/react/" target="_blank">React</a></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&amp;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)
releases/next/docs/pickerios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
releases/next/docs/progressbarandroid.html
+1 -1
View File
@@ -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">&gt;</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">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(&#x27;Horizontal&#x27;, &#x27;Normal&#x27;, &#x27;Small&#x27;, &#x27;Large&#x27;, &#x27;Inverse&#x27;, &#x27;SmallInverse&#x27;, &#x27;LargeInverse&#x27;)</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><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/progressbarandroid.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/ProgressBarAndroidExample.android.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
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><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/progressbarandroid.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/ProgressBarAndroidExample.android.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ProgressBar <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;ProgressBarAndroid&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;React&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
releases/next/docs/progressviewios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
releases/next/docs/refreshcontrol.html
+1 -1
View File
@@ -32,7 +32,7 @@ triggers an <code>onRefresh</code> event.</p><h3><a class="anchor" name="usage-e
<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><p><strong>Note:</strong> <code>refreshing</code> is a controlled prop, this is why it needs to be set to true
in the <code>onRefresh</code> function otherwise the refresh indicator will stop immediately.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/refreshcontrol.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/refreshcontrol.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrefresh"></a>onRefresh?: <span class="propType">function</span> <a class="hash-link" href="docs/refreshcontrol.html#onrefresh">#</a></h4><div><p>Called when the view starts refreshing.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="refreshing"></a>refreshing: <span class="propType">bool</span> <a class="hash-link" href="docs/refreshcontrol.html#refreshing">#</a></h4><div><p>Whether the view should be indicating an active refresh.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="colors"></a><span class="platform">android</span>colors?: <span class="propType"><span>[<a href="docs/colors.html">color</a>]</span></span> <a class="hash-link" href="docs/refreshcontrol.html#colors">#</a></h4><div><p>The colors (at least one) that will be used to draw the refresh indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="enabled"></a><span class="platform">android</span>enabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/refreshcontrol.html#enabled">#</a></h4><div><p>Whether the pull to refresh functionality is enabled.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progressbackgroundcolor"></a><span class="platform">android</span>progressBackgroundColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/refreshcontrol.html#progressbackgroundcolor">#</a></h4><div><p>The background color of the refresh indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progressviewoffset"></a><span class="platform">android</span>progressViewOffset?: <span class="propType">number</span> <a class="hash-link" href="docs/refreshcontrol.html#progressviewoffset">#</a></h4><div><p>Progress view top offset</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="size"></a><span class="platform">android</span>size?: <span class="propType">enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE)</span> <a class="hash-link" href="docs/refreshcontrol.html#size">#</a></h4><div><p>Size of the refresh indicator, see RefreshControl.SIZE.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a><span class="platform">ios</span>tintColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/refreshcontrol.html#tintcolor">#</a></h4><div><p>The color of the refresh indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="title"></a><span class="platform">ios</span>title?: <span class="propType">string</span> <a class="hash-link" href="docs/refreshcontrol.html#title">#</a></h4><div><p>The title displayed under the refresh indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="titlecolor"></a><span class="platform">ios</span>titleColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/refreshcontrol.html#titlecolor">#</a></h4><div><p>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/RefreshControl/RefreshControl.js">edit the content above on GitHub</a> and send us a pull request!</p><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/refreshcontrol.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/RefreshControlExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
in the <code>onRefresh</code> function otherwise the refresh indicator will stop immediately.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/refreshcontrol.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/refreshcontrol.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrefresh"></a>onRefresh?: <span class="propType">PropTypes.func</span> <a class="hash-link" href="docs/refreshcontrol.html#onrefresh">#</a></h4><div><p>Called when the view starts refreshing.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="refreshing"></a>refreshing?: <span class="propType">PropTypes.bool.isRequired</span> <a class="hash-link" href="docs/refreshcontrol.html#refreshing">#</a></h4><div><p>Whether the view should be indicating an active refresh.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="colors"></a><span class="platform">android</span>colors?: <span class="propType">PropTypes.arrayOf(ColorPropType)</span> <a class="hash-link" href="docs/refreshcontrol.html#colors">#</a></h4><div><p>The colors (at least one) that will be used to draw the refresh indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="enabled"></a><span class="platform">android</span>enabled?: <span class="propType">PropTypes.bool</span> <a class="hash-link" href="docs/refreshcontrol.html#enabled">#</a></h4><div><p>Whether the pull to refresh functionality is enabled.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progressbackgroundcolor"></a><span class="platform">android</span>progressBackgroundColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/refreshcontrol.html#progressbackgroundcolor">#</a></h4><div><p>The background color of the refresh indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progressviewoffset"></a><span class="platform">android</span>progressViewOffset?: <span class="propType">PropTypes.number</span> <a class="hash-link" href="docs/refreshcontrol.html#progressviewoffset">#</a></h4><div><p>Progress view top offset</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="size"></a><span class="platform">android</span>size?: <span class="propType">PropTypes.oneOf([RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE])</span> <a class="hash-link" href="docs/refreshcontrol.html#size">#</a></h4><div><p>Size of the refresh indicator, see RefreshControl.SIZE.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a><span class="platform">ios</span>tintColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/refreshcontrol.html#tintcolor">#</a></h4><div><p>The color of the refresh indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="title"></a><span class="platform">ios</span>title?: <span class="propType">PropTypes.string</span> <a class="hash-link" href="docs/refreshcontrol.html#title">#</a></h4><div><p>The title displayed under the refresh indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="titlecolor"></a><span class="platform">ios</span>titleColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/refreshcontrol.html#titlecolor">#</a></h4><div><p>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/RefreshControl/RefreshControl.js">edit the content above on GitHub</a> and send us a pull request!</p><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/refreshcontrol.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/RefreshControlExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
const React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
const ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
releases/next/docs/scrollview.html
+48 -29
View File
@@ -25,29 +25,33 @@ wraps all of the child views. Example:</p><p> return (
contentContainer: {
paddingVertical: 20
}
});</p></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&#x27;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(&#x27;none&#x27;, &#x27;interactive&#x27;, &#x27;on-drag&#x27;)</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></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&#x27;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([
&#x27;none&#x27;, // default
&#x27;interactive&#x27;,
&#x27;on-drag&#x27;,
])</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.
- &#x27;none&#x27; (the default), drags do not dismiss the keyboard.
- &#x27;on-drag&#x27;, the keyboard is dismissed when a drag begins.
- &#x27;interactive&#x27;, 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 &#x27;none&#x27;.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboardshouldpersisttaps"></a>keyboardShouldPersistTaps?: <span class="propType">enum(&#x27;always&#x27;, &#x27;never&#x27;, &#x27;handled&#x27;, 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>&#x27;never&#x27; (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 &#x27;none&#x27;.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboardshouldpersisttaps"></a>keyboardShouldPersistTaps?: <span class="propType">PropTypes.oneOf([&#x27;always&#x27;, &#x27;never&#x27;, &#x27;handled&#x27;, 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>&#x27;never&#x27; (the default), tapping outside of the focused text input when the keyboard
is up dismisses the keyboard. When this happens, children won&#x27;t receive the tap.</li><li>&#x27;always&#x27;, 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>&#x27;handled&#x27;, the keyboard will not dismiss automatically when the tap was handled by
a children, (or captured by an ancestor).</li><li>false, deprecated, use &#x27;never&#x27; instead</li><li>true, deprecated, use &#x27;always&#x27; 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:
a children, (or captured by an ancestor).</li><li>false, deprecated, use &#x27;never&#x27; instead</li><li>true, deprecated, use &#x27;always&#x27; 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:
<code>(contentWidth, contentHeight)</code></p><p>It&#x27;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">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&#x27;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">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&#x27;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">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">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
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">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">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>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">bool</span> <a class="hash-link" href="docs/scrollview.html#scrollenabled">#</a></h4><div><p>When false, the content does not scroll.
The default value is true.</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
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 content does not scroll.
The default value is true.</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
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
@@ -57,38 +61,49 @@ 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">enum(&#x27;auto&#x27;, &#x27;always&#x27;, &#x27;never&#x27;)</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>&#x27;auto&#x27;</code> - Default value, allow a user to over-scroll
this view only if the content is large enough to meaningfully scroll.</li><li><code>&#x27;always&#x27;</code> - Always allow a user to over-scroll this view.</li><li><code>&#x27;never&#x27;</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
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([
&#x27;auto&#x27;,
&#x27;always&#x27;,
&#x27;never&#x27;,
])</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>&#x27;auto&#x27;</code> - Default value, allow a user to over-scroll
this view only if the content is large enough to meaningfully scroll.</li><li><code>&#x27;always&#x27;</code> - Always allow a user to over-scroll this view.</li><li><code>&#x27;never&#x27;</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
momentum events to be turned on (see sendMomentumEvents). This doesn&#x27;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="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
FpsListener for it to be useful.</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
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">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">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
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">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">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
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">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">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
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">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">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
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">bool</span> <a class="hash-link" href="docs/scrollview.html#cancancelcontenttouches">#</a></h4><div><p>When false, once tracking starts, won&#x27;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
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&#x27;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
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"><span><span>enum(&#x27;fast&#x27;, &#x27;normal&#x27;), </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
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([&#x27;fast&#x27;, &#x27;normal&#x27;]),
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
decelerates after the user lifts their finger. You may also use string
shortcuts <code>&quot;normal&quot;</code> and <code>&quot;fast&quot;</code> which match the underlying iOS settings
for <code>UIScrollViewDecelerationRateNormal</code> and
<code>UIScrollViewDecelerationRateFast</code> respectively.
- normal: 0.998 (the default)
- fast: 0.99</p></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(&#x27;default&#x27;, &#x27;black&#x27;, &#x27;white&#x27;)</span> <a class="hash-link" href="docs/scrollview.html#indicatorstyle">#</a></h4><div><p>The style of the scroll indicators.
- fast: 0.99</p></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([
&#x27;default&#x27;, // default
&#x27;black&#x27;,
&#x27;white&#x27;,
])</span> <a class="hash-link" href="docs/scrollview.html#indicatorstyle">#</a></h4><div><p>The style of the scroll indicators.
- <code>default</code> (the default), same as <code>black</code>.
- <code>black</code>, scroll indicator is black. This style is good against a light background.
- <code>white</code>, scroll indicator is white. This style is good against a dark background.</p></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
- <code>white</code>, scroll indicator is white. This style is good against a dark background.</p></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
(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.
@@ -98,15 +113,19 @@ 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">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(&#x27;start&#x27;, &#x27;center&#x27;, &#x27;end&#x27;)</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
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([
&#x27;start&#x27;, // default
&#x27;center&#x27;,
&#x27;end&#x27;,
])</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.
- <code>start</code> (the default) will align the snap at the left (horizontal) or top (vertical)
- <code>center</code> will align the snap in the center
- <code>end</code> will align the snap at the right (horizontal) or bottom (vertical)</p></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>end</code> will align the snap at the right (horizontal) or bottom (vertical)</p></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
<code>snapToInterval</code>. This can be used for paginating through children
that have lengths smaller than the scroll view. Used in combination
with <code>snapToAlignment</code>.</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,
with <code>snapToAlignment</code>.</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,
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,
releases/next/docs/sectionlist.html
+50 -23
View File
@@ -25,10 +25,11 @@ changes. This includes the <code>data</code> prop and parent component state.</l
offscreen. This means it&#x27;s possible to scroll faster than the fill rate ands momentarily see
blank content. This is a tradeoff that can be adjusted to suit the needs of each application,
and we are working on improving it behind the scenes.</li><li>By default, the list looks for a <code>key</code> prop on each item and uses that for the React key.
Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li></ul><p>NOTE: <code>removeClippedSubviews</code> might not be necessary and may cause bugs. If you see issues with
content not rendering, e.g when using <code>LayoutAnimation</code>, try setting
<code>removeClippedSubviews={false}</code>, and we may change the default in the future after more
experimentation in production apps.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/sectionlist.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemseparatorcomponent"></a>ItemSeparatorComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/sectionlist.html#itemseparatorcomponent">#</a></h4><div><p>Rendered in between adjacent Items within each section.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listfootercomponent"></a>ListFooterComponent?: <span class="propType"><span>?<span><span>ReactClass&lt;any&gt; | </span>React.Element&lt;any&gt;</span></span></span> <a class="hash-link" href="docs/sectionlist.html#listfootercomponent">#</a></h4><div><p>Rendered at the very end of the list.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listheadercomponent"></a>ListHeaderComponent?: <span class="propType"><span>?<span><span>ReactClass&lt;any&gt; | </span>React.Element&lt;any&gt;</span></span></span> <a class="hash-link" href="docs/sectionlist.html#listheadercomponent">#</a></h4><div><p>Rendered at the very beginning of the list.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="sectionseparatorcomponent"></a>SectionSeparatorComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/sectionlist.html#sectionseparatorcomponent">#</a></h4><div><p>Rendered in between each section.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="extradata"></a>extraData?: <span class="propType">any</span> <a class="hash-link" href="docs/sectionlist.html#extradata">#</a></h4><div><p>A marker property for telling the list to re-render (since it implements <code>PureComponent</code>). If
Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/sectionlist.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemseparatorcomponent"></a>ItemSeparatorComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/sectionlist.html#itemseparatorcomponent">#</a></h4><div><p>Rendered in between each item, but not at the top or bottom. By default, <code>highlighted</code> and
<code>leadingItem</code> props are provided. <code>renderItem</code> provides <code>separators.highlight</code>/<code>unhighlight</code>
which will update the <code>highlighted</code> prop, but you can also add custom props with
<code>separators.updateProps</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listfootercomponent"></a>ListFooterComponent?: <span class="propType"><span>?<span><span>ReactClass&lt;any&gt; | </span>React.Element&lt;any&gt;</span></span></span> <a class="hash-link" href="docs/sectionlist.html#listfootercomponent">#</a></h4><div><p>Rendered at the very end of the list.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listheadercomponent"></a>ListHeaderComponent?: <span class="propType"><span>?<span><span>ReactClass&lt;any&gt; | </span>React.Element&lt;any&gt;</span></span></span> <a class="hash-link" href="docs/sectionlist.html#listheadercomponent">#</a></h4><div><p>Rendered at the very beginning of the list.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="sectionseparatorcomponent"></a>SectionSeparatorComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/sectionlist.html#sectionseparatorcomponent">#</a></h4><div><p>Rendered in between each section. Also receives <code>highlighted</code>, <code>leadingItem</code>, and any custom
props from <code>separators.updateProps</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="extradata"></a>extraData?: <span class="propType">any</span> <a class="hash-link" href="docs/sectionlist.html#extradata">#</a></h4><div><p>A marker property for telling the list to re-render (since it implements <code>PureComponent</code>). If
any of your <code>renderItem</code>, Header, Footer, etc. functions depend on anything outside of the
<code>data</code> prop, stick it here and treat it immutably.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialnumtorender"></a>initialNumToRender: <span class="propType">number</span> <a class="hash-link" href="docs/sectionlist.html#initialnumtorender">#</a></h4><div><p>How many items to render in the initial batch. This should be enough to fill the screen but not
much more. Note these items will never be unmounted as part of the windowed rendering in order
@@ -43,8 +44,21 @@ sure to also set the <code>refreshing</code> prop correctly.</p></div></div><div
viewableItems: Array&lt;ViewToken&gt;,
changed: Array&lt;ViewToken&gt;,
}) =&gt; void</span></span> <a class="hash-link" href="docs/sectionlist.html#onviewableitemschanged">#</a></h4><div><p>Called when the viewability of rows changes, as defined by the
<code>viewabilityConfig</code> prop.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="refreshing"></a>refreshing?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/sectionlist.html#refreshing">#</a></h4><div><p>Set this true while waiting for new data from a refresh.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderitem"></a>renderItem: <span class="propType">(info: {item: Item, index: number}) =&gt; ?React.Element&lt;any&gt;</span> <a class="hash-link" href="docs/sectionlist.html#renderitem">#</a></h4><div><p>Default renderer for every item in every section. Can be over-ridden on a per-section basis.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendersectionheader"></a>renderSectionHeader?: <span class="propType"><span>?(info: {section: SectionT}) =&gt; ?React.Element&lt;any&gt;</span></span> <a class="hash-link" href="docs/sectionlist.html#rendersectionheader">#</a></h4><div><p>Rendered at the top of each section. These stick to the top of the <code>ScrollView</code> by default on
iOS. See <code>stickySectionHeadersEnabled</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="sections"></a>sections: <span class="propType">Array&lt;SectionT&gt;</span> <a class="hash-link" href="docs/sectionlist.html#sections">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stickysectionheadersenabled"></a>stickySectionHeadersEnabled?: <span class="propType">boolean</span> <a class="hash-link" href="docs/sectionlist.html#stickysectionheadersenabled">#</a></h4><div><p>Makes section headers stick to the top of the screen until the next one pushes it off. Only
<code>viewabilityConfig</code> prop.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="refreshing"></a>refreshing?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/sectionlist.html#refreshing">#</a></h4><div><p>Set this true while waiting for new data from a refresh.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews?: <span class="propType">boolean</span> <a class="hash-link" href="docs/sectionlist.html#removeclippedsubviews">#</a></h4><div><p>Note: may have bugs (missing content) in some circumstances - use at your own risk.</p><p>This may improve scroll performance for large lists.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderitem"></a>renderItem: <span class="propType">(info: {
item: Item,
index: number,
separators: {
highlight: () =&gt; void,
unhighlight: () =&gt; void,
updateProps: (select: &#x27;leading&#x27; | &#x27;trailing&#x27;, newProps: Object) =&gt; void,
},
}) =&gt; ?React.Element&lt;any&gt;</span> <a class="hash-link" href="docs/sectionlist.html#renderitem">#</a></h4><div><p>Default renderer for every item in every section. Can be over-ridden on a per-section basis.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendersectionheader"></a>renderSectionHeader?: <span class="propType"><span>?(info: {section: SectionT}) =&gt; ?React.Element&lt;any&gt;</span></span> <a class="hash-link" href="docs/sectionlist.html#rendersectionheader">#</a></h4><div><p>Rendered at the top of each section. These stick to the top of the <code>ScrollView</code> by default on
iOS. See <code>stickySectionHeadersEnabled</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="sections"></a>sections: <span class="propType">Array&lt;SectionT&gt;</span> <a class="hash-link" href="docs/sectionlist.html#sections">#</a></h4><div><p>The actual data to render, akin to the <code>data</code> prop in <a href="/react-native/docs/flatlist.html" target=""><code>&lt;FlatList&gt;</code></a>.</p><p>General shape:</p><div class="prism language-javascript">sections<span class="token punctuation">:</span> Array&lt;<span class="token punctuation">{</span>
data<span class="token punctuation">:</span> Array&lt;SectionItem<span class="token operator">&gt;</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> string<span class="token punctuation">,</span>
renderItem<span class="token operator">?</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>item<span class="token punctuation">:</span> SectionItem<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 punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token operator">?</span>React<span class="token punctuation">.</span>Element&lt;<span class="token operator">*</span><span class="token operator">&gt;</span><span class="token punctuation">,</span>
ItemSeparatorComponent<span class="token operator">?</span><span class="token punctuation">:</span> <span class="token operator">?</span>ReactClass&lt;<span class="token punctuation">{</span>highlighted<span class="token punctuation">:</span> boolean<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">&gt;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token operator">&gt;</span></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stickysectionheadersenabled"></a>stickySectionHeadersEnabled?: <span class="propType">boolean</span> <a class="hash-link" href="docs/sectionlist.html#stickysectionheadersenabled">#</a></h4><div><p>Makes section headers stick to the top of the screen until the next one pushes it off. Only
enabled by default on iOS because that is the platform standard there.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/sectionlist.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltolocation"></a>scrollToLocation<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/sectionlist.html#scrolltolocation">#</a></h4><div><p>Scrolls to the item at the specified <code>sectionIndex</code> and <code>itemIndex</code> (within the section)
positioned in the viewable area such that <code>viewPosition</code> 0 places it at the top (and may be
covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle. <code>viewOffset</code> is a
@@ -96,11 +110,9 @@ const renderSectionHeader <span class="token operator">=</span> <span class="tok
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
const CustomSeparatorComponent <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>text<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>
&lt;View<span class="token operator">&gt;</span>
&lt;SeparatorComponent <span class="token operator">/</span><span class="token operator">&gt;</span>
const CustomSeparatorComponent <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>text<span class="token punctuation">,</span> highlighted<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>customSeparator<span class="token punctuation">,</span> highlighted &amp;&amp; <span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;rgb(217, 217, 217)&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>separatorText<span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">{</span>text<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;SeparatorComponent <span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
@@ -161,11 +173,11 @@ class <span class="token class-name">SectionListExample</span> extends <span cla
&lt;AnimatedSectionList
ListHeaderComponent<span class="token operator">=</span><span class="token punctuation">{</span>HeaderComponent<span class="token punctuation">}</span>
ListFooterComponent<span class="token operator">=</span><span class="token punctuation">{</span>FooterComponent<span class="token punctuation">}</span>
SectionSeparatorComponent<span class="token operator">=</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">&gt;</span>
&lt;CustomSeparatorComponent text<span class="token operator">=</span><span class="token string">&quot;SECTION SEPARATOR&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
SectionSeparatorComponent<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">{</span>highlighted<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span>
&lt;CustomSeparatorComponent highlighted<span class="token operator">=</span><span class="token punctuation">{</span>highlighted<span class="token punctuation">}</span> text<span class="token operator">=</span><span class="token string">&quot;SECTION SEPARATOR&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">}</span>
ItemSeparatorComponent<span class="token operator">=</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">&gt;</span>
&lt;CustomSeparatorComponent text<span class="token operator">=</span><span class="token string">&quot;ITEM SEPARATOR&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
ItemSeparatorComponent<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">{</span>highlighted<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span>
&lt;CustomSeparatorComponent highlighted<span class="token operator">=</span><span class="token punctuation">{</span>highlighted<span class="token punctuation">}</span> text<span class="token operator">=</span><span class="token string">&quot;ITEM SEPARATOR&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">}</span>
debug<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>debug<span class="token punctuation">}</span>
enableVirtualization<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>virtualized<span class="token punctuation">}</span>
@@ -178,22 +190,30 @@ class <span class="token class-name">SectionListExample</span> extends <span cla
stickySectionHeadersEnabled
sections<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>
<span class="token punctuation">{</span>renderItem<span class="token punctuation">:</span> renderStackedItem<span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">&#x27;s1&#x27;</span><span class="token punctuation">,</span> data<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">&#x27;Item In Header Section&#x27;</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">&#x27;Section s1&#x27;</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">&#x27;0&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">&#x27;Item In Header Section&#x27;</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">&#x27;Section s1&#x27;</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">&#x27;header item&#x27;</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>
<span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">&#x27;s2&#x27;</span><span class="token punctuation">,</span> data<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>noImage<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">&#x27;1st item&#x27;</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">&#x27;Section s2&#x27;</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">&#x27;0&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>noImage<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">&#x27;2nd item&#x27;</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">&#x27;Section s2&#x27;</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">&#x27;1&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>noImage<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">&#x27;1st item&#x27;</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">&#x27;Section s2&#x27;</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">&#x27;noimage0&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>noImage<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">&#x27;2nd item&#x27;</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">&#x27;Section s2&#x27;</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">&#x27;noimage1&#x27;</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>
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>filteredSectionData<span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">}</span>
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>list<span class="token punctuation">}</span>
viewabilityConfig<span class="token operator">=</span><span class="token punctuation">{</span>VIEWABILITY_CONFIG<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>UIExplorerPage<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
_renderItemComponent <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>
&lt;ItemComponent item<span class="token operator">=</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span> onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_pressItem<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
_renderItemComponent <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>item<span class="token punctuation">,</span> separators<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>
&lt;ItemComponent
item<span class="token operator">=</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span>
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_pressItem<span class="token punctuation">}</span>
onHideUnderlay<span class="token operator">=</span><span class="token punctuation">{</span>separators<span class="token punctuation">.</span>unhighlight<span class="token punctuation">}</span>
onShowUnderlay<span class="token operator">=</span><span class="token punctuation">{</span>separators<span class="token punctuation">.</span>highlight<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true"> // This is called when items change viewability by scrolling into our out of
</span> <span class="token comment" spellcheck="true"> // the viewable area.
</span> _onViewableItemsChanged <span class="token operator">=</span> <span class="token punctuation">(</span>info<span class="token punctuation">:</span> <span class="token punctuation">{</span>
@@ -212,17 +232,25 @@ class <span class="token class-name">SectionListExample</span> extends <span cla
<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 punctuation">}</span><span class="token punctuation">;</span>
_pressItem <span class="token operator">=</span> <span class="token punctuation">(</span>index<span class="token punctuation">:</span> number<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token function">pressItem<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> index<span class="token punctuation">)</span><span class="token punctuation">;</span>
_pressItem <span class="token operator">=</span> <span class="token punctuation">(</span>key<span class="token punctuation">:</span> string<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token operator">!</span><span class="token function">isNaN<span class="token punctuation">(</span></span>key<span class="token punctuation">)</span> &amp;&amp; <span class="token function">pressItem<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> key<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>
const styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
customSeparator<span class="token punctuation">:</span> <span class="token punctuation">{</span>
backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;rgb(200, 199, 204)&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
header<span class="token punctuation">:</span> <span class="token punctuation">{</span>
backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;#e9eaed&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
headerText<span class="token punctuation">:</span> <span class="token punctuation">{</span>
padding<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
fontWeight<span class="token punctuation">:</span> <span class="token string">&#x27;600&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
list<span class="token punctuation">:</span> <span class="token punctuation">{</span>
backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;white&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
optionSection<span class="token punctuation">:</span> <span class="token punctuation">{</span>
flexDirection<span class="token punctuation">:</span> <span class="token string">&#x27;row&#x27;</span><span class="token punctuation">,</span>
@@ -233,8 +261,7 @@ const styles <span class="token operator">=</span> StyleSheet<span class="token
separatorText<span class="token punctuation">:</span> <span class="token punctuation">{</span>
color<span class="token punctuation">:</span> <span class="token string">&#x27;gray&#x27;</span><span class="token punctuation">,</span>
alignSelf<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">,</span>
padding<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
fontSize<span class="token punctuation">:</span> <span class="token number">9</span><span class="token punctuation">,</span>
fontSize<span class="token punctuation">:</span> <span class="token number">7</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><span class="token punctuation">;</span>
releases/next/docs/segmentedcontrolios.html
+5 -5
View File
@@ -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 operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></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">&gt;</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&#x27;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&#x27;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&#x27;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&#x27;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><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/segmentedcontrolios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/SegmentedControlIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<span class="token operator">/</span><span class="token operator">&gt;</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&#x27;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&#x27;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&#x27;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&#x27;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><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/segmentedcontrolios.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/SegmentedControlIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
releases/next/docs/slider.html
+5 -5
View File
File diff suppressed because one or more lines are too long
releases/next/docs/switch.html
+2 -2
View File
@@ -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">bool</span> <a class="hash-link" href="docs/switch.html#disabled">#</a></h4><div><p>If true the user won&#x27;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.
@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&#x27;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.
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><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/switch.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/SwitchExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
releases/next/docs/tabbarios-item.html
+22 -6
View File
File diff suppressed because one or more lines are too long
releases/next/docs/text.html
+8 -8
View File
@@ -37,27 +37,27 @@ const styles <span class="token operator">=</span> StyleSheet<span class="token
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">
// App registration and rendering
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">&#x27;TextInANest&#x27;</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">&gt;</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&#x27;react&#x27;%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20StyleSheet%20%7D%20from%20&#x27;react-native&#x27;%3B%0A%0Aclass%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&#x27;s%20Nest%22%2C%0A%20%20%20%20%20%20bodyText%3A%20&#x27;This%20is%20not%20really%20a%20bird%20nest.&#x27;%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&#x27;%5Cn&#x27;%7D%7B&#x27;%5Cn&#x27;%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&#x27;Cochin&#x27;%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&#x27;bold&#x27;%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0A%2F%2F%20App%20registration%20and%20rendering%0AAppRegistry.registerComponent(&#x27;TextInANest&#x27;%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
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">&#x27;TextInANest&#x27;</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">&gt;</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&#x27;react&#x27;%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20StyleSheet%20%7D%20from%20&#x27;react-native&#x27;%3B%0A%0Aclass%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&#x27;s%20Nest%22%2C%0A%20%20%20%20%20%20bodyText%3A%20&#x27;This%20is%20not%20really%20a%20bird%20nest.&#x27;%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&#x27;%5Cn&#x27;%7D%7B&#x27;%5Cn&#x27;%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&#x27;Cochin&#x27;%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&#x27;bold&#x27;%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0A%2F%2F%20App%20registration%20and%20rendering%0AAppRegistry.registerComponent(&#x27;TextInANest&#x27;%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
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">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(&#x27;head&#x27;, &#x27;middle&#x27;, &#x27;tail&#x27;, &#x27;clip&#x27;)</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">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([&#x27;head&#x27;, &#x27;middle&#x27;, &#x27;tail&#x27;, &#x27;clip&#x27;])</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., &quot;...wxyz&quot;</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. &quot;ab...yz&quot;</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., &quot;abcd...&quot;</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="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
missing text at the end of the line is indicated by an ellipsis glyph. e.g., &quot;abcd...&quot;</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="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
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">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}&gt;</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={() =&gt; console.log(&#x27;1st&#x27;)}</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">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}&gt;</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={() =&gt; console.log(&#x27;1st&#x27;)}</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&#x27;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">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(&#x27;normal&#x27;, &#x27;italic&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">fontWeight <span class="propType">enum(&#x27;normal&#x27;, &#x27;bold&#x27;, &#x27;100&#x27;, &#x27;200&#x27;, &#x27;300&#x27;, &#x27;400&#x27;, &#x27;500&#x27;, &#x27;600&#x27;, &#x27;700&#x27;, &#x27;800&#x27;, &#x27;900&#x27;)</span> <div><p>Specifies font weight. The values &#x27;normal&#x27; and &#x27;bold&#x27; 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">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">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(&#x27;normal&#x27;, &#x27;italic&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">fontWeight <span class="propType">enum(&#x27;normal&#x27;, &#x27;bold&#x27;, &#x27;100&#x27;, &#x27;200&#x27;, &#x27;300&#x27;, &#x27;400&#x27;, &#x27;500&#x27;, &#x27;600&#x27;, &#x27;700&#x27;, &#x27;800&#x27;, &#x27;900&#x27;)</span> <div><p>Specifies font weight. The values &#x27;normal&#x27; and &#x27;bold&#x27; 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">number</span> </h6></div><div class="prop"><h6 class="propTitle">textAlign <span class="propType">enum(&#x27;auto&#x27;, &#x27;left&#x27;, &#x27;right&#x27;, &#x27;center&#x27;, &#x27;justify&#x27;)</span> <div><p>Specifies text alignment. The value &#x27;justify&#x27; 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(&#x27;none&#x27;, &#x27;underline&#x27;, &#x27;line-through&#x27;, &#x27;underline line-through&#x27;)</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">enum(&#x27;auto&#x27;, &#x27;top&#x27;, &#x27;bottom&#x27;, &#x27;center&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>fontVariant <span class="propType"><span>[enum(&#x27;small-caps&#x27;, &#x27;oldstyle-nums&#x27;, &#x27;lining-nums&#x27;, &#x27;tabular-nums&#x27;, &#x27;proportional-nums&#x27;)]</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(&#x27;solid&#x27;, &#x27;double&#x27;, &#x27;dotted&#x27;, &#x27;dashed&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>writingDirection <span class="propType">enum(&#x27;auto&#x27;, &#x27;ltr&#x27;, &#x27;rtl&#x27;)</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="nativeid"></a><span class="platform">android</span>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="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(&#x27;simple&#x27;, &#x27;highQuality&#x27;, &#x27;balanced&#x27;)</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
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(&#x27;auto&#x27;, &#x27;top&#x27;, &#x27;bottom&#x27;, &#x27;center&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>fontVariant <span class="propType"><span>[enum(&#x27;small-caps&#x27;, &#x27;oldstyle-nums&#x27;, &#x27;lining-nums&#x27;, &#x27;tabular-nums&#x27;, &#x27;proportional-nums&#x27;)]</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(&#x27;solid&#x27;, &#x27;double&#x27;, &#x27;dotted&#x27;, &#x27;dashed&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>writingDirection <span class="propType">enum(&#x27;auto&#x27;, &#x27;ltr&#x27;, &#x27;rtl&#x27;)</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="nativeid"></a><span class="platform">android</span>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="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([&#x27;simple&#x27;, &#x27;highQuality&#x27;, &#x27;balanced&#x27;])</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
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">import React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> from <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
import <span class="token punctuation">{</span> AppRegistry<span class="token punctuation">,</span> Text <span class="token punctuation">}</span> from <span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">;</span>
releases/next/docs/textinput.html
+74 -22
View File
@@ -86,50 +86,102 @@ app&#x27;s activity <code>windowSoftInputMode</code> param to <code>adjustResize
This may cause issues with components that have position: &#x27;absolute&#x27;
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">enum(&#x27;none&#x27;, &#x27;sentences&#x27;, &#x27;words&#x27;, &#x27;characters&#x27;)</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&#x27;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.
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([
&#x27;none&#x27;,
&#x27;sentences&#x27;,
&#x27;words&#x27;,
&#x27;characters&#x27;,
])</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&#x27;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.
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">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.
<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.
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">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(&#x27;default&#x27;, &#x27;email-address&#x27;, &#x27;numeric&#x27;, &#x27;phone-pad&#x27;, &#x27;ascii-capable&#x27;, &#x27;numbers-and-punctuation&#x27;, &#x27;url&#x27;, &#x27;number-pad&#x27;, &#x27;name-phone-pad&#x27;, &#x27;decimal-pad&#x27;, &#x27;twitter&#x27;, &#x27;web-search&#x27;)</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&#x27;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&#x27;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&#x27;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">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
&#x27;default&#x27;,
&#x27;email-address&#x27;,
&#x27;numeric&#x27;,
&#x27;phone-pad&#x27;,
// iOS-only
&#x27;ascii-capable&#x27;,
&#x27;numbers-and-punctuation&#x27;,
&#x27;url&#x27;,
&#x27;number-pad&#x27;,
&#x27;name-phone-pad&#x27;,
&#x27;decimal-pad&#x27;,
&#x27;twitter&#x27;,
&#x27;web-search&#x27;,
])</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&#x27;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&#x27;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&#x27;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">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>.
<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>.
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">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.
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.
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">function</span> <a class="hash-link" href="docs/textinput.html#onsubmitediting">#</a></h4><div><p>Callback that is called when the text input&#x27;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(&#x27;done&#x27;, &#x27;go&#x27;, &#x27;next&#x27;, &#x27;search&#x27;, &#x27;send&#x27;, &#x27;none&#x27;, &#x27;previous&#x27;, &#x27;default&#x27;, &#x27;emergency-call&#x27;, &#x27;google&#x27;, &#x27;join&#x27;, &#x27;route&#x27;, &#x27;yahoo&#x27;)</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&#x27;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">PropTypes.func</span> <a class="hash-link" href="docs/textinput.html#onsubmitediting">#</a></h4><div><p>Callback that is called when the text input&#x27;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
&#x27;done&#x27;,
&#x27;go&#x27;,
&#x27;next&#x27;,
&#x27;search&#x27;,
&#x27;send&#x27;,
// Android-only
&#x27;none&#x27;,
&#x27;previous&#x27;,
// iOS-only
&#x27;default&#x27;,
&#x27;emergency-call&#x27;,
&#x27;google&#x27;,
&#x27;join&#x27;,
&#x27;route&#x27;,
&#x27;yahoo&#x27;,
])</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&#x27;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">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">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
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">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">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
(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">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(&#x27;simple&#x27;, &#x27;highQuality&#x27;, &#x27;balanced&#x27;)</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(&#x27;never&#x27;, &#x27;while-editing&#x27;, &#x27;unless-editing&#x27;, &#x27;always&#x27;)</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(&#x27;phoneNumber&#x27;, &#x27;link&#x27;, &#x27;address&#x27;, &#x27;calendarEvent&#x27;, &#x27;none&#x27;, &#x27;all&#x27;), </span><span>[enum(&#x27;phoneNumber&#x27;, &#x27;link&#x27;, &#x27;address&#x27;, &#x27;calendarEvent&#x27;, &#x27;none&#x27;, &#x27;all&#x27;)]</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.
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([&#x27;simple&#x27;, &#x27;highQuality&#x27;, &#x27;balanced&#x27;])</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([
&#x27;never&#x27;,
&#x27;while-editing&#x27;,
&#x27;unless-editing&#x27;,
&#x27;always&#x27;,
])</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.
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>&#x27;phoneNumber&#x27;</code></li><li><code>&#x27;link&#x27;</code></li><li><code>&#x27;address&#x27;</code></li><li><code>&#x27;calendarEvent&#x27;</code></li><li><code>&#x27;none&#x27;</code></li><li><code>&#x27;all&#x27;</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(&#x27;default&#x27;, &#x27;light&#x27;, &#x27;dark&#x27;)</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.
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>&#x27;phoneNumber&#x27;</code></li><li><code>&#x27;link&#x27;</code></li><li><code>&#x27;address&#x27;</code></li><li><code>&#x27;calendarEvent&#x27;</code></li><li><code>&#x27;none&#x27;</code></li><li><code>&#x27;all&#x27;</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([
&#x27;default&#x27;,
&#x27;light&#x27;,
&#x27;dark&#x27;,
])</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.
This will be called with <code>{ nativeEvent: { key: keyValue } }</code>
where <code>keyValue</code> is <code>&#x27;Enter&#x27;</code> or <code>&#x27;Backspace&#x27;</code> for respective keys and
the typed-in character otherwise including <code>&#x27; &#x27;</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">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">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
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">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">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).
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><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/textinput.html#examples">#</a></h3><div><table width="100%"><tbody><tr><td><h4><a class="anchor" name="ios"></a>IOS <a class="hash-link" href="docs/textinput.html#ios">#</a></h4></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/TextInputExample.ios.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
releases/next/docs/toolbarandroid.html
+11 -6
View File
@@ -18,20 +18,25 @@ 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 &#x27;Settings&#x27;
</span> <span class="token function">showSettings<span class="token punctuation">(</span></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"><span>[<span>{<span><span><span>title: string</span>, </span><span><span>icon: optionalImageSource</span>, </span><span><span>show: enum(&#x27;always&#x27;, &#x27;ifRoom&#x27;, &#x27;never&#x27;)</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
<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([&#x27;always&#x27;, &#x27;ifRoom&#x27;, &#x27;never&#x27;]),
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
or text on the right side of the widget. If they don&#x27;t fit they are placed in an &#x27;overflow&#x27;
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(&#x27;./some_icon.png&#x27;)</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">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">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
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">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">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
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">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.
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.
In addition to this property you need to add</p><p> android:supportsRtl=&quot;true&quot;</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">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><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/toolbarandroid.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/ToolbarAndroidExample.android.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<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><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/toolbarandroid.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/ToolbarAndroidExample.android.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
releases/next/docs/touchablehighlight.html
+3 -3
View File
@@ -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">&gt;</span>
&lt;<span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</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">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.
<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.
shiftDistanceX: Defaults to 2.0.
shiftDistanceY: Defaults to 2.0.
tiltAngle: Defaults to 0.05.
releases/next/docs/touchablenativefeedback.html
+1 -1
View File
@@ -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&#x27;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&#x27;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">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">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
background. This is useful if one of your child views has a background of its own, or you&#x27;re
e.g. displaying images, and you don&#x27;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
releases/next/docs/touchableopacity.html
+2 -2
View File
@@ -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">&gt;</span>
&lt;<span class="token operator">/</span>TouchableOpacity<span class="token operator">&gt;</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">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">Tutorial</a><a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</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">Showcase</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</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="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://facebook.github.io/react/" target="_blank">React</a></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&amp;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">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">Tutorial</a><a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</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">Showcase</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</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="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://facebook.github.io/react/" target="_blank">React</a></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&amp;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)
releases/next/docs/touchablewithoutfeedback.html
+8 -3
View File
File diff suppressed because one or more lines are too long
releases/next/docs/virtualizedlist.html
+10 -7
View File
@@ -13,10 +13,7 @@ changes. This includes the <code>data</code> prop and parent component state.</l
offscreen. This means it&#x27;s possible to scroll faster than the fill rate ands momentarily see
blank content. This is a tradeoff that can be adjusted to suit the needs of each application,
and we are working on improving it behind the scenes.</li><li>By default, the list looks for a <code>key</code> prop on each item and uses that for the React key.
Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li></ul><p>NOTE: <code>removeClippedSubviews</code> might not be necessary and may cause bugs. If you see issues with
content not rendering, e.g when using <code>LayoutAnimation</code>, try setting
<code>removeClippedSubviews={false}</code>, and we may change the default in the future after more
experimentation in production apps.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/virtualizedlist.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="data"></a>data?: <span class="propType">any</span> <a class="hash-link" href="docs/virtualizedlist.html#data">#</a></h4><div><p>The default accessor functions assume this is an Array&lt;{key: string}&gt; but you can override
Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/virtualizedlist.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="data"></a>data?: <span class="propType">any</span> <a class="hash-link" href="docs/virtualizedlist.html#data">#</a></h4><div><p>The default accessor functions assume this is an Array&lt;{key: string}&gt; but you can override
getItem, getItemCount, and keyExtractor to handle any type of index-based data.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="debug"></a>debug?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/virtualizedlist.html#debug">#</a></h4><div><p><code>debug</code> will turn on extra logging and visual overlays to aid with debugging both usage and
implementation, but with a significant perf hit.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="disablevirtualization"></a>disableVirtualization: <span class="propType">boolean</span> <a class="hash-link" href="docs/virtualizedlist.html#disablevirtualization">#</a></h4><div><p>DEPRECATED: Virtualization provides significant performance and memory optimizations, but fully
unmounts react instances that are outside of the render window. You should only need to disable
@@ -32,9 +29,15 @@ sure to also set the <code>refreshing</code> prop correctly.</p></div></div><div
viewableItems: Array&lt;ViewToken&gt;,
changed: Array&lt;ViewToken&gt;,
}) =&gt; void</span></span> <a class="hash-link" href="docs/virtualizedlist.html#onviewableitemschanged">#</a></h4><div><p>Called when the viewability of rows changes, as defined by the
<code>viewabilityConfig</code> prop.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="refreshing"></a>refreshing?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/virtualizedlist.html#refreshing">#</a></h4><div><p>Set this true while waiting for new data from a refresh.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews?: <span class="propType">boolean</span> <a class="hash-link" href="docs/virtualizedlist.html#removeclippedsubviews">#</a></h4><div><p>A native optimization that removes clipped subviews (those outside the parent) from the view
hierarchy to offload work from the native rendering system. They are still kept around so no
memory is saved and state is preserved.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderitem"></a>renderItem: <span class="propType">(info: {item: Item, index: number}) =&gt; ?React.Element&lt;any&gt;</span> <a class="hash-link" href="docs/virtualizedlist.html#renderitem">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderscrollcomponent"></a>renderScrollComponent: <span class="propType">(props: Object) =&gt; React.Element&lt;any&gt;</span> <a class="hash-link" href="docs/virtualizedlist.html#renderscrollcomponent">#</a></h4><div><p>Render a custom scroll component, e.g. with a differently styled <code>RefreshControl</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrolleventthrottle"></a>scrollEventThrottle?: <a class="hash-link" href="docs/virtualizedlist.html#scrolleventthrottle">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="updatecellsbatchingperiod"></a>updateCellsBatchingPeriod: <span class="propType">number</span> <a class="hash-link" href="docs/virtualizedlist.html#updatecellsbatchingperiod">#</a></h4><div><p>Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off
<code>viewabilityConfig</code> prop.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="refreshing"></a>refreshing?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/virtualizedlist.html#refreshing">#</a></h4><div><p>Set this true while waiting for new data from a refresh.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews?: <span class="propType">boolean</span> <a class="hash-link" href="docs/virtualizedlist.html#removeclippedsubviews">#</a></h4><div><p>Note: may have bugs (missing content) in some circumstances - use at your own risk.</p><p>This may improve scroll performance for large lists.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderitem"></a>renderItem: <span class="propType">(info: {
item: Item,
index: number,
separators: {
highlight: () =&gt; void,
unhighlight: () =&gt; void,
updateProps: (select: &#x27;leading&#x27; | &#x27;trailing&#x27;, newProps: Object) =&gt; void,
},
}) =&gt; ?React.Element&lt;any&gt;</span> <a class="hash-link" href="docs/virtualizedlist.html#renderitem">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderscrollcomponent"></a>renderScrollComponent: <span class="propType">(props: Object) =&gt; React.Element&lt;any&gt;</span> <a class="hash-link" href="docs/virtualizedlist.html#renderscrollcomponent">#</a></h4><div><p>Render a custom scroll component, e.g. with a differently styled <code>RefreshControl</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrolleventthrottle"></a>scrollEventThrottle?: <a class="hash-link" href="docs/virtualizedlist.html#scrolleventthrottle">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="updatecellsbatchingperiod"></a>updateCellsBatchingPeriod: <span class="propType">number</span> <a class="hash-link" href="docs/virtualizedlist.html#updatecellsbatchingperiod">#</a></h4><div><p>Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off
screen. Similar fill rate/responsiveness tradeoff as <code>maxToRenderPerBatch</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewabilityconfig"></a>viewabilityConfig?: <span class="propType">ViewabilityConfig</span> <a class="hash-link" href="docs/virtualizedlist.html#viewabilityconfig">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="windowsize"></a>windowSize: <span class="propType">number</span> <a class="hash-link" href="docs/virtualizedlist.html#windowsize">#</a></h4><div><p>Determines the maximum number of items rendered outside of the visible area, in units of
visible lengths. So if your list fills the screen, then <code>windowSize={21}</code> (the default) will
render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing
releases/next/docs/webview.html
+59 -14
View File
@@ -11,33 +11,78 @@ class <span class="token class-name">MyWeb</span> extends <span class="token cla
<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&#x27;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">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">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
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">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>.
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>.
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">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&#x27;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
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&#x27;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
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"><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(&#x27;never&#x27;, &#x27;always&#x27;, &#x27;compatibility&#x27;)</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>&#x27;never&#x27;</code> (default) - WebView will not allow a secure origin to load content from an insecure origin.</li><li><code>&#x27;always&#x27;</code> - WebView will allow a secure origin to load content from any other origin, even if that origin is insecure.</li><li><code>&#x27;compatibility&#x27;</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="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
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([
&#x27;never&#x27;,
&#x27;always&#x27;,
&#x27;compatibility&#x27;
])</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>&#x27;never&#x27;</code> (default) - WebView will not allow a secure origin to load content from an insecure origin.</li><li><code>&#x27;always&#x27;</code> - WebView will allow a secure origin to load content from any other origin, even if that origin is insecure.</li><li><code>&#x27;compatibility&#x27;</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="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
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">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(&#x27;phoneNumber&#x27;, &#x27;link&#x27;, &#x27;address&#x27;, &#x27;calendarEvent&#x27;, &#x27;none&#x27;, &#x27;all&#x27;), </span><span>[enum(&#x27;phoneNumber&#x27;, &#x27;link&#x27;, &#x27;address&#x27;, &#x27;calendarEvent&#x27;, &#x27;none&#x27;, &#x27;all&#x27;)]</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.
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.
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>&#x27;phoneNumber&#x27;</code></li><li><code>&#x27;link&#x27;</code></li><li><code>&#x27;address&#x27;</code></li><li><code>&#x27;calendarEvent&#x27;</code></li><li><code>&#x27;none&#x27;</code></li><li><code>&#x27;all&#x27;</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>&quot;normal&quot;</code> and <code>&quot;fast&quot;</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">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>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>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">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">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
<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><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/webview.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/WebViewExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>