Introducing new iOS WebViews
For a long time now, Apple has discouraged using UIWebViews in favor of WKWebView. In iOS 12, which will be released in the upcoming months, UIWebViews will be formally deprecated. React Native's iOS WebView implementation relies heavily on the UIWebView class. Therefore, in light of these developments, we've built a new native iOS backend to the WebView React Native component that uses WKWebView.
The tail end of these changes were landed in this commit, and will become available in the 0.57 release.
To opt into this new implementation, please use the useWebKit prop:
<WebView useWebKit={true} source={{url: 'https://www.google.com'}} />
+<WebView useWebKit={true} source={{url: 'https://www.google.com'}} />
Improvements
UIWebView had no legitimate way to facilitate communication between the JavaScript running in the WebView, and React Native. When messages were sent from the WebView, we relied on a hack to deliver them to React Native. Succinctly, we encoded the message data into a url with a special scheme, and navigated the WebView to it. On the native side, we intercepted and cancelled this navigation, parsed the data from the url, and finally called into React Native. This implementation was error prone and insecure. I'm glad to announce that we've leveraged WKWebView features to completely replace it.
diff --git a/blog/2018/08/27/wkwebview/index.html b/blog/2018/08/27/wkwebview/index.html
index f2e9eb457b6..38362d78b08 100644
--- a/blog/2018/08/27/wkwebview/index.html
+++ b/blog/2018/08/27/wkwebview/index.html
@@ -71,7 +71,7 @@
Introducing new iOS WebViews
For a long time now, Apple has discouraged using UIWebViews in favor of WKWebView. In iOS 12, which will be released in the upcoming months, UIWebViews will be formally deprecated. React Native's iOS WebView implementation relies heavily on the UIWebView class. Therefore, in light of these developments, we've built a new native iOS backend to the WebView React Native component that uses WKWebView.
The tail end of these changes were landed in this commit, and will become available in the 0.57 release.
To opt into this new implementation, please use the useWebKit prop:
<WebView useWebKit={true} source={{url: 'https://www.google.com'}} />
+<WebView useWebKit={true} source={{url: 'https://www.google.com'}} />
Improvements
UIWebView had no legitimate way to facilitate communication between the JavaScript running in the WebView, and React Native. When messages were sent from the WebView, we relied on a hack to deliver them to React Native. Succinctly, we encoded the message data into a url with a special scheme, and navigated the WebView to it. On the native side, we intercepted and cancelled this navigation, parsed the data from the url, and finally called into React Native. This implementation was error prone and insecure. I'm glad to announce that we've leveraged WKWebView features to completely replace it.
diff --git a/blog/atom.xml b/blog/atom.xml
index 4814977f2cd..94f040a0935 100644
--- a/blog/atom.xml
+++ b/blog/atom.xml
@@ -73,7 +73,7 @@
2018-11-01T06:00:00Z
-
This year, the React Native team has focused on a large scale re-architecture of React Native. As Sophie mentioned in her State of React Native post, we've sketched out a plan to better support the thriving population of React Native users and colla...
]]>
+
This year, the React Native team has focused on a large scale re-architecture of React Native. As Sophie mentioned in her State of React Native post, we've sketched out a plan to better support the thriving population of React Native users and colla...
]]>
Héctor Ramos
https://hectorramos.com/about
@@ -109,7 +109,7 @@
2018-07-04T06:00:00Z
- The long-awaited 0.56 version of React Native is now available 🎉. This blog post highlights some of the changes introduced in this new release. We also want to take the opportunity to explain what has kept us busy since March. The breaking changes d...
]]>
+ The long-awaited 0.56 version of React Native is now available 🎉. This blog post highlights some of the changes introduced in this new release. We also want to take the opportunity to explain what has kept us busy since March. The breaking changes di...
]]>
Lorenzo Sciandra
https://github.com/kelset
@@ -337,7 +337,7 @@
2016-12-05T06:00:00Z
- Upgrading to new versions of React Native has been difficult. You might have seen something like this before: 
None of those options is ideal. By overwriting the file we lose our local changes. By not overwriting we don't get the latest updates.
Toda...
]]>
+ Upgrading to new versions of React Native has been difficult. You might have seen something like this before: 
None of those options is ideal. By overwriting the file we lose our local changes. By not overwriting we don't get the latest updates.
Toda...
]]>
Nicolas Cuillery
https://twitter.com/ncuillery
@@ -397,7 +397,7 @@
2016-08-12T06:00:00Z
- Last week I had the opportunity to attend the React Native Meetup at Zynga’s San Francisco office. With around 200 people in attendance, it served as a great place to meet other developers near me that are also interested in React Native. 
I was part...
]]>
+ Last week I had the opportunity to attend the React Native Meetup at Zynga’s San Francisco office. With around 200 people in attendance, it served as a great place to meet other developers near me that are also interested in React Native. 
I was part...
]]>
Héctor Ramos
https://twitter.com/hectorramos
diff --git a/blog/feed.xml b/blog/feed.xml
index ca1b6a39013..618ffb801ac 100644
--- a/blog/feed.xml
+++ b/blog/feed.xml
@@ -52,7 +52,7 @@
https://facebook.github.io/react-native/blog/2018/11/01/oss-roadmap.html
https://facebook.github.io/react-native/blog/2018/11/01/oss-roadmap.html
Thu, 01 Nov 2018 06:00:00 GMT
-
This year, the React Native team has focused on a large scale re-architecture of React Native. As Sophie mentioned in her State of React Native post, we've sketched out a plan to better support the thriving population of React Native users and colla...
]]>
+
This year, the React Native team has focused on a large scale re-architecture of React Native. As Sophie mentioned in her State of React Native post, we've sketched out a plan to better support the thriving population of React Native users and colla...
]]>
-
@@ -73,7 +73,7 @@
https://facebook.github.io/react-native/blog/2018/07/04/releasing-react-native-056.html
https://facebook.github.io/react-native/blog/2018/07/04/releasing-react-native-056.html
Wed, 04 Jul 2018 06:00:00 GMT
- The long-awaited 0.56 version of React Native is now available 🎉. This blog post highlights some of the changes introduced in this new release. We also want to take the opportunity to explain what has kept us busy since March. The breaking changes d...
]]>
+ The long-awaited 0.56 version of React Native is now available 🎉. This blog post highlights some of the changes introduced in this new release. We also want to take the opportunity to explain what has kept us busy since March. The breaking changes di...
]]>
-
@@ -206,7 +206,7 @@
https://facebook.github.io/react-native/blog/2016/12/05/easier-upgrades.html
https://facebook.github.io/react-native/blog/2016/12/05/easier-upgrades.html
Mon, 05 Dec 2016 06:00:00 GMT
- Upgrading to new versions of React Native has been difficult. You might have seen something like this before: 
None of those options is ideal. By overwriting the file we lose our local changes. By not overwriting we don't get the latest updates.
Toda...
]]>
+ Upgrading to new versions of React Native has been difficult. You might have seen something like this before: 
None of those options is ideal. By overwriting the file we lose our local changes. By not overwriting we don't get the latest updates.
Toda...
]]>
-
@@ -241,7 +241,7 @@
https://facebook.github.io/react-native/blog/2016/08/12/react-native-meetup-san-francisco.html
https://facebook.github.io/react-native/blog/2016/08/12/react-native-meetup-san-francisco.html
Fri, 12 Aug 2016 06:00:00 GMT
- Last week I had the opportunity to attend the React Native Meetup at Zynga’s San Francisco office. With around 200 people in attendance, it served as a great place to meet other developers near me that are also interested in React Native. 
I was part...
]]>
+ Last week I had the opportunity to attend the React Native Meetup at Zynga’s San Francisco office. With around 200 people in attendance, it served as a great place to meet other developers near me that are also interested in React Native. 
I was part...
]]>
-
diff --git a/blog/index.html b/blog/index.html
index 0debd5cf725..23f9b7a5371 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -289,7 +289,7 @@
Introducing new iOS WebViews
For a long time now, Apple has discouraged using UIWebViews in favor of WKWebView. In iOS 12, which will be released in the upcoming months, UIWebViews will be formally deprecated. React Native's iOS WebView implementation relies heavily on the UIWebView class. Therefore, in light of these developments, we've built a new native iOS backend to the WebView React Native component that uses WKWebView.
The tail end of these changes were landed in this commit, and will become available in the 0.57 release.
To opt into this new implementation, please use the useWebKit prop:
<WebView useWebKit={true} source={{url: 'https://www.google.com'}} />
+<WebView useWebKit={true} source={{url: 'https://www.google.com'}} />
Improvements
UIWebView had no legitimate way to facilitate communication between the JavaScript running in the WebView, and React Native. When messages were sent from the WebView, we relied on a hack to deliver them to React Native. Succinctly, we encoded the message data into a url with a special scheme, and navigated the WebView to it. On the native side, we intercepted and cancelled this navigation, parsed the data from the url, and finally called into React Native. This implementation was error prone and insecure. I'm glad to announce that we've leveraged WKWebView features to completely replace it.
diff --git a/blog/page2/index.html b/blog/page2/index.html
index e3677dcf474..9134b7b2bdf 100644
--- a/blog/page2/index.html
+++ b/blog/page2/index.html
@@ -384,7 +384,7 @@ it('renders correctly with defaults', Example Usage
Here's an example which builds a keyboard toolbar button to reset <TextInput> state.
class TextInputAccessoryViewExample extends React.Component<{}, *> {
- constructor(props) {
+ constructor(props) {
super(props);
this.state = {text: 'Placeholder Text'};
}
@@ -394,9 +394,9 @@ it('renders correctly with defaults', return (
<View>
<TextInput
- style={styles.default}
+ style={styles.default}
inputAccessoryViewID={inputAccessoryViewID}
- onChangeText={(text) => this.setState({text})}
+ onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
<InputAccessoryView nativeID={inputAccessoryViewID}>
diff --git a/blog/page3/index.html b/blog/page3/index.html
index 62fbb2e8a06..0c68fce49ad 100644
--- a/blog/page3/index.html
+++ b/blog/page3/index.html
@@ -246,7 +246,7 @@
There is an ECMAScript proposal to introduce the existential operator which will make this much more convenient. But until a time when that proposal is finalized, we want a solution that improves our quality of life, maintains existing language semantics, and encourages type safety with Flow.
We came up with an existential function we call idx.
-idx(props, (_) => _.user.friends[0].friends);
+idx(props, (_) => _.user.friends[0].friends);
The invocation in this code snippet behaves similarly to the boolean expression in the code snippet above, except with significantly less repetition. The idx function takes exactly two arguments:
@@ -313,11 +313,11 @@
These components are based on PureComponent which means that they will not re-render if props remains shallow-equal. Make sure that everything your renderItem function depends on directly is passed as a prop that is not === after updates, otherwise your UI may not update on changes. This includes the data prop and parent component state. For example:
<FlatList
data={this.state.data}
- renderItem={({item}) => (
+ renderItem={({item}) => (
<MyItem
item={item}
onPress={() =>
- this.setState((oldState) => ({
+ this.setState((oldState) => ({
selected: {
// New instance breaks `===`
...oldState.selected, // copy old data
@@ -603,7 +603,7 @@ index e98ebb0..2fb6a11 Headless JS
Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music. It is only available on Android, for now.
To get started, define your async task in a dedicated file (e.g. SomeTaskName.js):
-module.exports = async (taskData) => {
+module.exports = async (taskData) => {
// Perform your task here.
};
diff --git a/blog/page4/index.html b/blog/page4/index.html
index 031eb500516..130ccd43d07 100644
--- a/blog/page4/index.html
+++ b/blog/page4/index.html
@@ -105,7 +105,7 @@
Android:
// in MainActivity.java
- I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
+ I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.allowRTL(context, true);
For Android, you need add android:supportsRtl="true" to the <application> element in AndroidManifest.xml file.
@@ -185,18 +185,18 @@
-
<RNTesterBlock title={'Quickly Test RTL Layout'}>
- <View style={styles.flexDirectionRow}>
- <Text style={styles.switchRowTextView}>forceRTL</Text>
- <View style={styles.switchRowSwitchView}>
- <Switch
+<RNTesterBlock title={'Quickly Test RTL Layout'}>
+ <View style={styles.flexDirectionRow}>
+ <Text style={styles.switchRowTextView}>forceRTL</Text>
+ <View style={styles.switchRowSwitchView}>
+ <Switch
onValueChange={this._onDirectionChange}
style={styles.rightAlignStyle}
value={this.state.isRTL}
/>
- </View>
- </View>
-</RNTesterBlock>;
+ </View>
+ </View>
+</RNTesterBlock>;
_onDirectionChange = () => {
I18nManager.forceRTL(!this.state.isRTL);
diff --git a/css/main.css b/css/main.css
index d5e08af493f..a48a2777942 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1 +1 @@
-a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}body{color:#24292e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;word-wrap:break-word}*{box-sizing:border-box}b,strong{font-weight:600}em,i{font-style:italic}[type=checkbox]{box-sizing:border-box;padding:0}a,a:hover{color:#222;text-decoration:none}a:active,a:hover{outline-width:0}a:not([href]){color:inherit;text-decoration:none}p{margin-bottom:1em;margin-top:0}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:600;line-height:1.25;margin-bottom:16px;margin-top:1.5em}h1{font-size:32px}h2{font-size:24px}h3{font-size:20px}h4{font-size:16px}h5{font-size:14px}h6{font-size:13.6px}ol,ul{margin-bottom:1em;margin-top:0;padding-left:2em}ol ol,ul ol{list-style-type:lower-roman}ol ol,ol ul,ul ol,ul ul{margin-bottom:0;margin-top:0}ol ol ol,ol ul ol,ul ol ol,ul ul ol{list-style-type:lower-alpha}li{word-wrap:break-all}li>p{margin-top:1em}li+li{margin-top:.25em}img{border-style:none;box-sizing:content-box;max-width:100%}img[align=right]{padding-left:1.25em}img[align=left]{padding-right:1.25em}table{border-spacing:0;display:block;margin-bottom:16px;margin-top:0;overflow:auto;width:100%}table tr{background-color:transparent;border-top:1px solid #dfe2e5}table tr:nth-child(2n){background-color:#f6f8fa}table td,table th{border:1px solid #dfe2e5;padding:6px 13px}table th{background-color:inherit;font-weight:600}table td,table th{color:inherit}blockquote{color:#6a737d;font-size:16px;margin:0;margin-bottom:16px;padding:0 1em}blockquote>:first-child{margin-top:0}blockquote>:last-child{margin-bottom:0}code{background-color:rgba(27,31,35,.05);border-radius:3px;color:inherit;font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:85%;margin:0;padding:3.2px 6.4px}pre{margin-bottom:16px}pre code{background-color:transparent;border:0;display:inline;font-size:85%;line-height:inherit;margin:0;max-width:auto;overflow:visible;padding:0;white-space:pre;word-break:normal;word-wrap:normal}kbd{background-color:#fafbfc;border:1px solid #d1d5da;border-bottom-color:#c6cbd1;border-radius:3px;box-shadow:inset 0 -1px 0 #c6cbd1;color:#444d56;display:inline-block;font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:68.75%;line-height:10px;padding:3px 5px;vertical-align:middle}hr{border:1px solid #dfe2e5;box-sizing:content-box;margin:1.5em 0;overflow:hidden;padding:0}hr:after,hr:before{content:"";display:table}hr:after{clear:both}body{background-color:#fff;min-height:100vh;text-rendering:optimizeLegibility}@media only screen and (min-width:736px){body{display:flex;flex-direction:column}}article:after,article:before{content:"";display:table}article:after{clear:both}article>:first-child{margin-top:0}article>:last-child{margin-bottom:0}article iframe,article p img{display:block;margin-left:auto;margin-right:auto;max-width:100%}.anchor{display:block;position:relative;top:-80px}.hash-link{line-height:1;margin-left:-20px;opacity:0;padding-right:4px;transition:opacity .3s}.hash-link:hover{opacity:1!important;transition:none}.hash-link .hash-link-icon{vertical-align:middle}.button{border:1px solid #222;border-radius:3px;color:#222;display:inline-block;font-size:14px;font-weight:400;line-height:1.2em;padding:10px;text-decoration:none!important;text-transform:uppercase;transition:background .3s,color .3s}.button:hover{background:#222;color:#fff}h1:hover .hash-link,h2:hover .hash-link,h3:hover .hash-link,h4:hover .hash-link{opacity:.5;transition:none}blockquote{background-color:rgba(255,229,100,.3);border-left:8px solid #ffe564;padding:15px 30px 15px 15px}.wrapper{margin:0 auto;max-width:1100px;padding:0 20px}.wrapper blockquote>p:first-child{padding-top:0}.center{display:block}.center,.homeContainer{text-align:center}.homeContainer .homeWrapper{padding:2em 10px}.homeContainer .homeWrapper .wrapper{margin:0 auto;max-width:900px;padding:0 20px}.homeContainer .homeWrapper .projectLogo img{height:100px;margin-bottom:0}.homeContainer .homeWrapper #project_title{font-size:300%;letter-spacing:-.08em;line-height:1em;margin-bottom:80px}.homeContainer .homeWrapper #project_tagline{font-size:200%;letter-spacing:-.04em;line-height:1em}.projectLogo{display:none;pointer-events:none}.projectLogo img{height:100px;margin-bottom:0}.projectIntro{margin:40px 0}.projectTitle{color:#222;font-size:250%;line-height:1em}.projectTitle>small{display:block;font-weight:400;font-size:50%;line-height:1em;margin:.7em 0 1.3em}@media only screen and (min-width:480px){.projectTitle{font-size:300%;margin:.3em 0}.projectLogo img{height:200px;margin-bottom:10px}.homeContainer .homeWrapper{padding-left:10px;padding-right:10px}}@media only screen and (min-width:736px){.homeContainer .homeWrapper{position:relative}.homeContainer .homeWrapper #inner{max-width:600px;padding-right:40px}}@media only screen and (min-width:1200px){.homeContainer .homeWrapper #inner{max-width:750px}.homeContainer .homeWrapper .projectLogo{align-items:center;bottom:0;display:flex;justify-content:flex-end;left:0;padding:2em 100px 4em;position:absolute;right:0;top:0}.homeContainer .homeWrapper .projectLogo img{height:100%;max-height:250px}}@media only screen and (min-width:1500px){.homeContainer .homeWrapper #inner{max-width:1100px;padding-bottom:40px;padding-top:40px}.wrapper{max-width:1400px}}.mainContainer{flex:1 1 auto;max-width:100%;padding:40px 0}.mainContainer .wrapper{text-align:left}.mainContainer .wrapper .allShareBlock{padding:10px 0}.mainContainer .wrapper .allShareBlock .pluginBlock{margin:12px 0;padding:0}.mainContainer .wrapper .post{position:relative}.mainContainer .wrapper .post.basicPost{margin-top:30px}.mainContainer .wrapper .post .postHeader{margin-bottom:16px}.mainContainer .wrapper .post .postHeaderTitle{margin-top:0;padding:0}.mainContainer .wrapper .post .postSocialPlugins{padding-top:1em}.mainContainer .wrapper .post .docPagination{background:#222;bottom:0;left:0;position:absolute;right:0}.mainContainer .wrapper .post .docPagination .pager{display:inline-block;width:50%}.mainContainer .wrapper .post .docPagination .pagingNext{float:right;text-align:right}.mainContainer .wrapper .post .docPagination a{border:none;color:#fff;display:block;padding:4px 12px}.mainContainer .wrapper .post .docPagination a:hover{background-color:#f9f9f9;color:#393939}.mainContainer .wrapper .post .docPagination a .pagerLabel{display:inline}.mainContainer .wrapper .post .docPagination a .pagerTitle{display:none}@media only screen and (min-width:480px){.mainContainer .wrapper .post .docPagination a .pagerLabel{display:none}.mainContainer .wrapper .post .docPagination a .pagerTitle{display:inline}}@media only screen and (min-width:1024px){.mainContainer .wrapper .post{display:block}.mainContainer .wrapper .posts .post{width:100%}}.fixedHeaderContainer{background:#222;color:#fff;min-height:50px;padding:8px 0;position:fixed;width:100%;z-index:9999;-webkit-transform:translateZ(0);transform:translateZ(0)}@media only screen and (min-width:1024px){.fixedHeaderContainer{flex-shrink:0}}.fixedHeaderContainer a{align-items:center;border:0;color:#fff;display:flex;flex-flow:row nowrap;height:34px;z-index:10000}.fixedHeaderContainer header{display:flex;flex-flow:row nowrap;position:relative;text-align:left}.fixedHeaderContainer header img{height:100%;margin-right:10px}.fixedHeaderContainer header .headerTitle{font-size:1.25em;margin:0}.fixedHeaderContainer header .headerTitleWithLogo{display:block;font-size:1.25em;line-height:18px;margin:0;position:relative;z-index:9999}.fixedHeaderContainer header h3{color:#fff;font-size:16px;margin:0;margin-left:10px;text-decoration:underline}@media (max-width:480px){.headerTitle{font-size:17px}.headerTitleWithLogo{display:none!important}}.promoSection{display:flex;flex-flow:column wrap;font-size:125%;line-height:1.6em;position:relative;z-index:99}.promoSection .promoRow{padding:10px 0}.promoSection .promoRow .pluginWrapper{display:block}.promoSection .promoRow .pluginWrapper.ghStarWrapper,.promoSection .promoRow .pluginWrapper.ghWatchWrapper{height:28px}.promoSection .promoRow .pluginRowBlock{display:flex;flex-wrap:wrap;justify-content:center;margin:0 -2px}.promoSection .promoRow .pluginRowBlock .pluginWrapper{padding:0 2px}.promoSection .promoRow .pluginRowBlock iframe{margin-left:2px;margin-top:5px}input[type=search]{-moz-appearance:none;-webkit-appearance:none}.navSearchWrapper{align-items:center;align-self:center;display:flex;justify-content:center;padding-left:10px;position:absolute;right:10px;top:15px}.navSearchWrapper:before{border:3px solid #e5e5e5;border-radius:50%;content:" ";display:block;height:6px;left:15px;position:absolute;top:50%;-webkit-transform:translateY(-58%);transform:translateY(-58%);width:6px;z-index:1}.navSearchWrapper:after{background:#e5e5e5;content:" ";height:7px;left:24px;position:absolute;top:55%;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);width:3px;z-index:1}.navSearchWrapper .aa-dropdown-menu{background:#f9f9f9;border:3px solid rgba(57,57,57,.25);color:#393939;font-size:14px;left:auto!important;line-height:1.2em;right:0!important}.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--category-header{background:#222;color:#fff;font-size:14px;font-weight:400}.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight{background-color:#222;color:#fff}.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--subcategory-column .algolia-docsearch-suggestion--highlight,.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--title .algolia-docsearch-suggestion--highlight{color:#222}.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--subcategory-column,.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion__secondary{border-color:rgba(57,57,57,.3)}input#search_input_react{background-color:rgba(0,0,0,.2);border:none;border-radius:20px;color:#fff;font-size:14px;font-weight:300;line-height:20px;outline:none;padding-left:25px;position:relative;transition:width .5s ease;width:170px}.navSearchWrapper:before{left:24px}.navSearchWrapper:after{left:35px}input#search_input_react:active,input#search_input_react:focus{color:#fff;width:220px}.navigationSlider .slidingNav .navSearchWrapper .algolia-docsearch-footer a{height:auto}@media only screen and (max-width:735px){.navSearchWrapper{width:40%}}input::-webkit-input-placeholder{color:#e5e5e5}input:-ms-input-placeholder{color:#e5e5e5}input::-ms-input-placeholder{color:#e5e5e5}input::placeholder{color:#e5e5e5}.hljs{padding:1.25rem 1.5rem}.gridBlock{padding:0}.gridBlock>*{box-sizing:border-box}.gridBlock .fourByGridBlock img,.gridBlock .threeByGridBlock img,.gridBlock .twoByGridBlock img{max-width:100%}.gridBlock .gridClear{clear:both}@media only screen and (max-width:735px){.gridBlock .fourByGridBlock{flex:1 0 26%}}@media only screen and (min-width:736px){.gridBlock{display:flex;flex-direction:row;flex-wrap:wrap}.gridBlock>*{margin:0 12px}.gridBlock>:first-child{margin-left:0}.gridBlock>:last-child{margin-right:0}.gridBlock .twoByGridBlock{flex:1 0 40%}.gridBlock .threeByGridBlock{flex:1 0 26%}.gridBlock .fourByGridBlock{flex:1 0 20%}h2+.gridBlock{padding-top:20px}}@media only screen and (min-width:1400px){.gridBlock{display:flex;flex-direction:row;flex-wrap:wrap}}.alignCenter{text-align:center}.alignRight{text-align:right}.imageAlignSide{display:flex;flex-flow:row wrap}.blockImage{max-width:730px}.imageAlignSide .blockImage{flex:0 1 500px;max-width:500px}@media only screen and (max-width:735px){.imageAlignSide .blockImage{display:none}}.imageAlignSide .blockContent{flex:1 1}.imageAlignBottom .blockImage{margin:0 auto 20px;max-width:730px}.imageAlignBottom.alignCenter .blockImage{margin-left:auto;margin-right:auto}.imageAlignTop .blockImage{margin-bottom:20px;max-width:80px}.imageAlignTop.alignCenter .blockImage{margin-left:auto;margin-right:auto}.imageAlignRight .blockImage{margin-left:40px}.imageAlignLeft .blockImage{margin-right:40px}.container .gridBlock .blockContent p{padding:0}.container .wrapper .alignCenter h2{text-align:center}.container .wrapper .imageAlignSide h2{text-align:left}.container .wrapper .imageAlignSide p{margin:0;margin-bottom:40px;max-width:560px}.highlightBackground{background:rgba(153,66,79,.7);color:#fff}.highlightBackground a{font-weight:800}.container.highlightBackground .wrapper h1,.container.highlightBackground .wrapper h2,.container.highlightBackground .wrapper h3,.container.highlightBackground .wrapper h4,.container.highlightBackground .wrapper h5,.highlightBackground a{border-color:#fff;color:#fff}.lightBackground{background:#f7f7f7}.darkBackground{background:gray;color:#fff}.darkBackground a,.darkBackground code{color:#d6b3b8}.container.darkBackground .wrapper h1,.container.darkBackground .wrapper h2,.container.darkBackground .wrapper h3,.container.darkBackground .wrapper h4,.container.darkBackground .wrapper h5{border-color:#fff;color:#fff}.container.paddingAll{padding:40px}.container.paddingBottom{padding-bottom:80px}.container.paddingLeft{padding-left:40px}.container.paddingRight{padding-right:40px}.container.paddingTop{padding-top:80px}@media only screen and (max-width:735px){.container.paddingBottom{padding-bottom:40px}.container.paddingTop{padding-top:20px}}@media only screen and (max-width:1023px){.responsiveList .blockContent{position:relative}.responsiveList .blockContent>div{padding-left:20px}.responsiveList .blockContent:before{content:"\2022";position:absolute}}.navigationSlider .navSlideout{cursor:pointer;padding-top:4px;position:absolute;right:10px;top:0;transition:top .3s;z-index:101}.navigationSlider .slidingNav{bottom:auto;box-sizing:border-box;left:0;position:fixed;right:0;top:0}.navigationSlider .slidingNav.slidingNavActive{height:auto;padding-top:42px;width:300px}.navigationSlider .slidingNav ul{background:#05a5d1;box-sizing:border-box;color:#fff;display:flex;flex-wrap:nowrap;list-style:none;margin-top:50px;padding:0;width:100%}.navigationSlider .slidingNav.slidingNavActive ul{display:block}.navigationSlider .slidingNav ul li{flex:1 1 auto;margin:0;text-align:center;white-space:nowrap}.navigationSlider .slidingNav ul li a{align-items:center;box-sizing:border-box;color:#222;color:inherit;display:flex;font-size:.9em;height:auto;height:50px;justify-content:center;margin:0;padding:10px;transition:background-color .3s}.navigationSlider .slidingNav ul li.siteNavGroupActive>a,.navigationSlider .slidingNav ul li.siteNavItemActive>a,.navigationSlider .slidingNav ul li>a:focus,.navigationSlider .slidingNav ul li>a:hover{background-color:#222}.languages-icon{width:20px}#languages-dropdown{pointer-events:none;position:absolute;width:100%}#languages-dropdown.visible{display:flex}#languages-dropdown.hide{display:none}#languages-dropdown-items{background-color:#222;display:flex;flex-direction:column;min-width:120px;pointer-events:all}#languages li{display:block}.navPusher{left:0;min-height:100%;padding-top:100px;position:relative;z-index:99}.singleRowMobileNav.navPusher{padding-top:50px}.navPusher:after{background:rgba(0,0,0,.4);content:"";height:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s,width .1s .5s,height .1s .5s;width:0}@media screen and (min-width:1024px){.navPusher{display:flex;flex-direction:column;min-height:calc(100vh - 50px);padding-top:50px}.navPusher,.navPusher>:first-child{flex-grow:1}}.sliderActive .navPusher:after{height:100%;opacity:1;transition:opacity .5s;width:100%;z-index:100}@media only screen and (max-width:1024px){.reactNavSearchWrapper input#search_input_react{background-color:hsla(17,71%,82%,.25);border:none;border-radius:20px;box-sizing:border-box;color:#393939;font-size:14px;line-height:20px;outline:none;padding-left:38px;position:relative;transition:background-color .2s cubic-bezier(.68,-.55,.265,1.55),width .2s cubic-bezier(.68,-.55,.265,1.55),color .2s ease;width:100%}.reactNavSearchWrapper input#search_input_react:active,.reactNavSearchWrapper input#search_input_react:focus{background-color:#222;color:#fff}.reactNavSearchWrapper .algolia-docsearch-suggestion--subcategory-inline{display:none}.reactNavSearchWrapper>span{width:100%}.reactNavSearchWrapper .aa-dropdown-menu{font-size:12px;line-height:2em;padding:0;border-width:1px;min-width:500px}.reactNavSearchWrapper .algolia-docsearch-suggestion__secondary{border-top:none}.aa-suggestions{min-height:140px;max-height:60vh;-webkit-overflow-scrolling:touch;overflow-y:scroll}#languages-dropdown{left:0;top:50px}#languages-dropdown-items{background-color:#222;display:flex;flex-direction:row}}@media only screen and (min-width:1024px){.navSearchWrapper{padding-left:10px;position:relative;right:auto;top:auto}.reactNavSearchWrapper input#search_input_react{height:100%;padding-top:8px;padding-bottom:8px;padding-left:38px}.navSearchWrapper .algolia-autocomplete{display:block}.navigationSlider{height:34px;margin-left:auto;position:relative}.navigationSlider .navSlideout{display:none}.navigationSlider nav.slidingNav{background:none;height:auto;position:relative;right:auto;top:auto;width:auto}.navigationSlider .slidingNav ul{background:none;display:flex;flex-flow:row nowrap;margin:0;padding:0;width:auto}.navigationSlider .slidingNav ul li a{border:0;color:hsla(0,0%,100%,.8);display:flex;font-size:16px;font-size:1em;font-weight:300;height:32px;line-height:1.2em;margin:0;padding:0;padding:6px 10px}.navigationSlider .slidingNav ul li.siteNavGroupActive a,.navigationSlider .slidingNav ul li.siteNavItemActive a,.navigationSlider .slidingNav ul li a:hover{color:#fff}}@media only screen and (max-width:735px){.navigationSlider .slidingNav ul{overflow-x:auto}.navigationSlider .slidingNav ul::-webkit-scrollbar{display:none}.reactNavSearchWrapper .aa-dropdown-menu{min-width:400px}}@media only screen and (max-width:475px){.reactNavSearchWrapper .aa-dropdown-menu{min-width:300px}}.docMainWrapper .wrapper{padding-left:0;padding-right:0;padding-top:10px}@media only screen and (min-width:1024px){.docMainWrapper{width:100%}.docMainWrapper>*{margin:0 24px}.docMainWrapper>:first-child{margin-left:0}.docMainWrapper>:last-child{margin-right:0}.docMainWrapper .mainContainer{min-width:0}}.edit-page-link{float:right;font-size:10px;font-weight:400;margin-top:3px;text-decoration:none}@media only screen and (max-width:1023px){.edit-page-link{display:none}}.docLastUpdate{font-size:13px;font-style:italic;margin:20px 0;text-align:right}.docs-prevnext{margin:20px 0}.docs-prevnext:after{clear:both;content:" ";display:table}.docs-next{float:right}.docs-prev{float:left}@media only screen and (max-width:735px){.docs-next{clear:both;float:left}.docs-next,.docs-prev{margin:10px 0}.arrow-next{float:right;margin-left:10px}.arrow-prev{float:left;margin-right:10px}.function-name-prevnext{width:200px;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.hide{display:none}.collapsible{cursor:pointer}.collapsible .arrow{float:right;margin-right:8px;margin-top:-4px;-webkit-transform:rotate(90deg);transform:rotate(90deg);transition:-webkit-transform .2s linear;transition:transform .2s linear;transition:transform .2s linear, -webkit-transform .2s linear}.collapsible .arrow.rotate{-webkit-transform:rotate(180deg);transform:rotate(180deg)}@media only screen and (max-width:1023px){.docsNavContainer{background:#fff;left:0;position:fixed;width:100%;z-index:100}}@media only screen and (min-width:1024px){.docsNavContainer{flex:0 0 240px;height:calc(100vh - 50px);position:-webkit-sticky;position:sticky;overflow-y:auto;top:50px}}.docsSliderActive.docsNavContainer{box-sizing:border-box;height:100%;-webkit-overflow-scrolling:touch;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;padding-bottom:50px}.docsNavContainer .toc .navBreadcrumb{background-color:#f1f1f1;box-sizing:border-box;display:flex;flex-flow:row nowrap;font-size:12px;height:48px;overflow:hidden;padding:8px 20px}.docsNavContainer .toc .navWrapper{padding:0}@media only screen and (min-width:1024px){.docsNavContainer .toc .navBreadcrumb{display:none}.navBreadcrumb h2{padding:0 10px}.separateOnPageNav .docsNavContainer{flex:0 0 240px}}.navBreadcrumb a,.navBreadcrumb span{border:0;color:#393939}@media only screen and (max-width:735px){.anchor{top:-144px}}@media only screen and (min-width:1024px){.toc{padding:40px 0}}.toc section{padding:0;position:relative}.toc section .navGroups{display:none;padding:48px 20px 60px}.toc .toggleNav{color:#393939;position:relative}.toc .toggleNav .navToggle{cursor:pointer;height:32px;margin-right:10px;position:relative;text-align:left;width:18px}.hamburger-menu{position:absolute;top:6px;width:100%}.line1,.line2,.line3{width:100%;height:3px;background-color:#393939;margin:3px 0;transition:.4s;border-radius:10px}.docsSliderActive .hamburger-menu{top:12px}.docsSliderActive .line1{position:absolute;top:50%;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.docsSliderActive .line2{display:none}.docsSliderActive .line3{position:absolute;top:50%;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.toggleNav h2 i{padding:0 4px}.toc .toggleNav .navGroup{margin-bottom:16px}.toc .toggleNav .subNavGroup{margin-bottom:0}.toc .toggleNav .navGroup .navGroupCategoryTitle{color:#393939;font-size:18px;font-weight:500;line-height:1.2em;margin-bottom:8px;margin-top:0}.toc .toggleNav .navGroup .navGroupSubcategoryTitle{color:#393939;font-size:14px;font-weight:500;line-height:1.5;margin-bottom:0;margin-top:0;padding:4px 0}.toc .toggleNav .navGroup .navListItem{margin:0}.toc .toggleNav .navGroup h3 i:not(:empty){box-sizing:border-box;color:rgba(57,57,57,.5);display:inline-block;height:16px;margin-right:10px;text-align:center;transition:color .2s;width:16px}.toc .toggleNav ul{padding:0 8px}.docsSliderActive .toc .toggleNav ul{padding-left:0}.toc .toggleNav ul li{list-style-type:none;padding:0}.toc .toggleNav ul li a{border:none;color:#717171;display:block;font-size:14px;padding:4px 0;transition:color .3s}.toc .toggleNav ul li.navListItemActive a,.toc .toggleNav ul li a:focus,.toc .toggleNav ul li a:hover{color:#222}.docsSliderActive .toc .navBreadcrumb,.tocActive .navBreadcrumb{border-bottom:1px solid #ccc;margin-bottom:20px;position:fixed;width:100%}.toc .toggleNav .navBreadcrumb h2{border:0;flex-grow:1;font-size:16px;font-weight:600;line-height:32px;margin:0;padding:0}.docsSliderActive .toc section .navGroups{display:block;padding-top:60px}.tocToggler{cursor:pointer;height:32px;line-height:32px;margin-right:-10px;padding:0 10px}.icon-toc{box-sizing:border-box;display:inline-block;line-height:normal;position:relative;top:-1px;vertical-align:middle}.icon-toc,.icon-toc:after,.icon-toc:before{background-color:currentColor;border:1px solid currentColor;border-radius:50%;box-sizing:border-box;height:4px;width:4px}.icon-toc:after,.icon-toc:before{content:"";position:absolute}.icon-toc:before{left:-1px;top:-7px}.icon-toc:after{left:-1px;top:5px}.tocActive .icon-toc{border-radius:0;height:16px;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:3px}.tocActive .icon-toc:before{border-radius:0;height:3px;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:16px}.tocActive .icon-toc:after{content:""}@media only screen and (min-width:1024px){.docMainWrapper{display:flex;flex-flow:row nowrap}.docMainWrapper .wrapper{padding-top:0;padding-left:0;padding-right:0}}.onPageNav{display:none;margin-bottom:40px}.onPageNav::-webkit-scrollbar{width:7px}.onPageNav::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.onPageNav::-webkit-scrollbar-thumb{background:#888;border-radius:10px}.onPageNav::-webkit-scrollbar-thumb:hover{background:#555}.onPageNav a{color:#717171}.onPageNav .toc-headings>li>a.active{font-weight:600}.onPageNav ul{list-style:none}.onPageNav ul li{font-size:12px;line-height:16px;padding-bottom:8px}.onPageNav ul ul{padding:8px 0 0 20px}.onPageNav ul ul li{padding-bottom:5px}@media only screen and (min-width:1024px){.toc section .navGroups{display:block;padding:0;padding-top:8px}.navBreadcrumb h2{padding:0 10px}}@supports ((position: -webkit-sticky) or (position: sticky)){@media only screen and (max-width:1023px){.tocActive .onPageNav{background:#fff;bottom:0;display:block;left:0;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;padding:0 20px;position:fixed;right:0;top:148px;z-index:10;margin-bottom:0}.tocActive .singleRowMobileNav .onPageNav{top:98px}.tocActive .navBreadcrumb h2,.tocActive .navToggle{visibility:hidden}.tocActive .onPageNav>.toc-headings{padding:12px 0}}@media only screen and (min-width:1024px){.separateOnPageNav .headerWrapper.wrapper,.separateOnPageNav .wrapper{max-width:1400px}.separateOnPageNav .toc{width:auto}.separateOnPageNav.sideNavVisible .navPusher .mainContainer{flex:1 auto;max-width:100%;min-width:0}.onPageNav{align-self:flex-start;display:block;flex:0 0 240px;max-height:calc(100vh - 90px);overflow-y:auto;position:-webkit-sticky;position:sticky;top:90px}.onPageNav>.toc-headings{border-left:1px solid #e0e0e0;padding:10px 0 2px 15px}.tocToggler{display:none}}}.blog .wrapper{max-width:1100px}.blogContainer .posts .post{border-bottom:1px solid #e0e0e0;border-radius:3px;margin-bottom:20px;padding-bottom:20px}.blogContainer .postHeader{margin-bottom:10px}.blogContainer .postHeaderTitle{margin-top:0}.blogContainer .postHeader p.post-meta{margin-bottom:10px;padding:0}.blogContainer .postHeader .authorBlock{display:flex}.blogContainer .postHeader .post-authorName{color:rgba(57,57,57,.7);display:flex;flex-direction:column;font-size:14px;font-weight:400;justify-content:center;margin-right:10px;margin-top:0;margin-bottom:0;padding:0}.blogContainer .postHeader .authorPhoto{border-radius:50%;height:30px;overflow:hidden;width:30px}.blogContainer .postHeader .authorPhoto.authorPhotoBig{height:50px;width:50px}.blog-recent{margin:20px 0}.blog-recent>a{float:left}@media only screen and (max-width:735px){.blog-recent{height:40px}}.blogSocialSection{display:block;padding:36px 0}.blogSocialSection .blogSocialSectionItem{padding-bottom:5px}.fb-like{display:block;margin-bottom:20px;width:100%}.more-users{margin:0 auto;max-width:560px;text-align:center}.productShowcaseSection{padding:0 20px;text-align:center}.productShowcaseSection.paddingTop{padding-top:20px}.productShowcaseSection.paddingBottom{padding-bottom:80px}.productShowcaseSection h2{color:#222;font-size:30px;line-height:1em;margin-top:20px;padding:10px 0;text-align:center}.productShowcaseSection p{margin:0 auto;max-width:560px;padding:.8em 0}.productShowcaseSection .logos{align-items:center;display:flex;flex-flow:row wrap;justify-content:center;padding:20px}.productShowcaseSection .logos img{max-height:110px;padding:20px;width:110px}@media only screen and (max-width:735px){.productShowcaseSection .logos img{max-height:64px;padding:20px;width:64px}}.showcaseSection{margin:0 auto;max-width:900px}.showcaseSection,.showcaseSection .prose h1{text-align:center}.showcaseSection .prose{margin:0 auto;max-width:560px;text-align:center}.showcaseSection .logos{align-items:center;display:flex;flex-flow:row wrap;justify-content:center}.showcaseSection .logos img{max-height:128px;padding:20px;width:128px}@media only screen and (max-width:735px){.showcaseSection .logos img{max-height:64px;padding:20px;width:64px}}.nav-footer{background:#20232a;border:none;color:#202020;font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:24px;padding-bottom:2em;padding-top:2em;position:relative}@media only screen and (min-width:1024px){.nav-footer{flex-shrink:0}}.nav-footer .sitemap{display:flex;justify-content:space-between;margin:0 auto 3em;max-width:1080px}.nav-footer .sitemap div{flex:1}.nav-footer .sitemap .nav-home{display:table;height:72px;margin:-12px 20px 0 0;opacity:.4;padding:10px;transition:opacity .15s ease-in-out;width:72px}.nav-footer .sitemap .nav-home:focus,.nav-footer .sitemap .nav-home:hover{opacity:1}@media only screen and (max-width:735px){.nav-footer .sitemap{display:flex;flex-direction:column;margin:0 2em 3em;width:calc(100% - 4em)}.nav-footer .sitemap>div{margin-bottom:18px}}.nav-footer .sitemap a{color:hsla(0,0%,100%,.6);display:block;margin:2px -10px;padding:3px 10px}.nav-footer .sitemap a:focus,.nav-footer .sitemap a:hover,.nav-footer .sitemap h5>a:focus,.nav-footer .sitemap h5>a:hover{color:#fff;text-decoration:none}.nav-footer .sitemap h5,.nav-footer .sitemap h6{margin:0 0 10px}.nav-footer .sitemap h5,.nav-footer .sitemap h5>a,.nav-footer .sitemap h6,.nav-footer .sitemap h6>a{color:#fff}.nav-footer .sitemap h5>a,.nav-footer .sitemap h6>a{margin:0 -10px}.nav-footer .fbOpenSource{display:block;margin:1em auto;opacity:.4;transition:opacity .15s ease-in-out;width:170px}.nav-footer .fbOpenSource:hover{opacity:1}.nav-footer .copyright{color:hsla(0,0%,100%,.4);text-align:center}.nav-footer .social{padding:5px 0}.tabs{border-top:1px solid #cfcfcf}.nav-tabs{display:flex;border-bottom:4px solid #e0e0e0;width:100%;padding:0;overflow-x:auto;white-space:nowrap;max-height:100%}.nav-tabs::-webkit-scrollbar{display:none}.tabs .tab-pane:focus{outline:none}.tabs .nav-tabs>div{font-size:14px;line-height:1.14286;padding:12px 16px;text-decoration:none;display:block;cursor:pointer}.tabs .nav-tabs>div.active{border-bottom:4px solid #222}.tab-pane{display:none}.tab-pane.active{display:block}.tab-pane>pre{white-space:pre-wrap}.tab-pane>pre>code{margin-top:0;border-radius:0;box-shadow:none}.web-player{margin-bottom:1em}.web-player>iframe,.web-player>pre{display:none}.web-player.desktop>iframe,.web-player.mobile>pre{display:block}.token.keyword{color:#1990b8}.token.regex,.token.string{color:#2f9c0a}.token.boolean,.token.number{color:#c92c2c}.token.comment{color:#7d8b99}.props{background-color:#ebf9ff}.compactProps{border-left:2px solid #e0f6ff;margin-left:20px;padding-left:5px}.props>.prop:nth-child(2n){background-color:#e0f6ff}.propTitle{font-weight:700!important;font-size:16px!important}.compactProps .propTitle{font-size:14px;margin-bottom:0;margin-top:0}.compactProps .propTitle div{font-weight:400;margin-left:20px}.methodTitle{font-weight:700!important;font-size:24px!important;color:#025268!important}.compactProps .methodTitle{font-size:14px;margin-bottom:0;margin-top:0}.compactProps .methodTitle div{font-weight:400;margin-left:20px}.prop{word-wrap:break-word;padding:5px 10px}.compactProps .prop{padding:3px 10px}.propType{font-family:source-code-pro,Menlo,Courier New,Consolas,monospace;font-weight:400;font-size:15px;white-space:pre-wrap}.compactProps .propType{font-weight:400;font-size:13px}.methodType{font-weight:400;font-size:24px}.compactProps .methodType{font-weight:400;font-size:13px}.botActions{background-color:#ebf9ff}.botActions>.botAction:nth-child(2n){background-color:#e0f6ff}.botCommand{font-family:source-code-pro,Menlo,Courier New,Consolas,monospace;font-weight:700;color:#025268}.botAction{padding:5px 10px}.botMentionName{font-weight:400}hr{height:1px;margin-bottom:-1px;border:none;border-bottom:1px solid #ececec;margin-top:40px}table{background:#ebf9ff;border:1px solid #b0b0b0;border-collapse:collapse;display:table;margin:20px 0;width:80%}table thead{display:table-header-group}table tbody{display:table-row-group}table tr{display:table-row}table tr:nth-of-type(odd){background:#ebf9ff}table tr:nth-of-type(2n){background:#e0f6ff}table tr td,table tr th{border-right:1px dotted #b0b0b0;display:table-cell;font-size:14px;line-height:1.3em;padding:10px;text-align:left}table tr td:last-of-type,table tr th:last-of-type{border-right:0}table tr td code,table tr th code{display:inline-block;font-size:12px}table tr th{color:#000;font-weight:700;font-family:Helvetica Neue,Arial,sans-serif;text-transform:uppercase}table tr th:first-of-type{width:60%}table tr th:nth-of-type(4){width:80%}footer .sitemap h5>a,footer .sitemap h6,footer .sitemap h6>a{color:#05a5d1}footer.nav-footer{background-color:#012129}footer.nav-footer .nav-home img{height:auto;width:34px}.fixedHeaderContainer header h3{font-size:14px;margin-left:8px;text-decoration:none}.fixedHeaderContainer header h3:hover{opacity:.8}li.navSearchWrapper{font-size:16px}.hero .button{background:linear-gradient(#9a9a9a,#646464);border-radius:4px;padding:8px 16px;font-size:18px;font-weight:300;margin:0 12px;display:inline-block;color:#fafafa;text-shadow:0 1px 3px rgba(0,0,0,.3);box-shadow:1px 3px 3px rgba(0,0,0,.3)}.button:hover,.hero .button{text-decoration:none}.button:active{box-shadow:none}.button.blue{background:linear-gradient(#77a3d2,#4783c2)}@media only screen and (max-device-width:1024px){.hero{padding:10px 0 30px}}.hero{background:#2d2d2d;padding:50px 0;color:#fdf3e7;text-align:center}.hero .text{font-size:300%;text-align:center}.hero .minitext{font-size:24px;text-align:center}@media only screen and (max-width:680px){.hero .text{font-size:200%;text-align:center}.hero .minitext{font-size:18px;text-align:center}}.buttons-unit{margin-top:40px}.buttons-unit a{color:#fff}.buttons-unit .button{background:#05a5d1;color:#fafafa}@media screen and (min-width:600px){.buttons-unit .button{font-size:24px}}.buttons-unit .button:active{background:#0485a9}@media screen and (max-width:373px){.hero .buttons-unit .button{margin-bottom:4px}}body{background-color:#f5fcff}.headerTitle{font-weight:300!important}.mainContainer{background-color:#f5fcff!important}@media only screen and (min-width:1024px){.mainContainer{margin-left:20px}}@media only screen and (min-width:736px){.docsNavContainer{width:240px}}.mainContainer h1,.mainContainer h2,.mainContainer h3,.mainContainer h4,.mainContainer h5,.mainContainer h6{color:#005068!important}a{color:#05a5d1}input#search_input_react{background-color:#2f2f2f}.button{color:#005068;border:1px solid #005068}.button:hover{background:#005068}.hero{box-sizing:border-box}.hero .button{text-transform:none}code{color:#005068!important}.mainContainer .component-grid{max-width:800px}.mainContainer .component{border:1px solid #05a5d1;border-radius:3px;margin:0 auto 10px;width:100%;display:inline-block;background-color:#fff}.mainContainer .component-grid .component h3{font-size:16px;font-weight:400;margin:0;padding:0 10px;background-color:#05a5d1;color:#fff;line-height:40px}.mainContainer .component h3 a{color:#fff}.mainContainer .component p{padding:10px;margin:2px}@supports (display:grid){.mainContainer .component-grid{display:grid;grid-gap:22px}}@media only screen and (min-device-width:768px){.mainContainer .component-grid{width:768px}.mainContainer .component-grid.component-grid-border{border-bottom:1px solid #f1eff0}.mainContainer .component{width:30%;height:150px;margin:0 22px 22px auto;vertical-align:top}@supports (display:grid){.mainContainer .component-grid{grid-template-columns:repeat(3,1fr)}.mainContainer .component{width:auto;height:auto;margin:0}}}.wrapper{max-width:1200px}.container{max-width:900px}.container .wrapper h2{font-size:31px}.container .wrapper .hljs{margin:14px 0}.pageContainer .container{margin:40px auto}.big-button,li,p{font-size:18px}.big-button{text-align:center;background:#05a5d1;border-radius:4px;padding:12px 16px;font-weight:300;margin:0 12px;display:inline-block;color:#fafafa;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,.3);box-shadow:1px 3px 3px rgba(0,0,0,.3);transition:background .3s,color .3s,-webkit-transform .3s;transition:background .3s,color .3s,transform .3s;transition:background .3s,color .3s,transform .3s,-webkit-transform .3s}.big-button:hover{background:#047598;color:#fff;-webkit-transform:scale(1.05);transform:scale(1.05)}.big-button a{color:#fff}.big-button:active{background:#0485a9}@media screen and (min-width:600px){.big-button{font-size:24px}}@media screen and (max-width:373px){.big-button{margin-bottom:4px}}.prose h1{padding:0}.prose{max-width:800px}.hljs{line-height:20px;background-color:rgba(5,165,209,.05)}.hljs+.hljs{margin-top:10px}table.versions{width:60%;border:0;border-collapse:separate}table.versions tr th{width:20%}table.versions td,table.versions th{padding:2px 5px}table.versions tr td,table.versions tr th{border:0;width:33%;padding:5px}table.versions tr:nth-of-type(odd){background:#e0f6ff}table.versions tr:nth-of-type(2n){background:#ebf9ff}article iframe{max-width:120%}.codepen{width:1000px;padding:20px 0;margin-left:-100px}@media only screen and (min-device-width:320px) and (max-device-width:480px){.codepen{width:100%;margin-left:auto}article iframe{max-width:100%}}.showcaseSection .inner-content{width:800px}@media only screen and (max-device-width:840px){.showcaseSection .inner-content{width:100%}}.home-showcase-section{max-width:800px;margin:20px auto;text-align:center;padding-bottom:40px}.home-showcase-section p{max-width:560px;margin:0 auto}.footnote{font-size:12px;color:rgba(0,0,0,.4)}.home-showcase-section h2{font-size:31px;line-height:40px;margin:10px 0}.home-showcase-section .showcase img{width:100px;height:100px;border-radius:20px}.showcaseHeader{padding-bottom:15px;padding-top:15px;text-align:center}.showcase{margin:30px auto;width:100%;display:inline-block;text-align:center;vertical-align:top}@media only screen and (min-width:600px){.showcase{width:50%}}@media only screen and (min-width:960px){.showcase{width:25%}}.showcase h3{margin-bottom:0;line-height:20px;padding-left:5px;padding-right:5px;padding-bottom:0!important;font-size:16px}.showcase p{margin-top:5px;padding-top:0!important}.showcase h3,.showcase p{color:#484848}@media only screen and (min-device-width:736px){.showcaseSection .showcase img{width:100px;max-height:100px}}.showcaseSection .showcase img{height:100px;border-radius:20px}.showcaseSection .logos img{padding:0}.pinned img{width:150px;border-radius:20px}.toggler{margin-bottom:1em}.toggler li{display:inline-block;position:relative;top:1px;padding:10px!important;margin:0 2px!important;border:1px solid #05a5d1;border-bottom-color:transparent;border-radius:3px 3px 0 0;background-color:transparent;font-size:.99em;cursor:pointer}.toggler li:first-child{margin-left:0!important}.toggler li:last-child{margin-right:0!important}.toggler ul{width:100%;display:inline-block;list-style-type:none;padding:0!important;margin:0!important;border-bottom:1px solid #05a5d1;cursor:default}@media screen and (max-width:960px){.toggler li,.toggler li:first-child,.toggler li:last-child{display:block;border-bottom-color:#05a5d1;border-radius:3px;margin:2px 0}.toggler ul{border-bottom:0}}.toggler a{display:inline-block;padding:10px 5px;margin:2px;border:1px solid #05a5d1;border-radius:3px;text-decoration:none!important;color:#05a5d1}
\ No newline at end of file
+a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}body{color:#24292e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:16px;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;word-wrap:break-word}*{box-sizing:border-box}b,strong{font-weight:600}em,i{font-style:italic}[type=checkbox]{box-sizing:border-box;padding:0}a,a:hover{color:#222;text-decoration:none}a:active,a:hover{outline-width:0}a:not([href]){color:inherit;text-decoration:none}p{margin-bottom:1em;margin-top:0}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:600;line-height:1.25;margin-bottom:16px;margin-top:1.5em}h1{font-size:32px}h2{font-size:24px}h3{font-size:20px}h4{font-size:16px}h5{font-size:14px}h6{font-size:13.6px}ol,ul{margin-bottom:1em;margin-top:0;padding-left:2em}ol ol,ul ol{list-style-type:lower-roman}ol ol,ol ul,ul ol,ul ul{margin-bottom:0;margin-top:0}ol ol ol,ol ul ol,ul ol ol,ul ul ol{list-style-type:lower-alpha}li{word-wrap:break-all}li>p{margin-top:1em}li+li{margin-top:.25em}img{border-style:none;box-sizing:content-box;max-width:100%}img[align=right]{padding-left:1.25em}img[align=left]{padding-right:1.25em}table{border-spacing:0;display:block;margin-bottom:16px;margin-top:0;overflow:auto;width:100%}table tr{background-color:transparent;border-top:1px solid #dfe2e5}table tr:nth-child(2n){background-color:#f6f8fa}table td,table th{border:1px solid #dfe2e5;padding:6px 13px}table th{background-color:inherit;font-weight:600}table td,table th{color:inherit}blockquote{color:#6a737d;font-size:16px;margin:0 0 16px;padding:0 1em}blockquote>:first-child{margin-top:0}blockquote>:last-child{margin-bottom:0}code{background-color:rgba(27,31,35,.05);border-radius:3px;color:inherit;font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:85%;margin:0;padding:3.2px 6.4px}pre{margin-bottom:16px}pre code{background-color:transparent;border:0;display:inline;font-size:85%;line-height:inherit;margin:0;max-width:auto;overflow:visible;padding:0;white-space:pre;word-break:normal;word-wrap:normal}kbd{background-color:#fafbfc;border:1px solid #d1d5da;border-bottom-color:#c6cbd1;border-radius:3px;box-shadow:inset 0 -1px 0 #c6cbd1;color:#444d56;display:inline-block;font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:68.75%;line-height:10px;padding:3px 5px;vertical-align:middle}hr{border:1px solid #dfe2e5;box-sizing:content-box;margin:1.5em 0;overflow:hidden;padding:0}hr:after,hr:before{content:"";display:table}hr:after{clear:both}body{background-color:#fff;min-height:100vh;text-rendering:optimizeLegibility}@media only screen and (min-width:736px){body{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}}article:after,article:before{content:"";display:table}article:after{clear:both}article>:first-child{margin-top:0}article>:last-child{margin-bottom:0}article iframe,article p img{display:block;margin-left:auto;margin-right:auto;max-width:100%}.anchor{display:block;position:relative;top:-80px}.hash-link{line-height:1;margin-left:-20px;opacity:0;padding-right:4px;-webkit-transition:opacity .3s;transition:opacity .3s}.hash-link:hover{opacity:1!important;-webkit-transition:none;transition:none}.hash-link .hash-link-icon{vertical-align:middle}.button{border:1px solid #222;border-radius:3px;color:#222;display:inline-block;font-size:14px;font-weight:400;line-height:1.2em;padding:10px;text-decoration:none!important;text-transform:uppercase;-webkit-transition:background .3s,color .3s;transition:background .3s,color .3s}.button:hover{background:#222;color:#fff}h1:hover .hash-link,h2:hover .hash-link,h3:hover .hash-link,h4:hover .hash-link{opacity:.5;-webkit-transition:none;transition:none}blockquote{background-color:rgba(255,229,100,.3);border-left:8px solid #ffe564;padding:15px 30px 15px 15px}.wrapper{margin:0 auto;max-width:1100px;padding:0 20px}.wrapper blockquote>p:first-child{padding-top:0}.center{display:block}.center,.homeContainer{text-align:center}.homeContainer .homeWrapper{padding:2em 10px}.homeContainer .homeWrapper .wrapper{margin:0 auto;max-width:900px;padding:0 20px}.homeContainer .homeWrapper .projectLogo img{height:100px;margin-bottom:0}.homeContainer .homeWrapper #project_title{font-size:300%;letter-spacing:-.08em;line-height:1em;margin-bottom:80px}.homeContainer .homeWrapper #project_tagline{font-size:200%;letter-spacing:-.04em;line-height:1em}.projectLogo{display:none;pointer-events:none}.projectLogo img{height:100px;margin-bottom:0}.projectIntro{margin:40px 0}.projectTitle{color:#222;font-size:250%;line-height:1em}.projectTitle>small{display:block;font-weight:400;font-size:50%;line-height:1em;margin:.7em 0 1.3em}@media only screen and (min-width:480px){.projectTitle{font-size:300%;margin:.3em 0}.projectLogo img{height:200px;margin-bottom:10px}.homeContainer .homeWrapper{padding-left:10px;padding-right:10px}}@media only screen and (min-width:736px){.homeContainer .homeWrapper{position:relative}.homeContainer .homeWrapper #inner{max-width:600px;padding-right:40px}}@media only screen and (min-width:1200px){.homeContainer .homeWrapper #inner{max-width:750px}.homeContainer .homeWrapper .projectLogo{-webkit-box-align:center;align-items:center;bottom:0;display:-webkit-box;display:flex;-webkit-box-pack:end;justify-content:flex-end;left:0;padding:2em 100px 4em;position:absolute;right:0;top:0}.homeContainer .homeWrapper .projectLogo img{height:100%;max-height:250px}}@media only screen and (min-width:1500px){.homeContainer .homeWrapper #inner{max-width:1100px;padding-bottom:40px;padding-top:40px}.wrapper{max-width:1400px}}.mainContainer{-webkit-box-flex:1;flex:1 1 auto;max-width:100%;padding:40px 0}.mainContainer .wrapper{text-align:left}.mainContainer .wrapper .allShareBlock{padding:10px 0}.mainContainer .wrapper .allShareBlock .pluginBlock{margin:12px 0;padding:0}.mainContainer .wrapper .post{position:relative}.mainContainer .wrapper .post.basicPost{margin-top:30px}.mainContainer .wrapper .post .postHeader{margin-bottom:16px}.mainContainer .wrapper .post .postHeaderTitle{margin-top:0;padding:0}.mainContainer .wrapper .post .postSocialPlugins{padding-top:1em}.mainContainer .wrapper .post .docPagination{background:#222;bottom:0;left:0;position:absolute;right:0}.mainContainer .wrapper .post .docPagination .pager{display:inline-block;width:50%}.mainContainer .wrapper .post .docPagination .pagingNext{float:right;text-align:right}.mainContainer .wrapper .post .docPagination a{border:none;color:#fff;display:block;padding:4px 12px}.mainContainer .wrapper .post .docPagination a:hover{background-color:#f9f9f9;color:#393939}.mainContainer .wrapper .post .docPagination a .pagerLabel{display:inline}.mainContainer .wrapper .post .docPagination a .pagerTitle{display:none}@media only screen and (min-width:480px){.mainContainer .wrapper .post .docPagination a .pagerLabel{display:none}.mainContainer .wrapper .post .docPagination a .pagerTitle{display:inline}}@media only screen and (min-width:1024px){.mainContainer .wrapper .post{display:block}.mainContainer .wrapper .posts .post{width:100%}}.fixedHeaderContainer{background:#222;color:#fff;min-height:50px;padding:8px 0;position:fixed;width:100%;z-index:9999;-webkit-transform:translateZ(0);transform:translateZ(0)}@media only screen and (min-width:1024px){.fixedHeaderContainer{flex-shrink:0}}.fixedHeaderContainer a{-webkit-box-align:center;align-items:center;border:0;color:#fff;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;height:34px;z-index:10000}.fixedHeaderContainer header{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;position:relative;text-align:left}.fixedHeaderContainer header img{height:100%;margin-right:10px}.fixedHeaderContainer header .headerTitle{font-size:1.25em;margin:0}.fixedHeaderContainer header .headerTitleWithLogo{display:block;font-size:1.25em;line-height:18px;margin:0;position:relative;z-index:9999}.fixedHeaderContainer header h3{color:#fff;font-size:16px;margin:0 0 0 10px;text-decoration:underline}@media (max-width:480px){.headerTitle{font-size:17px}.headerTitleWithLogo{display:none!important}}.promoSection{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column wrap;font-size:125%;line-height:1.6em;position:relative;z-index:99}.promoSection .promoRow{padding:10px 0}.promoSection .promoRow .pluginWrapper{display:block}.promoSection .promoRow .pluginWrapper.ghStarWrapper,.promoSection .promoRow .pluginWrapper.ghWatchWrapper{height:28px}.promoSection .promoRow .pluginRowBlock{display:-webkit-box;display:flex;flex-wrap:wrap;-webkit-box-pack:center;justify-content:center;margin:0 -2px}.promoSection .promoRow .pluginRowBlock .pluginWrapper{padding:0 2px}.promoSection .promoRow .pluginRowBlock iframe{margin-left:2px;margin-top:5px}input[type=search]{-moz-appearance:none;-webkit-appearance:none}.navSearchWrapper{-webkit-box-align:center;align-items:center;align-self:center;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;padding-left:10px;position:absolute;right:10px;top:15px}.navSearchWrapper:before{border:3px solid #e5e5e5;border-radius:50%;content:" ";display:block;height:6px;left:15px;position:absolute;top:50%;-webkit-transform:translateY(-58%);transform:translateY(-58%);width:6px;z-index:1}.navSearchWrapper:after{background:#e5e5e5;content:" ";height:7px;left:24px;position:absolute;top:55%;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);width:3px;z-index:1}.navSearchWrapper .aa-dropdown-menu{background:#f9f9f9;border:3px solid rgba(57,57,57,.25);color:#393939;font-size:14px;left:auto!important;line-height:1.2em;right:0!important}.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--category-header{background:#222;color:#fff;font-size:14px;font-weight:400}.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight{background-color:#222;color:#fff}.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--subcategory-column .algolia-docsearch-suggestion--highlight,.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--title .algolia-docsearch-suggestion--highlight{color:#222}.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--subcategory-column,.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion__secondary{border-color:rgba(57,57,57,.3)}input#search_input_react{background-color:rgba(0,0,0,.2);border:none;border-radius:20px;color:#fff;font-size:14px;font-weight:300;line-height:20px;outline:none;padding-left:25px;position:relative;-webkit-transition:width .5s ease;transition:width .5s ease;width:170px}.navSearchWrapper:before{left:24px}.navSearchWrapper:after{left:35px}input#search_input_react:active,input#search_input_react:focus{color:#fff;width:220px}.navigationSlider .slidingNav .navSearchWrapper .algolia-docsearch-footer a{height:auto}@media only screen and (max-width:735px){.navSearchWrapper{width:40%}}input::-webkit-input-placeholder{color:#e5e5e5}input::-moz-placeholder{color:#e5e5e5}input:-ms-input-placeholder{color:#e5e5e5}input::-ms-input-placeholder{color:#e5e5e5}input::placeholder{color:#e5e5e5}.hljs{padding:1.25rem 1.5rem}.gridBlock{padding:0}.gridBlock>*{box-sizing:border-box}.gridBlock .fourByGridBlock img,.gridBlock .threeByGridBlock img,.gridBlock .twoByGridBlock img{max-width:100%}.gridBlock .gridClear{clear:both}@media only screen and (max-width:735px){.gridBlock .fourByGridBlock{-webkit-box-flex:1;flex:1 0 26%}}@media only screen and (min-width:736px){.gridBlock{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;flex-wrap:wrap}.gridBlock>*{margin:0 12px}.gridBlock>:first-child{margin-left:0}.gridBlock>:last-child{margin-right:0}.gridBlock .twoByGridBlock{-webkit-box-flex:1;flex:1 0 40%}.gridBlock .threeByGridBlock{-webkit-box-flex:1;flex:1 0 26%}.gridBlock .fourByGridBlock{-webkit-box-flex:1;flex:1 0 20%}h2+.gridBlock{padding-top:20px}}@media only screen and (min-width:1400px){.gridBlock{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;flex-wrap:wrap}}.alignCenter{text-align:center}.alignRight{text-align:right}.imageAlignSide{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap}.blockImage{max-width:730px}.imageAlignSide .blockImage{-webkit-box-flex:0;flex:0 1 500px;max-width:500px}@media only screen and (max-width:735px){.imageAlignSide .blockImage{display:none}}.imageAlignSide .blockContent{-webkit-box-flex:1;flex:1 1}.imageAlignBottom .blockImage{margin:0 auto 20px;max-width:730px}.imageAlignBottom.alignCenter .blockImage{margin-left:auto;margin-right:auto}.imageAlignTop .blockImage{margin-bottom:20px;max-width:80px}.imageAlignTop.alignCenter .blockImage{margin-left:auto;margin-right:auto}.imageAlignRight .blockImage{margin-left:40px}.imageAlignLeft .blockImage{margin-right:40px}.container .gridBlock .blockContent p{padding:0}.container .wrapper .alignCenter h2{text-align:center}.container .wrapper .imageAlignSide h2{text-align:left}.container .wrapper .imageAlignSide p{margin:0 0 40px;max-width:560px}.highlightBackground{background:rgba(153,66,79,.7);color:#fff}.highlightBackground a{font-weight:800}.container.highlightBackground .wrapper h1,.container.highlightBackground .wrapper h2,.container.highlightBackground .wrapper h3,.container.highlightBackground .wrapper h4,.container.highlightBackground .wrapper h5,.highlightBackground a{border-color:#fff;color:#fff}.lightBackground{background:#f7f7f7}.darkBackground{background:grey;color:#fff}.darkBackground a,.darkBackground code{color:#d6b3b8}.container.darkBackground .wrapper h1,.container.darkBackground .wrapper h2,.container.darkBackground .wrapper h3,.container.darkBackground .wrapper h4,.container.darkBackground .wrapper h5{border-color:#fff;color:#fff}.container.paddingAll{padding:40px}.container.paddingBottom{padding-bottom:80px}.container.paddingLeft{padding-left:40px}.container.paddingRight{padding-right:40px}.container.paddingTop{padding-top:80px}@media only screen and (max-width:735px){.container.paddingBottom{padding-bottom:40px}.container.paddingTop{padding-top:20px}}@media only screen and (max-width:1023px){.responsiveList .blockContent{position:relative}.responsiveList .blockContent>div{padding-left:20px}.responsiveList .blockContent:before{content:"\2022";position:absolute}}.navigationSlider .navSlideout{cursor:pointer;padding-top:4px;position:absolute;right:10px;top:0;-webkit-transition:top .3s;transition:top .3s;z-index:101}.navigationSlider .slidingNav{bottom:auto;box-sizing:border-box;left:0;position:fixed;right:0;top:0}.navigationSlider .slidingNav.slidingNavActive{height:auto;padding-top:42px;width:300px}.navigationSlider .slidingNav ul{background:#05a5d1;box-sizing:border-box;color:#fff;display:-webkit-box;display:flex;flex-wrap:nowrap;list-style:none;margin-top:50px;padding:0;width:100%}.navigationSlider .slidingNav.slidingNavActive ul{display:block}.navigationSlider .slidingNav ul li{-webkit-box-flex:1;flex:1 1 auto;margin:0;text-align:center;white-space:nowrap}.navigationSlider .slidingNav ul li a{-webkit-box-align:center;align-items:center;box-sizing:border-box;color:#222;color:inherit;display:-webkit-box;display:flex;font-size:.9em;height:auto;height:50px;-webkit-box-pack:center;justify-content:center;margin:0;padding:10px;-webkit-transition:background-color .3s;transition:background-color .3s}.navigationSlider .slidingNav ul li.siteNavGroupActive>a,.navigationSlider .slidingNav ul li.siteNavItemActive>a,.navigationSlider .slidingNav ul li>a:focus,.navigationSlider .slidingNav ul li>a:hover{background-color:#222}.languages-icon{width:20px}#languages-dropdown{pointer-events:none;position:absolute;width:100%}#languages-dropdown.visible{display:-webkit-box;display:flex}#languages-dropdown.hide{display:none}#languages-dropdown-items{background-color:#222;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;min-width:120px;pointer-events:all}#languages li{display:block}.navPusher{left:0;min-height:100%;padding-top:100px;position:relative;z-index:99}.singleRowMobileNav.navPusher{padding-top:50px}.navPusher:after{background:rgba(0,0,0,.4);content:"";height:0;opacity:0;position:absolute;right:0;top:0;-webkit-transition:opacity .5s,width .1s .5s,height .1s .5s;transition:opacity .5s,width .1s .5s,height .1s .5s;width:0}@media screen and (min-width:1024px){.navPusher{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;min-height:calc(100vh - 50px);padding-top:50px}.navPusher,.navPusher>:first-child{-webkit-box-flex:1;flex-grow:1}}.sliderActive .navPusher:after{height:100%;opacity:1;-webkit-transition:opacity .5s;transition:opacity .5s;width:100%;z-index:100}@media only screen and (max-width:1024px){.reactNavSearchWrapper input#search_input_react{background-color:rgba(242,196,178,.25);border:none;border-radius:20px;box-sizing:border-box;color:#393939;font-size:14px;line-height:20px;outline:none;padding-left:38px;position:relative;-webkit-transition:background-color .2s cubic-bezier(.68,-.55,.265,1.55),width .2s cubic-bezier(.68,-.55,.265,1.55),color .2s ease;transition:background-color .2s cubic-bezier(.68,-.55,.265,1.55),width .2s cubic-bezier(.68,-.55,.265,1.55),color .2s ease;width:100%}.reactNavSearchWrapper input#search_input_react:active,.reactNavSearchWrapper input#search_input_react:focus{background-color:#222;color:#fff}.reactNavSearchWrapper .algolia-docsearch-suggestion--subcategory-inline{display:none}.reactNavSearchWrapper>span{width:100%}.reactNavSearchWrapper .aa-dropdown-menu{font-size:12px;line-height:2em;padding:0;border-width:1px;min-width:500px}.reactNavSearchWrapper .algolia-docsearch-suggestion__secondary{border-top:none}.aa-suggestions{min-height:140px;max-height:60vh;-webkit-overflow-scrolling:touch;overflow-y:scroll}#languages-dropdown{left:0;top:50px}#languages-dropdown-items{background-color:#222;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}}@media only screen and (min-width:1024px){.navSearchWrapper{padding-left:10px;position:relative;right:auto;top:auto}.reactNavSearchWrapper input#search_input_react{height:100%;padding-top:8px;padding-bottom:8px;padding-left:38px}.navSearchWrapper .algolia-autocomplete{display:block}.navigationSlider{height:34px;margin-left:auto;position:relative}.navigationSlider .navSlideout{display:none}.navigationSlider nav.slidingNav{background:none;height:auto;position:relative;right:auto;top:auto;width:auto}.navigationSlider .slidingNav ul{background:none;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;margin:0;padding:0;width:auto}.navigationSlider .slidingNav ul li a{border:0;color:hsla(0,0%,100%,.8);display:-webkit-box;display:flex;font-size:16px;font-size:1em;font-weight:300;height:32px;line-height:1.2em;margin:0;padding:6px 10px}.navigationSlider .slidingNav ul li.siteNavGroupActive a,.navigationSlider .slidingNav ul li.siteNavItemActive a,.navigationSlider .slidingNav ul li a:hover{color:#fff}}@media only screen and (max-width:735px){.navigationSlider .slidingNav ul{overflow-x:auto}.navigationSlider .slidingNav ul::-webkit-scrollbar{display:none}.reactNavSearchWrapper .aa-dropdown-menu{min-width:400px}}@media only screen and (max-width:475px){.reactNavSearchWrapper .aa-dropdown-menu{min-width:300px}}.docMainWrapper .wrapper{padding-left:0;padding-right:0;padding-top:10px}@media only screen and (min-width:1024px){.docMainWrapper{width:100%}.docMainWrapper>*{margin:0 24px}.docMainWrapper>:first-child{margin-left:0}.docMainWrapper>:last-child{margin-right:0}.docMainWrapper .mainContainer{min-width:0}}.edit-page-link{float:right;font-size:10px;font-weight:400;margin-top:3px;text-decoration:none}@media only screen and (max-width:1023px){.edit-page-link{display:none}}.docLastUpdate{font-size:13px;font-style:italic;margin:20px 0;text-align:right}.docs-prevnext{margin:20px 0}.docs-prevnext:after{clear:both;content:" ";display:table}.docs-next{float:right}.docs-prev{float:left}@media only screen and (max-width:735px){.docs-next{clear:both;float:left}.docs-next,.docs-prev{margin:10px 0}.arrow-next{float:right;margin-left:10px}.arrow-prev{float:left;margin-right:10px}.function-name-prevnext{width:200px;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.hide{display:none}.collapsible{cursor:pointer}.collapsible .arrow{float:right;margin-right:8px;margin-top:-4px;-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-transition:-webkit-transform .2s linear;transition:-webkit-transform .2s linear;transition:transform .2s linear;transition:transform .2s linear, -webkit-transform .2s linear}.collapsible .arrow.rotate{-webkit-transform:rotate(180deg);transform:rotate(180deg)}@media only screen and (max-width:1023px){.docsNavContainer{background:#fff;left:0;position:fixed;width:100%;z-index:100}}@media only screen and (min-width:1024px){.docsNavContainer{-webkit-box-flex:0;flex:0 0 240px;height:calc(100vh - 50px);position:-webkit-sticky;position:sticky;overflow-y:auto;top:50px}}.docsSliderActive.docsNavContainer{box-sizing:border-box;height:100%;-webkit-overflow-scrolling:touch;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;padding-bottom:50px}.docsNavContainer .toc .navBreadcrumb{background-color:#f1f1f1;box-sizing:border-box;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;font-size:12px;height:48px;overflow:hidden;padding:8px 20px}.docsNavContainer .toc .navWrapper{padding:0}@media only screen and (min-width:1024px){.docsNavContainer .toc .navBreadcrumb{display:none}.navBreadcrumb h2{padding:0 10px}.separateOnPageNav .docsNavContainer{-webkit-box-flex:0;flex:0 0 240px}}.navBreadcrumb a,.navBreadcrumb span{border:0;color:#393939}@media only screen and (max-width:735px){.anchor{top:-144px}}@media only screen and (min-width:1024px){.toc{padding:40px 0}}.toc section{padding:0;position:relative}.toc section .navGroups{display:none;padding:48px 20px 60px}.toc .toggleNav{color:#393939;position:relative}.toc .toggleNav .navToggle{cursor:pointer;height:32px;margin-right:10px;position:relative;text-align:left;width:18px}.hamburger-menu{position:absolute;top:6px;width:100%}.line1,.line2,.line3{width:100%;height:3px;background-color:#393939;margin:3px 0;-webkit-transition:.4s;transition:.4s;border-radius:10px}.docsSliderActive .hamburger-menu{top:12px}.docsSliderActive .line1{position:absolute;top:50%;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.docsSliderActive .line2{display:none}.docsSliderActive .line3{position:absolute;top:50%;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.toggleNav h2 i{padding:0 4px}.toc .toggleNav .navGroup{margin-bottom:16px}.toc .toggleNav .subNavGroup{margin-bottom:0}.toc .toggleNav .navGroup .navGroupCategoryTitle{color:#393939;font-size:18px;font-weight:500;line-height:1.2em;margin-bottom:8px;margin-top:0}.toc .toggleNav .navGroup .navGroupSubcategoryTitle{color:#393939;font-size:14px;font-weight:500;line-height:1.5;margin-bottom:0;margin-top:0;padding:4px 0}.toc .toggleNav .navGroup .navListItem{margin:0}.toc .toggleNav .navGroup h3 i:not(:empty){box-sizing:border-box;color:rgba(57,57,57,.5);display:inline-block;height:16px;margin-right:10px;text-align:center;-webkit-transition:color .2s;transition:color .2s;width:16px}.toc .toggleNav ul{padding:0 8px}.docsSliderActive .toc .toggleNav ul{padding-left:0}.toc .toggleNav ul li{list-style-type:none;padding:0}.toc .toggleNav ul li a{border:none;color:#717171;display:block;font-size:14px;padding:4px 0;-webkit-transition:color .3s;transition:color .3s}.toc .toggleNav ul li.navListItemActive a,.toc .toggleNav ul li a:focus,.toc .toggleNav ul li a:hover{color:#222}.docsSliderActive .toc .navBreadcrumb,.tocActive .navBreadcrumb{border-bottom:1px solid #ccc;margin-bottom:20px;position:fixed;width:100%}.toc .toggleNav .navBreadcrumb h2{border:0;-webkit-box-flex:1;flex-grow:1;font-size:16px;font-weight:600;line-height:32px;margin:0;padding:0}.docsSliderActive .toc section .navGroups{display:block;padding-top:60px}.tocToggler{cursor:pointer;height:32px;line-height:32px;margin-right:-10px;padding:0 10px}.icon-toc{box-sizing:border-box;display:inline-block;line-height:normal;position:relative;top:-1px;vertical-align:middle}.icon-toc,.icon-toc:after,.icon-toc:before{background-color:currentColor;border:1px solid;border-radius:50%;box-sizing:border-box;height:4px;width:4px}.icon-toc:after,.icon-toc:before{content:"";position:absolute}.icon-toc:before{left:-1px;top:-7px}.icon-toc:after{left:-1px;top:5px}.tocActive .icon-toc{border-radius:0;height:16px;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:3px}.tocActive .icon-toc:before{border-radius:0;height:3px;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:16px}.tocActive .icon-toc:after{content:""}@media only screen and (min-width:1024px){.docMainWrapper{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap}.docMainWrapper .wrapper{padding-top:0;padding-left:0;padding-right:0}}.onPageNav{display:none;margin-bottom:40px}.onPageNav::-webkit-scrollbar{width:7px}.onPageNav::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.onPageNav::-webkit-scrollbar-thumb{background:#888;border-radius:10px}.onPageNav::-webkit-scrollbar-thumb:hover{background:#555}.onPageNav a{color:#717171}.onPageNav .toc-headings>li>a.active{font-weight:600}.onPageNav ul{list-style:none}.onPageNav ul li{font-size:12px;line-height:16px;padding-bottom:8px}.onPageNav ul ul{padding:8px 0 0 20px}.onPageNav ul ul li{padding-bottom:5px}@media only screen and (min-width:1024px){.toc section .navGroups{display:block;padding:8px 0 0}.navBreadcrumb h2{padding:0 10px}}@supports ((position: -webkit-sticky) or (position: sticky)){@media only screen and (max-width:1023px){.tocActive .onPageNav{background:#fff;bottom:0;display:block;left:0;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;padding:0 20px;position:fixed;right:0;top:148px;z-index:10;margin-bottom:0}.tocActive .singleRowMobileNav .onPageNav{top:98px}.tocActive .navBreadcrumb h2,.tocActive .navToggle{visibility:hidden}.tocActive .onPageNav>.toc-headings{padding:12px 0}}@media only screen and (min-width:1024px){.separateOnPageNav .headerWrapper.wrapper,.separateOnPageNav .wrapper{max-width:1400px}.separateOnPageNav .toc{width:auto}.separateOnPageNav.sideNavVisible .navPusher .mainContainer{-webkit-box-flex:1;flex:1 auto;max-width:100%;min-width:0}.onPageNav{align-self:flex-start;display:block;-webkit-box-flex:0;flex:0 0 240px;max-height:calc(100vh - 90px);overflow-y:auto;position:-webkit-sticky;position:sticky;top:90px}.onPageNav>.toc-headings{border-left:1px solid #e0e0e0;padding:10px 0 2px 15px}.tocToggler{display:none}}}.blog .wrapper{max-width:1100px}.blogContainer .posts .post{border-bottom:1px solid #e0e0e0;border-radius:3px;margin-bottom:20px;padding-bottom:20px}.blogContainer .postHeader{margin-bottom:10px}.blogContainer .postHeaderTitle{margin-top:0}.blogContainer .postHeader p.post-meta{margin-bottom:10px;padding:0}.blogContainer .postHeader .authorBlock{display:-webkit-box;display:flex}.blogContainer .postHeader .post-authorName{color:rgba(57,57,57,.7);display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;font-size:14px;font-weight:400;-webkit-box-pack:center;justify-content:center;margin-right:10px;margin-top:0;margin-bottom:0;padding:0}.blogContainer .postHeader .authorPhoto{border-radius:50%;height:30px;overflow:hidden;width:30px}.blogContainer .postHeader .authorPhoto.authorPhotoBig{height:50px;width:50px}.blog-recent{margin:20px 0}.blog-recent>a{float:left}@media only screen and (max-width:735px){.blog-recent{height:40px}}.blogSocialSection{display:block;padding:36px 0}.blogSocialSection .blogSocialSectionItem{padding-bottom:5px}.fb-like{display:block;margin-bottom:20px;width:100%}.more-users{margin:0 auto;max-width:560px;text-align:center}.productShowcaseSection{padding:0 20px;text-align:center}.productShowcaseSection.paddingTop{padding-top:20px}.productShowcaseSection.paddingBottom{padding-bottom:80px}.productShowcaseSection h2{color:#222;font-size:30px;line-height:1em;margin-top:20px;padding:10px 0;text-align:center}.productShowcaseSection p{margin:0 auto;max-width:560px;padding:.8em 0}.productShowcaseSection .logos{-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap;-webkit-box-pack:center;justify-content:center;padding:20px}.productShowcaseSection .logos img{max-height:110px;padding:20px;width:110px}@media only screen and (max-width:735px){.productShowcaseSection .logos img{max-height:64px;padding:20px;width:64px}}.showcaseSection{margin:0 auto;max-width:900px}.showcaseSection,.showcaseSection .prose h1{text-align:center}.showcaseSection .prose{margin:0 auto;max-width:560px;text-align:center}.showcaseSection .logos{-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap;-webkit-box-pack:center;justify-content:center}.showcaseSection .logos img{max-height:128px;padding:20px;width:128px}@media only screen and (max-width:735px){.showcaseSection .logos img{max-height:64px;padding:20px;width:64px}}.nav-footer{background:#20232a;border:none;color:#202020;font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:24px;padding-bottom:2em;padding-top:2em;position:relative}@media only screen and (min-width:1024px){.nav-footer{flex-shrink:0}}.nav-footer .sitemap{display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;margin:0 auto 3em;max-width:1080px}.nav-footer .sitemap div{-webkit-box-flex:1;flex:1}.nav-footer .sitemap .nav-home{display:table;height:72px;margin:-12px 20px 0 0;opacity:.4;padding:10px;-webkit-transition:opacity .15s ease-in-out;transition:opacity .15s ease-in-out;width:72px}.nav-footer .sitemap .nav-home:focus,.nav-footer .sitemap .nav-home:hover{opacity:1}@media only screen and (max-width:735px){.nav-footer .sitemap{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;margin:0 2em 3em;width:calc(100% - 4em)}.nav-footer .sitemap>div{margin-bottom:18px}}.nav-footer .sitemap a{color:hsla(0,0%,100%,.6);display:block;margin:2px -10px;padding:3px 10px}.nav-footer .sitemap a:focus,.nav-footer .sitemap a:hover,.nav-footer .sitemap h5>a:focus,.nav-footer .sitemap h5>a:hover{color:#fff;text-decoration:none}.nav-footer .sitemap h5,.nav-footer .sitemap h6{margin:0 0 10px}.nav-footer .sitemap h5,.nav-footer .sitemap h5>a,.nav-footer .sitemap h6,.nav-footer .sitemap h6>a{color:#fff}.nav-footer .sitemap h5>a,.nav-footer .sitemap h6>a{margin:0 -10px}.nav-footer .fbOpenSource{display:block;margin:1em auto;opacity:.4;-webkit-transition:opacity .15s ease-in-out;transition:opacity .15s ease-in-out;width:170px}.nav-footer .fbOpenSource:hover{opacity:1}.nav-footer .copyright{color:hsla(0,0%,100%,.4);text-align:center}.nav-footer .social{padding:5px 0}.tabs{border-top:1px solid #cfcfcf}.nav-tabs{display:-webkit-box;display:flex;border-bottom:4px solid #e0e0e0;width:100%;padding:0;overflow-x:auto;white-space:nowrap;max-height:100%}.nav-tabs::-webkit-scrollbar{display:none}.tabs .tab-pane:focus{outline:none}.tabs .nav-tabs>div{font-size:14px;line-height:1.14286;padding:12px 16px;text-decoration:none;display:block;cursor:pointer}.tabs .nav-tabs>div.active{border-bottom:4px solid #222}.tab-pane{display:none}.tab-pane.active{display:block}.tab-pane>pre{white-space:pre-wrap}.tab-pane>pre>code{margin-top:0;border-radius:0;box-shadow:none}.web-player{margin-bottom:1em}.web-player>iframe,.web-player>pre{display:none}.web-player.desktop>iframe,.web-player.mobile>pre{display:block}.token.keyword{color:#1990b8}.token.regex,.token.string{color:#2f9c0a}.token.boolean,.token.number{color:#c92c2c}.token.comment{color:#7d8b99}.props{background-color:#ebf9ff}.compactProps{border-left:2px solid #e0f6ff;margin-left:20px;padding-left:5px}.props>.prop:nth-child(2n){background-color:#e0f6ff}.propTitle{font-weight:700!important;font-size:16px!important}.compactProps .propTitle{font-size:14px;margin-bottom:0;margin-top:0}.compactProps .propTitle div{font-weight:400;margin-left:20px}.methodTitle{font-weight:700!important;font-size:24px!important;color:#025268!important}.compactProps .methodTitle{font-size:14px;margin-bottom:0;margin-top:0}.compactProps .methodTitle div{font-weight:400;margin-left:20px}.prop{word-wrap:break-word;padding:5px 10px}.compactProps .prop{padding:3px 10px}.propType{font-family:source-code-pro,Menlo,Courier New,Consolas,monospace;font-weight:400;font-size:15px;white-space:pre-wrap}.compactProps .propType{font-weight:400;font-size:13px}.methodType{font-weight:400;font-size:24px}.compactProps .methodType{font-weight:400;font-size:13px}.botActions{background-color:#ebf9ff}.botActions>.botAction:nth-child(2n){background-color:#e0f6ff}.botCommand{font-family:source-code-pro,Menlo,Courier New,Consolas,monospace;font-weight:700;color:#025268}.botAction{padding:5px 10px}.botMentionName{font-weight:400}hr{height:1px;margin-bottom:-1px;border:none;border-bottom:1px solid #ececec;margin-top:40px}table{background:#ebf9ff;border:1px solid #b0b0b0;border-collapse:collapse;display:table;margin:20px 0;width:80%}table thead{display:table-header-group}table tbody{display:table-row-group}table tr{display:table-row}table tr:nth-of-type(odd){background:#ebf9ff}table tr:nth-of-type(2n){background:#e0f6ff}table tr td,table tr th{border-right:1px dotted #b0b0b0;display:table-cell;font-size:14px;line-height:1.3em;padding:10px;text-align:left}table tr td:last-of-type,table tr th:last-of-type{border-right:0}table tr td code,table tr th code{display:inline-block;font-size:12px}table tr th{color:#000;font-weight:700;font-family:Helvetica Neue,Arial,sans-serif;text-transform:uppercase}table tr th:first-of-type{width:60%}table tr th:nth-of-type(4){width:80%}footer .sitemap h5>a,footer .sitemap h6,footer .sitemap h6>a{color:#05a5d1}footer.nav-footer{background-color:#012129}footer.nav-footer .nav-home img{height:auto;width:34px}.fixedHeaderContainer header h3{font-size:14px;margin-left:8px;text-decoration:none}.fixedHeaderContainer header h3:hover{opacity:.8}li.navSearchWrapper{font-size:16px}.hero .button{background:-webkit-gradient(linear,left top, left bottom,from(#9a9a9a),to(#646464));background:linear-gradient(#9a9a9a,#646464);border-radius:4px;padding:8px 16px;font-size:18px;font-weight:300;margin:0 12px;display:inline-block;color:#fafafa;text-shadow:0 1px 3px rgba(0,0,0,.3);box-shadow:1px 3px 3px rgba(0,0,0,.3)}.button:hover,.hero .button{text-decoration:none}.button:active{box-shadow:none}.button.blue{background:-webkit-gradient(linear,left top, left bottom,from(#77a3d2),to(#4783c2));background:linear-gradient(#77a3d2,#4783c2)}@media only screen and (max-device-width:1024px){.hero{padding:10px 0 30px}}.hero{background:#2d2d2d;padding:50px 0;color:#fdf3e7;text-align:center}.hero .text{font-size:300%;text-align:center}.hero .minitext{font-size:24px;text-align:center}@media only screen and (max-width:680px){.hero .text{font-size:200%;text-align:center}.hero .minitext{font-size:18px;text-align:center}}.buttons-unit{margin-top:40px}.buttons-unit a{color:#fff}.buttons-unit .button{background:#05a5d1;color:#fafafa}@media screen and (min-width:600px){.buttons-unit .button{font-size:24px}}.buttons-unit .button:active{background:#0485a9}@media screen and (max-width:373px){.hero .buttons-unit .button{margin-bottom:4px}}body{background-color:#f5fcff}.headerTitle{font-weight:300!important}.mainContainer{background-color:#f5fcff!important}@media only screen and (min-width:1024px){.mainContainer{margin-left:20px}}@media only screen and (min-width:736px){.docsNavContainer{width:240px}}.mainContainer h1,.mainContainer h2,.mainContainer h3,.mainContainer h4,.mainContainer h5,.mainContainer h6{color:#005068!important}a{color:#05a5d1}input#search_input_react{background-color:#2f2f2f}.button{color:#005068;border:1px solid #005068}.button:hover{background:#005068}.hero{box-sizing:border-box}.hero .button{text-transform:none}code{color:#005068!important}.mainContainer .component-grid{max-width:800px}.mainContainer .component{border:1px solid #05a5d1;border-radius:3px;margin:0 auto 10px;width:100%;display:inline-block;background-color:#fff}.mainContainer .component-grid .component h3{font-size:16px;font-weight:400;margin:0;padding:0 10px;background-color:#05a5d1;color:#fff;line-height:40px}.mainContainer .component h3 a{color:#fff}.mainContainer .component p{padding:10px;margin:2px}@supports (display:grid){.mainContainer .component-grid{display:grid;grid-gap:22px}}@media only screen and (min-device-width:768px){.mainContainer .component-grid{width:768px}.mainContainer .component-grid.component-grid-border{border-bottom:1px solid #f1eff0}.mainContainer .component{width:30%;height:150px;margin:0 22px 22px auto;vertical-align:top}@supports (display:grid){.mainContainer .component-grid{grid-template-columns:repeat(3,1fr)}.mainContainer .component{width:auto;height:auto;margin:0}}}.wrapper{max-width:1200px}.container{max-width:900px}.container .wrapper h2{font-size:31px}.container .wrapper .hljs{margin:14px 0}.pageContainer .container{margin:40px auto}.big-button,li,p{font-size:18px}.big-button{text-align:center;background:#05a5d1;border-radius:4px;padding:12px 16px;font-weight:300;margin:0 12px;display:inline-block;color:#fafafa;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,.3);box-shadow:1px 3px 3px rgba(0,0,0,.3);-webkit-transition:background .3s,color .3s,-webkit-transform .3s;transition:background .3s,color .3s,-webkit-transform .3s;transition:background .3s,color .3s,transform .3s;transition:background .3s,color .3s,transform .3s,-webkit-transform .3s}.big-button:hover{background:#047598;color:#fff;-webkit-transform:scale(1.05);transform:scale(1.05)}.big-button a{color:#fff}.big-button:active{background:#0485a9}@media screen and (min-width:600px){.big-button{font-size:24px}}@media screen and (max-width:373px){.big-button{margin-bottom:4px}}.prose h1{padding:0}.prose{max-width:800px}.hljs{line-height:20px;background-color:rgba(5,165,209,.05)}.hljs+.hljs{margin-top:10px}table.versions{width:60%;border:0;border-collapse:separate}table.versions tr th{width:20%}table.versions td,table.versions th{padding:2px 5px}table.versions tr td,table.versions tr th{border:0;width:33%;padding:5px}table.versions tr:nth-of-type(odd){background:#e0f6ff}table.versions tr:nth-of-type(2n){background:#ebf9ff}article iframe{max-width:120%}.codepen{width:1000px;padding:20px 0;margin-left:-100px}@media only screen and (min-device-width:320px) and (max-device-width:480px){.codepen{width:100%;margin-left:auto}article iframe{max-width:100%}}.showcaseSection .inner-content{width:800px}@media only screen and (max-device-width:840px){.showcaseSection .inner-content{width:100%}}.home-showcase-section{max-width:800px;margin:20px auto;text-align:center;padding-bottom:40px}.home-showcase-section p{max-width:560px;margin:0 auto}.footnote{font-size:12px;color:rgba(0,0,0,.4)}.home-showcase-section h2{font-size:31px;line-height:40px;margin:10px 0}.home-showcase-section .showcase img{width:100px;height:100px;border-radius:20px}.showcaseHeader{padding-bottom:15px;padding-top:15px;text-align:center}.showcase{margin:30px auto;width:100%;display:inline-block;text-align:center;vertical-align:top}@media only screen and (min-width:600px){.showcase{width:50%}}@media only screen and (min-width:960px){.showcase{width:25%}}.showcase h3{margin-bottom:0;line-height:20px;padding-left:5px;padding-right:5px;padding-bottom:0!important;font-size:16px}.showcase p{margin-top:5px;padding-top:0!important}.showcase h3,.showcase p{color:#484848}@media only screen and (min-device-width:736px){.showcaseSection .showcase img{width:100px;max-height:100px}}.showcaseSection .showcase img{height:100px;border-radius:20px}.showcaseSection .logos img{padding:0}.pinned img{width:150px;border-radius:20px}.toggler{margin-bottom:1em}.toggler li{display:inline-block;position:relative;top:1px;padding:10px!important;margin:0 2px!important;border:1px solid #05a5d1;border-bottom-color:transparent;border-radius:3px 3px 0 0;background-color:transparent;font-size:.99em;cursor:pointer}.toggler li:first-child{margin-left:0!important}.toggler li:last-child{margin-right:0!important}.toggler ul{width:100%;display:inline-block;list-style-type:none;padding:0!important;margin:0!important;border-bottom:1px solid #05a5d1;cursor:default}@media screen and (max-width:960px){.toggler li,.toggler li:first-child,.toggler li:last-child{display:block;border-bottom-color:#05a5d1;border-radius:3px;margin:2px 0}.toggler ul{border-bottom:0}}.toggler a{display:inline-block;padding:10px 5px;margin:2px;border:1px solid #05a5d1;border-radius:3px;text-decoration:none!important;color:#05a5d1}
\ No newline at end of file
diff --git a/docs/0.10/accessibility.html b/docs/0.10/accessibility.html
index 568bce3af7f..f26adac1330 100644
--- a/docs/0.10/accessibility.html
+++ b/docs/0.10/accessibility.html
@@ -229,7 +229,7 @@
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or a custom radio button has been selected). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event.
import { UIManager, findNodeHandle } from 'react-native';
-_onPress: function() {
+_onPress: function() {
const radioButton = this.state.radioButton === 'radiobutton_checked' ?
'radiobutton_unchecked' : 'radiobutton_checked'
diff --git a/docs/0.10/accessibility/index.html b/docs/0.10/accessibility/index.html
index 568bce3af7f..f26adac1330 100644
--- a/docs/0.10/accessibility/index.html
+++ b/docs/0.10/accessibility/index.html
@@ -229,7 +229,7 @@
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or a custom radio button has been selected). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event.
import { UIManager, findNodeHandle } from 'react-native';
-_onPress: function() {
+_onPress: function() {
const radioButton = this.state.radioButton === 'radiobutton_checked' ?
'radiobutton_unchecked' : 'radiobutton_checked'
diff --git a/docs/0.10/accessibilityinfo.html b/docs/0.10/accessibilityinfo.html
index 58aeed0e75d..d68bbf93de0 100644
--- a/docs/0.10/accessibilityinfo.html
+++ b/docs/0.10/accessibilityinfo.html
@@ -26,7 +26,7 @@
'change',
this._handleScreenReaderToggled,
);
- AccessibilityInfo.fetch().done((isEnabled) => {
+ AccessibilityInfo.fetch().done((isEnabled) => {
this.setState({
screenReaderEnabled: isEnabled,
});
@@ -40,7 +40,7 @@
);
}
- _handleScreenReaderToggled = (isEnabled) => {
+ _handleScreenReaderToggled = (isEnabled) => {
this.setState({
screenReaderEnabled: isEnabled,
});
diff --git a/docs/0.10/accessibilityinfo/index.html b/docs/0.10/accessibilityinfo/index.html
index 58aeed0e75d..d68bbf93de0 100644
--- a/docs/0.10/accessibilityinfo/index.html
+++ b/docs/0.10/accessibilityinfo/index.html
@@ -26,7 +26,7 @@
'change',
this._handleScreenReaderToggled,
);
- AccessibilityInfo.fetch().done((isEnabled) => {
+ AccessibilityInfo.fetch().done((isEnabled) => {
this.setState({
screenReaderEnabled: isEnabled,
});
@@ -40,7 +40,7 @@
);
}
- _handleScreenReaderToggled = (isEnabled) => {
+ _handleScreenReaderToggled = (isEnabled) => {
this.setState({
screenReaderEnabled: isEnabled,
});
diff --git a/docs/0.10/alertios.html b/docs/0.10/alertios.html
index ae7f8d0cdc4..a3904cac91f 100644
--- a/docs/0.10/alertios.html
+++ b/docs/0.10/alertios.html
@@ -36,12 +36,12 @@
[
{
text: 'Cancel',
- onPress: () => console.log('Cancel Pressed'),
+ onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
{
text: 'Install',
- onPress: () => console.log('Install Pressed'),
+ onPress: () => console.log('Install Pressed'),
},
],
);
@@ -53,12 +53,12 @@
[
{
text: 'Cancel',
- onPress: () => console.log('Cancel Pressed'),
+ onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
{
text: 'OK',
- onPress: (password) => console.log('OK Pressed, password: ' + password),
+ onPress: (password) => console.log('OK Pressed, password: ' + password),
},
],
'secure-text',
@@ -68,7 +68,7 @@
AlertIOS.prompt(
'Update username',
null,
- (text) => console.log('Your username is ' + text),
+ (text) => console.log('Your username is ' + text),
null,
'default',
);
diff --git a/docs/0.10/alertios/index.html b/docs/0.10/alertios/index.html
index ae7f8d0cdc4..a3904cac91f 100644
--- a/docs/0.10/alertios/index.html
+++ b/docs/0.10/alertios/index.html
@@ -36,12 +36,12 @@
[
{
text: 'Cancel',
- onPress: () => console.log('Cancel Pressed'),
+ onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
{
text: 'Install',
- onPress: () => console.log('Install Pressed'),
+ onPress: () => console.log('Install Pressed'),
},
],
);
@@ -53,12 +53,12 @@
[
{
text: 'Cancel',
- onPress: () => console.log('Cancel Pressed'),
+ onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
{
text: 'OK',
- onPress: (password) => console.log('OK Pressed, password: ' + password),
+ onPress: (password) => console.log('OK Pressed, password: ' + password),
},
],
'secure-text',
@@ -68,7 +68,7 @@
AlertIOS.prompt(
'Update username',
null,
- (text) => console.log('Your username is ' + text),
+ (text) => console.log('Your username is ' + text),
null,
'default',
);
diff --git a/docs/0.10/animated.html b/docs/0.10/animated.html
index 100e23c0d8e..52d1221020f 100644
--- a/docs/0.10/animated.html
+++ b/docs/0.10/animated.html
@@ -42,7 +42,7 @@
In most cases, you will be using timing(). By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.
Working with animations
Animations are started by calling start() on your animation. start() takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with {finished: true}. If the animation is done because stop() was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive {finished: false}.
-this.animateValue.spring({}).start(({finished}) => {
+this.animateValue.spring({}).start(({finished}) => {
if (finished) {
console.log('Animation was completed');
} else {
@@ -394,13 +394,13 @@
Takes an array of mappings and extracts values from each arg accordingly, then calls setValue on the mapped outputs. e.g.
onScroll={Animated.event(
[{nativeEvent: {contentOffset: {x: this._scrollX}}}],
- {listener: (event) => console.log(event)}, // Optional async listener
+ {listener: (event) => console.log(event)}, // Optional async listener
)}
...
onPanResponderMove: Animated.event([
null, // raw event arg ignored
{dx: this._panX}, // gestureState arg
- {listener: (event, gestureState) => console.log(event, gestureState)}, // Optional async listener
+ {listener: (event, gestureState) => console.log(event, gestureState)}, // Optional async listener
]),
Parameters:
diff --git a/docs/0.10/animated/index.html b/docs/0.10/animated/index.html
index 100e23c0d8e..52d1221020f 100644
--- a/docs/0.10/animated/index.html
+++ b/docs/0.10/animated/index.html
@@ -42,7 +42,7 @@
In most cases, you will be using timing(). By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.
Working with animations
Animations are started by calling start() on your animation. start() takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with {finished: true}. If the animation is done because stop() was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive {finished: false}.
-this.animateValue.spring({}).start(({finished}) => {
+this.animateValue.spring({}).start(({finished}) => {
if (finished) {
console.log('Animation was completed');
} else {
@@ -394,13 +394,13 @@
Takes an array of mappings and extracts values from each arg accordingly, then calls setValue on the mapped outputs. e.g.
onScroll={Animated.event(
[{nativeEvent: {contentOffset: {x: this._scrollX}}}],
- {listener: (event) => console.log(event)}, // Optional async listener
+ {listener: (event) => console.log(event)}, // Optional async listener
)}
...
onPanResponderMove: Animated.event([
null, // raw event arg ignored
{dx: this._panX}, // gestureState arg
- {listener: (event, gestureState) => console.log(event, gestureState)}, // Optional async listener
+ {listener: (event, gestureState) => console.log(event, gestureState)}, // Optional async listener
]),
Parameters:
diff --git a/docs/0.10/animatedvaluexy.html b/docs/0.10/animatedvaluexy.html
index 83930f86485..2ee75a38fc4 100644
--- a/docs/0.10/animatedvaluexy.html
+++ b/docs/0.10/animatedvaluexy.html
@@ -18,13 +18,13 @@
See also Animated.
Example
class DraggableView extends React.Component {
- constructor(props) {
+ constructor(props) {
super(props);
this.state = {
pan: new Animated.ValueXY(), // inits to zero
};
this.state.panResponder = PanResponder.create({
- onStartShouldSetPanResponder: () => true,
+ onStartShouldSetPanResponder: () => true,
onPanResponderMove: Animated.event([
null,
{
@@ -32,7 +32,7 @@
dy: this.state.pan.y,
},
]),
- onPanResponderRelease: () => {
+ onPanResponderRelease: () => {
Animated.spring(
this.state.pan, // Auto-multiplexed
{toValue: {x: 0, y: 0}}, // Back to zero
@@ -43,7 +43,7 @@
render() {
return (
<Animated.View
- {...this.state.panResponder.panHandlers}
+ {...this.state.panResponder.panHandlers}
style={this.state.pan.getLayout()}>
{this.props.children}
</Animated.View>
diff --git a/docs/0.10/animatedvaluexy/index.html b/docs/0.10/animatedvaluexy/index.html
index 83930f86485..2ee75a38fc4 100644
--- a/docs/0.10/animatedvaluexy/index.html
+++ b/docs/0.10/animatedvaluexy/index.html
@@ -18,13 +18,13 @@
See also Animated.
Example
class DraggableView extends React.Component {
- constructor(props) {
+ constructor(props) {
super(props);
this.state = {
pan: new Animated.ValueXY(), // inits to zero
};
this.state.panResponder = PanResponder.create({
- onStartShouldSetPanResponder: () => true,
+ onStartShouldSetPanResponder: () => true,
onPanResponderMove: Animated.event([
null,
{
@@ -32,7 +32,7 @@
dy: this.state.pan.y,
},
]),
- onPanResponderRelease: () => {
+ onPanResponderRelease: () => {
Animated.spring(
this.state.pan, // Auto-multiplexed
{toValue: {x: 0, y: 0}}, // Back to zero
@@ -43,7 +43,7 @@
render() {
return (
<Animated.View
- {...this.state.panResponder.panHandlers}
+ {...this.state.panResponder.panHandlers}
style={this.state.pan.getLayout()}>
{this.props.children}
</Animated.View>
diff --git a/docs/0.10/appstate.html b/docs/0.10/appstate.html
index 71e18930854..f20db8f8d4c 100644
--- a/docs/0.10/appstate.html
+++ b/docs/0.10/appstate.html
@@ -41,7 +41,7 @@
AppState.removeEventListener('change', this._handleAppStateChange);
}
- _handleAppStateChange = (nextAppState) => {
+ _handleAppStateChange = (nextAppState) => {
if (
this.state.appState.match(/inactive|background/) &&
nextAppState === 'active'
diff --git a/docs/0.10/appstate/index.html b/docs/0.10/appstate/index.html
index 71e18930854..f20db8f8d4c 100644
--- a/docs/0.10/appstate/index.html
+++ b/docs/0.10/appstate/index.html
@@ -41,7 +41,7 @@
AppState.removeEventListener('change', this._handleAppStateChange);
}
- _handleAppStateChange = (nextAppState) => {
+ _handleAppStateChange = (nextAppState) => {
if (
this.state.appState.match(/inactive|background/) &&
nextAppState === 'active'
diff --git a/docs/0.10/asyncstorage.html b/docs/0.10/asyncstorage.html
index bab673424d8..34770a2df00 100644
--- a/docs/0.10/asyncstorage.html
+++ b/docs/0.10/asyncstorage.html
@@ -21,7 +21,7 @@
Persisting data:
try {
await AsyncStorage.setItem('@MySuperStore:key', 'I like to save it.');
-} catch (error) {
+} catch (error) {
// Error saving data
}
@@ -32,7 +32,7 @@
// We have data!!
console.log(value);
}
-} catch (error) {
+} catch (error) {
// Error retrieving data
}
@@ -50,7 +50,7 @@
AsyncStorage.setItem('UID123', JSON.stringify(UID123_object), () => {
AsyncStorage.mergeItem('UID123', JSON.stringify(UID123_delta), () => {
- AsyncStorage.getItem('UID123', (err, result) => {
+ AsyncStorage.getItem('UID123', (err, result) => {
console.log(result);
});
});
@@ -96,10 +96,10 @@ AsyncStorage.['UID345', JSON.stringify(UID345_delta)],
];
-AsyncStorage.multiSet(multi_set_pairs, (err) => {
- AsyncStorage.multiMerge(multi_merge_pairs, (err) => {
- AsyncStorage.multiGet(['UID234', 'UID345'], (err, stores) => {
- stores.map((result, i, store) => {
+AsyncStorage.multiSet(multi_set_pairs, (err) => {
+ AsyncStorage.multiMerge(multi_merge_pairs, (err) => {
+ AsyncStorage.multiGet(['UID234', 'UID345'], (err, stores) => {
+ stores.map((result, i, store) => {
let key = store[i][0];
let val = store[i][1];
console.log(key, val);
@@ -113,9 +113,9 @@ AsyncStorage.// => UID345 {"name":"Marge","age":26,"traits":{"shoe_size":6,"hair":"blonde","eyes":"green"}}
Fetching multiple items:
-AsyncStorage.getAllKeys((err, keys) => {
- AsyncStorage.multiGet(keys, (err, stores) => {
- stores.map((result, i, store) => {
+AsyncStorage.getAllKeys((err, keys) => {
+ AsyncStorage.multiGet(keys, (err, stores) => {
+ stores.map((result, i, store) => {
// get at each store's key/value so you can work with it
let key = store[i][0];
let value = store[i][1];
@@ -125,7 +125,7 @@ AsyncStorage.
Removing multiple items:
let keys = ['k1', 'k2'];
-AsyncStorage.multiRemove(keys, (err) => {
+AsyncStorage.multiRemove(keys, (err) => {
// keys k1 & k2 removed, if they existed
// do most stuff after removal (if you want)
});
diff --git a/docs/0.10/asyncstorage/index.html b/docs/0.10/asyncstorage/index.html
index bab673424d8..34770a2df00 100644
--- a/docs/0.10/asyncstorage/index.html
+++ b/docs/0.10/asyncstorage/index.html
@@ -21,7 +21,7 @@
Persisting data:
try {
await AsyncStorage.setItem('@MySuperStore:key', 'I like to save it.');
-} catch (error) {
+} catch (error) {
// Error saving data
}
@@ -32,7 +32,7 @@
// We have data!!
console.log(value);
}
-} catch (error) {
+} catch (error) {
// Error retrieving data
}
@@ -50,7 +50,7 @@
AsyncStorage.setItem('UID123', JSON.stringify(UID123_object), () => {
AsyncStorage.mergeItem('UID123', JSON.stringify(UID123_delta), () => {
- AsyncStorage.getItem('UID123', (err, result) => {
+ AsyncStorage.getItem('UID123', (err, result) => {
console.log(result);
});
});
@@ -96,10 +96,10 @@ AsyncStorage.['UID345', JSON.stringify(UID345_delta)],
];
-AsyncStorage.multiSet(multi_set_pairs, (err) => {
- AsyncStorage.multiMerge(multi_merge_pairs, (err) => {
- AsyncStorage.multiGet(['UID234', 'UID345'], (err, stores) => {
- stores.map((result, i, store) => {
+AsyncStorage.multiSet(multi_set_pairs, (err) => {
+ AsyncStorage.multiMerge(multi_merge_pairs, (err) => {
+ AsyncStorage.multiGet(['UID234', 'UID345'], (err, stores) => {
+ stores.map((result, i, store) => {
let key = store[i][0];
let val = store[i][1];
console.log(key, val);
@@ -113,9 +113,9 @@ AsyncStorage.// => UID345 {"name":"Marge","age":26,"traits":{"shoe_size":6,"hair":"blonde","eyes":"green"}}
Fetching multiple items:
-AsyncStorage.getAllKeys((err, keys) => {
- AsyncStorage.multiGet(keys, (err, stores) => {
- stores.map((result, i, store) => {
+AsyncStorage.getAllKeys((err, keys) => {
+ AsyncStorage.multiGet(keys, (err, stores) => {
+ stores.map((result, i, store) => {
// get at each store's key/value so you can work with it
let key = store[i][0];
let value = store[i][1];
@@ -125,7 +125,7 @@ AsyncStorage.
Removing multiple items:
let keys = ['k1', 'k2'];
-AsyncStorage.multiRemove(keys, (err) => {
+AsyncStorage.multiRemove(keys, (err) => {
// keys k1 & k2 removed, if they existed
// do most stuff after removal (if you want)
});
diff --git a/docs/0.10/building-for-apple-tv.html b/docs/0.10/building-for-apple-tv.html
index ded45b3e127..de342b91cf3 100644
--- a/docs/0.10/building-for-apple-tv.html
+++ b/docs/0.10/building-for-apple-tv.html
@@ -218,7 +218,7 @@
_enableTVEventHandler() {
this._tvEventHandler = new TVEventHandler();
- this._tvEventHandler.enable(this, function(cmp, evt) {
+ this._tvEventHandler.enable(this, function(cmp, evt) {
if (evt && evt.eventType === 'right') {
cmp.setState({board: cmp.state.board.move(2)});
} else if(evt && evt.eventType === 'up') {
diff --git a/docs/0.10/building-for-apple-tv/index.html b/docs/0.10/building-for-apple-tv/index.html
index ded45b3e127..de342b91cf3 100644
--- a/docs/0.10/building-for-apple-tv/index.html
+++ b/docs/0.10/building-for-apple-tv/index.html
@@ -218,7 +218,7 @@
_enableTVEventHandler() {
this._tvEventHandler = new TVEventHandler();
- this._tvEventHandler.enable(this, function(cmp, evt) {
+ this._tvEventHandler.enable(this, function(cmp, evt) {
if (evt && evt.eventType === 'right') {
cmp.setState({board: cmp.state.board.move(2)});
} else if(evt && evt.eventType === 'up') {
diff --git a/docs/0.10/communication-ios.html b/docs/0.10/communication-ios.html
index 7876f813514..5b8da4666ba 100644
--- a/docs/0.10/communication-ios.html
+++ b/docs/0.10/communication-ios.html
@@ -92,7 +92,7 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
import {AppRegistry, View, Image} from 'react-native';
class ImageBrowserApp extends React.Component {
- renderImage(imgURI) {
+ renderImage(imgURI) {
return <Image source={{uri: imgURI}} />;
}
render() {
diff --git a/docs/0.10/communication-ios/index.html b/docs/0.10/communication-ios/index.html
index 7876f813514..5b8da4666ba 100644
--- a/docs/0.10/communication-ios/index.html
+++ b/docs/0.10/communication-ios/index.html
@@ -92,7 +92,7 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
import {AppRegistry, View, Image} from 'react-native';
class ImageBrowserApp extends React.Component {
- renderImage(imgURI) {
+ renderImage(imgURI) {
return <Image source={{uri: imgURI}} />;
}
render() {
diff --git a/docs/0.10/custom-webview-android.html b/docs/0.10/custom-webview-android.html
index 3b3c54ed845..5beca0f7940 100644
--- a/docs/0.10/custom-webview-android.html
+++ b/docs/0.10/custom-webview-android.html
@@ -23,31 +23,31 @@
getName
addEventEmitters
-@ReactModule(name = CustomWebViewManager.REACT_CLASS)
+@ReactModule(name = CustomWebViewManager.REACT_CLASS)
public class CustomWebViewManager extends ReactWebViewManager {
/* This name must match what we're referring to in JS */
- protected static final String REACT_CLASS = "RCTCustomWebView";
+ protected static final String REACT_CLASS = "RCTCustomWebView";
protected static class CustomWebViewClient extends ReactWebViewClient { }
protected static class CustomWebView extends ReactWebView {
- public CustomWebView(ThemedReactContext reactContext) {
+ public CustomWebView(ThemedReactContext reactContext) {
super(reactContext);
}
}
@Override
- protected ReactWebView createReactWebViewInstance(ThemedReactContext reactContext) {
+ protected ReactWebView createReactWebViewInstance(ThemedReactContext reactContext) {
return new CustomWebView(reactContext);
}
@Override
- public String getName() {
+ public String getName() {
return REACT_CLASS;
}
@Override
- protected void addEventEmitters(ThemedReactContext reactContext, WebView view) {
+ protected void addEventEmitters(ThemedReactContext reactContext, WebView view) {
view.setWebViewClient(new CustomWebViewClient());
}
}
@@ -59,17 +59,17 @@
...
protected static class CustomWebView extends ReactWebView {
- public CustomWebView(ThemedReactContext reactContext) {
+ public CustomWebView(ThemedReactContext reactContext) {
super(reactContext);
}
- protected @Nullable String mFinalUrl;
+ protected @Nullable String mFinalUrl;
- public void setFinalUrl(String url) {
+ public void setFinalUrl(String url) {
mFinalUrl = url;
}
- public String getFinalUrl() {
+ public String getFinalUrl() {
return mFinalUrl;
}
}
@@ -77,29 +77,29 @@
...
@ReactProp(name = "finalUrl")
- public void setFinalUrl(WebView view, String url) {
- ((CustomWebView) view).setFinalUrl(url);
+ public void setFinalUrl(WebView view, String url) {
+ ((CustomWebView) view).setFinalUrl(url);
}
}
Adding New Events
For events, you'll first need to make create event subclass.
// NavigationCompletedEvent.java
-public class NavigationCompletedEvent extends Event<NavigationCompletedEvent> {
- private WritableMap mParams;
+public class NavigationCompletedEvent extends Event<NavigationCompletedEvent> {
+ private WritableMap mParams;
- public NavigationCompletedEvent(int viewTag, WritableMap params) {
+ public NavigationCompletedEvent(int viewTag, WritableMap params) {
super(viewTag);
this.mParams = params;
}
@Override
- public String getEventName() {
+ public String getEventName() {
return "navigationCompleted";
}
@Override
- public void dispatch(RCTEventEmitter rctEventEmitter) {
+ public void dispatch(RCTEventEmitter rctEventEmitter) {
init(getViewTag());
rctEventEmitter.receiveEvent(getViewTag(), getEventName(), mParams);
}
@@ -107,21 +107,21 @@
You can trigger the event in your web view client. You can hook existing handlers if your events are based on them.
You should refer to ReactWebViewManager.java in the React Native codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality.
-public class NavigationCompletedEvent extends Event<NavigationCompletedEvent> {
- private WritableMap mParams;
+public class NavigationCompletedEvent extends Event<NavigationCompletedEvent> {
+ private WritableMap mParams;
- public NavigationCompletedEvent(int viewTag, WritableMap params) {
+ public NavigationCompletedEvent(int viewTag, WritableMap params) {
super(viewTag);
this.mParams = params;
}
@Override
- public String getEventName() {
+ public String getEventName() {
return "navigationCompleted";
}
@Override
- public void dispatch(RCTEventEmitter rctEventEmitter) {
+ public void dispatch(RCTEventEmitter rctEventEmitter) {
init(getViewTag());
rctEventEmitter.receiveEvent(getViewTag(), getEventName(), mParams);
}
@@ -130,12 +130,12 @@
// CustomWebViewManager.java
protected static class CustomWebViewClient extends ReactWebViewClient {
@Override
- public boolean shouldOverrideUrlLoading(WebView view, String url) {
+ public boolean shouldOverrideUrlLoading(WebView view, String url) {
boolean shouldOverride = super.shouldOverrideUrlLoading(view, url);
- String finalUrl = ((CustomWebView) view).getFinalUrl();
+ String finalUrl = ((CustomWebView) view).getFinalUrl();
- if (!shouldOverride && url != null && finalUrl != null && new String(url).equals(finalUrl)) {
- final WritableMap params = Arguments.createMap();
+ if (!shouldOverride && url != null && finalUrl != null && new String(url).equals(finalUrl)) {
+ final WritableMap params = Arguments.createMap();
dispatchEvent(view, new NavigationCompletedEvent(view.getId(), params));
}
@@ -149,12 +149,12 @@
@Override
public @Nullable
- Map getExportedCustomDirectEventTypeConstants() {
- Map<String, Object> export = super.getExportedCustomDirectEventTypeConstants();
- if (export == null) {
- export = MapBuilder.newHashMap();
+ Map getExportedCustomDirectEventTypeConstants() {
+ Map<String, Object> export = super.getExportedCustomDirectEventTypeConstants();
+ if (export == null) {
+ export = MapBuilder.newHashMap();
}
- export.put("navigationCompleted", MapBuilder.of("registrationName", "onNavigationCompleted"));
+ export.put("navigationCompleted", MapBuilder.of("registrationName", "onNavigationCompleted"));
return export;
}
}
@@ -174,7 +174,7 @@
render() {
return (
- <WebView {...this.props} nativeConfig={{component: RCTCustomWebView}} />
+ <WebView {...this.props} nativeConfig={{component: RCTCustomWebView}} />
);
}
}
@@ -199,7 +199,7 @@
finalUrl: 'about:blank',
};
- _onNavigationCompleted = (event) => {
+ _onNavigationCompleted = (event) => {
const {onNavigationCompleted} = this.props;
onNavigationCompleted && onNavigationCompleted(event);
};
@@ -207,7 +207,7 @@
render() {
return (
<WebView
- {...this.props}
+ {...this.props}
nativeConfig={{
component: RCTCustomWebView,
props: {
diff --git a/docs/0.10/custom-webview-android/index.html b/docs/0.10/custom-webview-android/index.html
index 3b3c54ed845..5beca0f7940 100644
--- a/docs/0.10/custom-webview-android/index.html
+++ b/docs/0.10/custom-webview-android/index.html
@@ -23,31 +23,31 @@
getName
addEventEmitters
-@ReactModule(name = CustomWebViewManager.REACT_CLASS)
+@ReactModule(name = CustomWebViewManager.REACT_CLASS)
public class CustomWebViewManager extends ReactWebViewManager {
/* This name must match what we're referring to in JS */
- protected static final String REACT_CLASS = "RCTCustomWebView";
+ protected static final String REACT_CLASS = "RCTCustomWebView";
protected static class CustomWebViewClient extends ReactWebViewClient { }
protected static class CustomWebView extends ReactWebView {
- public CustomWebView(ThemedReactContext reactContext) {
+ public CustomWebView(ThemedReactContext reactContext) {
super(reactContext);
}
}
@Override
- protected ReactWebView createReactWebViewInstance(ThemedReactContext reactContext) {
+ protected ReactWebView createReactWebViewInstance(ThemedReactContext reactContext) {
return new CustomWebView(reactContext);
}
@Override
- public String getName() {
+ public String getName() {
return REACT_CLASS;
}
@Override
- protected void addEventEmitters(ThemedReactContext reactContext, WebView view) {
+ protected void addEventEmitters(ThemedReactContext reactContext, WebView view) {
view.setWebViewClient(new CustomWebViewClient());
}
}
@@ -59,17 +59,17 @@
...
protected static class CustomWebView extends ReactWebView {
- public CustomWebView(ThemedReactContext reactContext) {
+ public CustomWebView(ThemedReactContext reactContext) {
super(reactContext);
}
- protected @Nullable String mFinalUrl;
+ protected @Nullable String mFinalUrl;
- public void setFinalUrl(String url) {
+ public void setFinalUrl(String url) {
mFinalUrl = url;
}
- public String getFinalUrl() {
+ public String getFinalUrl() {
return mFinalUrl;
}
}
@@ -77,29 +77,29 @@
...
@ReactProp(name = "finalUrl")
- public void setFinalUrl(WebView view, String url) {
- ((CustomWebView) view).setFinalUrl(url);
+ public void setFinalUrl(WebView view, String url) {
+ ((CustomWebView) view).setFinalUrl(url);
}
}
Adding New Events
For events, you'll first need to make create event subclass.
// NavigationCompletedEvent.java
-public class NavigationCompletedEvent extends Event<NavigationCompletedEvent> {
- private WritableMap mParams;
+public class NavigationCompletedEvent extends Event<NavigationCompletedEvent> {
+ private WritableMap mParams;
- public NavigationCompletedEvent(int viewTag, WritableMap params) {
+ public NavigationCompletedEvent(int viewTag, WritableMap params) {
super(viewTag);
this.mParams = params;
}
@Override
- public String getEventName() {
+ public String getEventName() {
return "navigationCompleted";
}
@Override
- public void dispatch(RCTEventEmitter rctEventEmitter) {
+ public void dispatch(RCTEventEmitter rctEventEmitter) {
init(getViewTag());
rctEventEmitter.receiveEvent(getViewTag(), getEventName(), mParams);
}
@@ -107,21 +107,21 @@
You can trigger the event in your web view client. You can hook existing handlers if your events are based on them.
You should refer to ReactWebViewManager.java in the React Native codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality.
-public class NavigationCompletedEvent extends Event<NavigationCompletedEvent> {
- private WritableMap mParams;
+public class NavigationCompletedEvent extends Event<NavigationCompletedEvent> {
+ private WritableMap mParams;
- public NavigationCompletedEvent(int viewTag, WritableMap params) {
+ public NavigationCompletedEvent(int viewTag, WritableMap params) {
super(viewTag);
this.mParams = params;
}
@Override
- public String getEventName() {
+ public String getEventName() {
return "navigationCompleted";
}
@Override
- public void dispatch(RCTEventEmitter rctEventEmitter) {
+ public void dispatch(RCTEventEmitter rctEventEmitter) {
init(getViewTag());
rctEventEmitter.receiveEvent(getViewTag(), getEventName(), mParams);
}
@@ -130,12 +130,12 @@
// CustomWebViewManager.java
protected static class CustomWebViewClient extends ReactWebViewClient {
@Override
- public boolean shouldOverrideUrlLoading(WebView view, String url) {
+ public boolean shouldOverrideUrlLoading(WebView view, String url) {
boolean shouldOverride = super.shouldOverrideUrlLoading(view, url);
- String finalUrl = ((CustomWebView) view).getFinalUrl();
+ String finalUrl = ((CustomWebView) view).getFinalUrl();
- if (!shouldOverride && url != null && finalUrl != null && new String(url).equals(finalUrl)) {
- final WritableMap params = Arguments.createMap();
+ if (!shouldOverride && url != null && finalUrl != null && new String(url).equals(finalUrl)) {
+ final WritableMap params = Arguments.createMap();
dispatchEvent(view, new NavigationCompletedEvent(view.getId(), params));
}
@@ -149,12 +149,12 @@
@Override
public @Nullable
- Map getExportedCustomDirectEventTypeConstants() {
- Map<String, Object> export = super.getExportedCustomDirectEventTypeConstants();
- if (export == null) {
- export = MapBuilder.newHashMap();
+ Map getExportedCustomDirectEventTypeConstants() {
+ Map<String, Object> export = super.getExportedCustomDirectEventTypeConstants();
+ if (export == null) {
+ export = MapBuilder.newHashMap();
}
- export.put("navigationCompleted", MapBuilder.of("registrationName", "onNavigationCompleted"));
+ export.put("navigationCompleted", MapBuilder.of("registrationName", "onNavigationCompleted"));
return export;
}
}
@@ -174,7 +174,7 @@
render() {
return (
- <WebView {...this.props} nativeConfig={{component: RCTCustomWebView}} />
+ <WebView {...this.props} nativeConfig={{component: RCTCustomWebView}} />
);
}
}
@@ -199,7 +199,7 @@
finalUrl: 'about:blank',
};
- _onNavigationCompleted = (event) => {
+ _onNavigationCompleted = (event) => {
const {onNavigationCompleted} = this.props;
onNavigationCompleted && onNavigationCompleted(event);
};
@@ -207,7 +207,7 @@
render() {
return (
<WebView
- {...this.props}
+ {...this.props}
nativeConfig={{
component: RCTCustomWebView,
props: {
diff --git a/docs/0.10/custom-webview-ios.html b/docs/0.10/custom-webview-ios.html
index c3a69393663..442e3767f81 100644
--- a/docs/0.10/custom-webview-ios.html
+++ b/docs/0.10/custom-webview-ios.html
@@ -139,7 +139,7 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, NSString)
render() {
return (
<WebView
- {...this.props}
+ {...this.props}
nativeConfig={{
component: RCTCustomWebView,
viewManager: CustomWebViewManager,
@@ -169,7 +169,7 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, NSString)
finalUrl: 'about:blank',
};
- _onNavigationCompleted = (event) => {
+ _onNavigationCompleted = (event) => {
const {onNavigationCompleted} = this.props;
onNavigationCompleted && onNavigationCompleted(event);
};
@@ -177,7 +177,7 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, NSString)
render() {
return (
<WebView
- {...this.props}
+ {...this.props}
nativeConfig={{
component: RCTCustomWebView,
props: {
diff --git a/docs/0.10/custom-webview-ios/index.html b/docs/0.10/custom-webview-ios/index.html
index c3a69393663..442e3767f81 100644
--- a/docs/0.10/custom-webview-ios/index.html
+++ b/docs/0.10/custom-webview-ios/index.html
@@ -139,7 +139,7 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, NSString)
render() {
return (
<WebView
- {...this.props}
+ {...this.props}
nativeConfig={{
component: RCTCustomWebView,
viewManager: CustomWebViewManager,
@@ -169,7 +169,7 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, NSString)
finalUrl: 'about:blank',
};
- _onNavigationCompleted = (event) => {
+ _onNavigationCompleted = (event) => {
const {onNavigationCompleted} = this.props;
onNavigationCompleted && onNavigationCompleted(event);
};
@@ -177,7 +177,7 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, NSString)
render() {
return (
<WebView
- {...this.props}
+ {...this.props}
nativeConfig={{
component: RCTCustomWebView,
props: {
diff --git a/docs/0.10/direct-manipulation.html b/docs/0.10/direct-manipulation.html
index 6a35a0dbe06..c494836f143 100644
--- a/docs/0.10/direct-manipulation.html
+++ b/docs/0.10/direct-manipulation.html
@@ -77,7 +77,7 @@
setNativeProps with TouchableOpacity
TouchableOpacity uses setNativeProps internally to update the opacity of its child component:
-setOpacityTo(value) {
+setOpacityTo(value) {
// Redacted: animation related code
this.refs[CHILD_REF].setNativeProps({
opacity: value
@@ -92,7 +92,7 @@
</TouchableOpacity>
Let's imagine that setNativeProps was not available. One way that we might implement it with that constraint is to store the opacity value in the state, then update that value whenever onPress is fired:
-constructor(props) {
+constructor(props) {
super(props);
this.state = { myButtonOpacity: 1, };
}
diff --git a/docs/0.10/direct-manipulation/index.html b/docs/0.10/direct-manipulation/index.html
index 6a35a0dbe06..c494836f143 100644
--- a/docs/0.10/direct-manipulation/index.html
+++ b/docs/0.10/direct-manipulation/index.html
@@ -77,7 +77,7 @@
setNativeProps with TouchableOpacity
TouchableOpacity uses setNativeProps internally to update the opacity of its child component:
-setOpacityTo(value) {
+setOpacityTo(value) {
// Redacted: animation related code
this.refs[CHILD_REF].setNativeProps({
opacity: value
@@ -92,7 +92,7 @@
</TouchableOpacity>
Let's imagine that setNativeProps was not available. One way that we might implement it with that constraint is to store the opacity value in the state, then update that value whenever onPress is fired:
-constructor(props) {
+constructor(props) {
super(props);
this.state = { myButtonOpacity: 1, };
}
diff --git a/docs/0.10/flatlist.html b/docs/0.10/flatlist.html
index e165d3a2a57..d7514ed66ab 100644
--- a/docs/0.10/flatlist.html
+++ b/docs/0.10/flatlist.html
@@ -30,7 +30,7 @@
Minimal Example:
<FlatList
data={[{key: 'a'}, {key: 'b'}]}
- renderItem={({item}) => <Text>{item.key}</Text>}
+ renderItem={({item}) => <Text>{item.key}</Text>}
/>
More complex, multi-select example demonstrating PureComponent usage for perf optimization and avoiding bugs.
@@ -59,23 +59,23 @@
class MultiSelectList extends React.PureComponent {
state = {selected: (new Map(): Map<string, boolean>)};
- _keyExtractor = (item, index) => item.id;
+ _keyExtractor = (item, index) => item.id;
- _onPressItem = (id: string) => {
+ _onPressItem = (id: string) => {
// updater functions are preferred for transactional updates
- this.setState((state) => {
+ this.setState((state) => {
// copy the map rather than modifying state.
const selected = new Map(state.selected);
- selected.set(id, !selected.get(id)); // toggle
+ selected.set(id, !selected.get(id)); // toggle
return {selected};
});
};
- _renderItem = ({item}) => (
+ _renderItem = ({item}) => (
<MyListItem
id={item.id}
onPressItem={this._onPressItem}
- selected={!!this.state.selected.get(item.id)}
+ selected={!!this.state.selected.get(item.id)}
title={item.title}
/>
);
@@ -148,7 +148,7 @@
Reference
Props
renderItem
-renderItem({ item: object, index: number, separators: { highlight: function, unhighlight: function, updateProps: function(select: string, newProps: object) } }): [element]
+renderItem({ item: object, index: number, separators: { highlight: function, unhighlight: function, updateProps: function(select: string, newProps: object) } }): [element]
Takes an item from data and renders it into the list.
Provides additional metadata like index if you need it, as well as a more generic separators.updateProps function which let's you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common highlight and unhighlight (which set the highlighted: boolean prop) are insufficient for your use case.
@@ -162,11 +162,11 @@
Example usage:
<FlatList
- ItemSeparatorComponent={Platform.OS !== 'android' && ({highlighted}) => (
+ ItemSeparatorComponent={Platform.OS !== 'android' && ({highlighted}) => (
<View style={[style.separator, highlighted && {marginLeft: 0}]} />
)}
data={[{title: 'Title Text', key: 'item1'}]}
- renderItem={({item, separators}) => (
+ renderItem={({item, separators}) => (
<TouchableHighlight
onPress={() => this._onPress(item)}
onShowUnderlay={separators.highlight}
@@ -257,10 +257,10 @@
getItemLayout
-(data, index) => {length: number, offset: number, index: number}
+(data, index) => {length: number, offset: number, index: number}
getItemLayout is an optional optimization that let us skip measurement of dynamic content if you know the height of items a priori. getItemLayout is the most efficient, and is easy to use if you have fixed height items, for example:
- getItemLayout={(data, index) => (
+ getItemLayout={(data, index) => (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}
@@ -319,7 +319,7 @@
keyExtractor
-(item: object, index: number) => string;
+(item: object, index: number) => string;
Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks item.key, then falls back to using the index, like React does.
@@ -343,7 +343,7 @@
onEndReached
-(info: {distanceFromEnd: number}) => void
+(info: {distanceFromEnd: number}) => void
Called once when the scroll position gets within onEndReachedThreshold of the rendered content.
@@ -380,10 +380,10 @@
onViewableItemsChanged
-(info: {
+(info: {
viewableItems: array,
changed: array,
- }) => void
+ }) => void
Called when the viewability of rows changes, as defined by the viewabilityConfig prop.
diff --git a/docs/0.10/flatlist/index.html b/docs/0.10/flatlist/index.html
index e165d3a2a57..d7514ed66ab 100644
--- a/docs/0.10/flatlist/index.html
+++ b/docs/0.10/flatlist/index.html
@@ -30,7 +30,7 @@
Minimal Example:
<FlatList
data={[{key: 'a'}, {key: 'b'}]}
- renderItem={({item}) => <Text>{item.key}</Text>}
+ renderItem={({item}) => <Text>{item.key}</Text>}
/>
More complex, multi-select example demonstrating PureComponent usage for perf optimization and avoiding bugs.
@@ -59,23 +59,23 @@
class MultiSelectList extends React.PureComponent {
state = {selected: (new Map(): Map<string, boolean>)};
- _keyExtractor = (item, index) => item.id;
+ _keyExtractor = (item, index) => item.id;
- _onPressItem = (id: string) => {
+ _onPressItem = (id: string) => {
// updater functions are preferred for transactional updates
- this.setState((state) => {
+ this.setState((state) => {
// copy the map rather than modifying state.
const selected = new Map(state.selected);
- selected.set(id, !selected.get(id)); // toggle
+ selected.set(id, !selected.get(id)); // toggle
return {selected};
});
};
- _renderItem = ({item}) => (
+ _renderItem = ({item}) => (
<MyListItem
id={item.id}
onPressItem={this._onPressItem}
- selected={!!this.state.selected.get(item.id)}
+ selected={!!this.state.selected.get(item.id)}
title={item.title}
/>
);
@@ -148,7 +148,7 @@
Reference
Props
renderItem
-renderItem({ item: object, index: number, separators: { highlight: function, unhighlight: function, updateProps: function(select: string, newProps: object) } }): [element]
+renderItem({ item: object, index: number, separators: { highlight: function, unhighlight: function, updateProps: function(select: string, newProps: object) } }): [element]
Takes an item from data and renders it into the list.
Provides additional metadata like index if you need it, as well as a more generic separators.updateProps function which let's you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common highlight and unhighlight (which set the highlighted: boolean prop) are insufficient for your use case.
@@ -162,11 +162,11 @@
Example usage:
<FlatList
- ItemSeparatorComponent={Platform.OS !== 'android' && ({highlighted}) => (
+ ItemSeparatorComponent={Platform.OS !== 'android' && ({highlighted}) => (
<View style={[style.separator, highlighted && {marginLeft: 0}]} />
)}
data={[{title: 'Title Text', key: 'item1'}]}
- renderItem={({item, separators}) => (
+ renderItem={({item, separators}) => (
<TouchableHighlight
onPress={() => this._onPress(item)}
onShowUnderlay={separators.highlight}
@@ -257,10 +257,10 @@
getItemLayout
-(data, index) => {length: number, offset: number, index: number}
+(data, index) => {length: number, offset: number, index: number}
getItemLayout is an optional optimization that let us skip measurement of dynamic content if you know the height of items a priori. getItemLayout is the most efficient, and is easy to use if you have fixed height items, for example:
- getItemLayout={(data, index) => (
+ getItemLayout={(data, index) => (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}
@@ -319,7 +319,7 @@
keyExtractor
-(item: object, index: number) => string;
+(item: object, index: number) => string;
Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks item.key, then falls back to using the index, like React does.
@@ -343,7 +343,7 @@
onEndReached
-(info: {distanceFromEnd: number}) => void
+(info: {distanceFromEnd: number}) => void
Called once when the scroll position gets within onEndReachedThreshold of the rendered content.
@@ -380,10 +380,10 @@
onViewableItemsChanged
-(info: {
+(info: {
viewableItems: array,
changed: array,
- }) => void
+ }) => void
Called when the viewability of rows changes, as defined by the viewabilityConfig prop.
diff --git a/docs/0.10/headless-js-android.html b/docs/0.10/headless-js-android.html
index 47eddbcef98..4b35459ed98 100644
--- a/docs/0.10/headless-js-android.html
+++ b/docs/0.10/headless-js-android.html
@@ -76,7 +76,7 @@
AppRegistry.registerHeadlessTask('SomeTaskName', () => require('SomeTaskName'));
Then, in SomeTaskName.js:
-module.exports = async (taskData) => {
+module.exports = async (taskData) => {
// do stuff
};
@@ -86,17 +86,17 @@
public class MyTaskService extends HeadlessJsTaskService {
@Override
- protected @Nullable HeadlessJsTaskConfig getTaskConfig(Intent intent) {
- Bundle extras = intent.getExtras();
- if (extras != null) {
+ protected @Nullable HeadlessJsTaskConfig getTaskConfig(Intent intent) {
+ Bundle extras = intent.getExtras();
+ if (extras != null) {
return new HeadlessJsTaskConfig(
"SomeTaskName",
- Arguments.fromBundle(extras),
+ Arguments.fromBundle(extras),
5000, // timeout for the task
false // optional: defines whether or not the task is allowed in foreground. Default is false
);
}
- return null;
+ return null;
}
}
@@ -105,8 +105,8 @@
Now, whenever you start your service, e.g. as a periodic task or in response to some system event / broadcast, JS will spin up, run your task, then spin down.
Example:
-Intent service = new Intent(getApplicationContext(), MyTaskService.class);
-Bundle bundle = new Bundle();
+Intent service = new Intent(getApplicationContext(), MyTaskService.class);
+Bundle bundle = new Bundle();
bundle.putString("foo", "bar");
service.putExtras(bundle);
@@ -131,7 +131,7 @@ service.putE
public class NetworkChangeReceiver extends BroadcastReceiver {
@Override
- public void onReceive(final Context context, final Intent intent) {
+ public void onReceive(final Context context, final Intent intent) {
/**
This part will be called everytime network connection is changed
e.g. Connected -> Not Connected
@@ -142,28 +142,28 @@ service.putE
network connections
**/
boolean hasInternet = isNetworkAvailable(context);
- Intent serviceIntent = new Intent(context, MyTaskService.class);
+ Intent serviceIntent = new Intent(context, MyTaskService.class);
serviceIntent.putExtra("hasInternet", hasInternet);
context.startService(serviceIntent);
- HeadlessJsTaskService.acquireWakeLockNow(context);
+ HeadlessJsTaskService.acquireWakeLockNow(context);
}
}
- private boolean isAppOnForeground(Context context) {
+ private boolean isAppOnForeground(Context context) {
/**
We need to check if app is in foreground otherwise the app will crash.
http://stackoverflow.com/questions/8489993/check-android-application-is-in-foreground-or-not
**/
- ActivityManager activityManager = (ActivityManager) context.getSystemService(Context.ACTIVITY_SERVICE);
- List<ActivityManager.RunningAppProcessInfo> appProcesses =
+ ActivityManager activityManager = (ActivityManager) context.getSystemService(Context.ACTIVITY_SERVICE);
+ List<ActivityManager.RunningAppProcessInfo> appProcesses =
activityManager.getRunningAppProcesses();
- if (appProcesses == null) {
+ if (appProcesses == null) {
return false;
}
- final String packageName = context.getPackageName();
- for (ActivityManager.RunningAppProcessInfo appProcess : appProcesses) {
+ final String packageName = context.getPackageName();
+ for (ActivityManager.RunningAppProcessInfo appProcess : appProcesses) {
if (appProcess.importance ==
- ActivityManager.RunningAppProcessInfo.IMPORTANCE_FOREGROUND &&
+ ActivityManager.RunningAppProcessInfo.IMPORTANCE_FOREGROUND &&
appProcess.processName.equals(packageName)) {
return true;
}
@@ -171,11 +171,11 @@ service.putE
return false;
}
- public static boolean isNetworkAvailable(Context context) {
- ConnectivityManager cm = (ConnectivityManager)
- context.getSystemService(Context.CONNECTIVITY_SERVICE);
- NetworkInfo netInfo = cm.getActiveNetworkInfo();
- return (netInfo != null && netInfo.isConnected());
+ public static boolean isNetworkAvailable(Context context) {
+ ConnectivityManager cm = (ConnectivityManager)
+ context.getSystemService(Context.CONNECTIVITY_SERVICE);
+ NetworkInfo netInfo = cm.getActiveNetworkInfo();
+ return (netInfo != null && netInfo.isConnected());
}
diff --git a/docs/0.10/headless-js-android/index.html b/docs/0.10/headless-js-android/index.html
index 47eddbcef98..4b35459ed98 100644
--- a/docs/0.10/headless-js-android/index.html
+++ b/docs/0.10/headless-js-android/index.html
@@ -76,7 +76,7 @@
AppRegistry.registerHeadlessTask('SomeTaskName', () => require('SomeTaskName'));
Then, in SomeTaskName.js:
-module.exports = async (taskData) => {
+module.exports = async (taskData) => {
// do stuff
};
@@ -86,17 +86,17 @@
public class MyTaskService extends HeadlessJsTaskService {
@Override
- protected @Nullable HeadlessJsTaskConfig getTaskConfig(Intent intent) {
- Bundle extras = intent.getExtras();
- if (extras != null) {
+ protected @Nullable HeadlessJsTaskConfig getTaskConfig(Intent intent) {
+ Bundle extras = intent.getExtras();
+ if (extras != null) {
return new HeadlessJsTaskConfig(
"SomeTaskName",
- Arguments.fromBundle(extras),
+ Arguments.fromBundle(extras),
5000, // timeout for the task
false // optional: defines whether or not the task is allowed in foreground. Default is false
);
}
- return null;
+ return null;
}
}
@@ -105,8 +105,8 @@
Now, whenever you start your service, e.g. as a periodic task or in response to some system event / broadcast, JS will spin up, run your task, then spin down.
Example:
-Intent service = new Intent(getApplicationContext(), MyTaskService.class);
-Bundle bundle = new Bundle();
+Intent service = new Intent(getApplicationContext(), MyTaskService.class);
+Bundle bundle = new Bundle();
bundle.putString("foo", "bar");
service.putExtras(bundle);
@@ -131,7 +131,7 @@ service.putE
public class NetworkChangeReceiver extends BroadcastReceiver {
@Override
- public void onReceive(final Context context, final Intent intent) {
+ public void onReceive(final Context context, final Intent intent) {
/**
This part will be called everytime network connection is changed
e.g. Connected -> Not Connected
@@ -142,28 +142,28 @@ service.putE
network connections
**/
boolean hasInternet = isNetworkAvailable(context);
- Intent serviceIntent = new Intent(context, MyTaskService.class);
+ Intent serviceIntent = new Intent(context, MyTaskService.class);
serviceIntent.putExtra("hasInternet", hasInternet);
context.startService(serviceIntent);
- HeadlessJsTaskService.acquireWakeLockNow(context);
+ HeadlessJsTaskService.acquireWakeLockNow(context);
}
}
- private boolean isAppOnForeground(Context context) {
+ private boolean isAppOnForeground(Context context) {
/**
We need to check if app is in foreground otherwise the app will crash.
http://stackoverflow.com/questions/8489993/check-android-application-is-in-foreground-or-not
**/
- ActivityManager activityManager = (ActivityManager) context.getSystemService(Context.ACTIVITY_SERVICE);
- List<ActivityManager.RunningAppProcessInfo> appProcesses =
+ ActivityManager activityManager = (ActivityManager) context.getSystemService(Context.ACTIVITY_SERVICE);
+ List<ActivityManager.RunningAppProcessInfo> appProcesses =
activityManager.getRunningAppProcesses();
- if (appProcesses == null) {
+ if (appProcesses == null) {
return false;
}
- final String packageName = context.getPackageName();
- for (ActivityManager.RunningAppProcessInfo appProcess : appProcesses) {
+ final String packageName = context.getPackageName();
+ for (ActivityManager.RunningAppProcessInfo appProcess : appProcesses) {
if (appProcess.importance ==
- ActivityManager.RunningAppProcessInfo.IMPORTANCE_FOREGROUND &&
+ ActivityManager.RunningAppProcessInfo.IMPORTANCE_FOREGROUND &&
appProcess.processName.equals(packageName)) {
return true;
}
@@ -171,11 +171,11 @@ service.putE
return false;
}
- public static boolean isNetworkAvailable(Context context) {
- ConnectivityManager cm = (ConnectivityManager)
- context.getSystemService(Context.CONNECTIVITY_SERVICE);
- NetworkInfo netInfo = cm.getActiveNetworkInfo();
- return (netInfo != null && netInfo.isConnected());
+ public static boolean isNetworkAvailable(Context context) {
+ ConnectivityManager cm = (ConnectivityManager)
+ context.getSystemService(Context.CONNECTIVITY_SERVICE);
+ NetworkInfo netInfo = cm.getActiveNetworkInfo();
+ return (netInfo != null && netInfo.isConnected());
}
diff --git a/docs/0.10/integration-with-existing-apps.html b/docs/0.10/integration-with-existing-apps.html
index 247b369353b..16446324f48 100644
--- a/docs/0.10/integration-with-existing-apps.html
+++ b/docs/0.10/integration-with-existing-apps.html
@@ -323,7 +323,7 @@ Pod installation complete! There are 3 dependencies f
class RNHighScores extends React.Component {
render() {
- var contents = this.props['scores'].map((score) => (
+ var contents = this.props['scores'].map((score) => (
<Text key={score.name}>
{score.name}:{score.value}
{'\n'}
@@ -587,20 +587,20 @@ AppRegistry.
...
-if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
- if (!Settings.canDrawOverlays(this)) {
- Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
- Uri.parse("package:" + getPackageName()));
+if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+ if (!Settings.canDrawOverlays(this)) {
+ Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
+ Uri.parse("package:" + getPackageName()));
startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
}
}
Finally, the onActivityResult() method (as shown in the code below) has to be overridden to handle the permission Accepted or Denied cases for consistent UX. Also, for integrating Native Modules which use startActivityForResult, we need to pass the result to the onActivityResult method of our ReactInstanceManager instance.
@Override
-protected void onActivityResult(int requestCode, int resultCode, Intent data) {
+protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
- if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
- if (!Settings.canDrawOverlays(this)) {
+ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+ if (!Settings.canDrawOverlays(this)) {
// SYSTEM_ALERT_WINDOW permission not granted
}
}
@@ -614,26 +614,26 @@ AppRegistry.
If you are targetting Android version <5, use the AppCompatActivity class from the com.android.support:appcompat package instead of Activity.
public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
- private ReactRootView mReactRootView;
- private ReactInstanceManager mReactInstanceManager;
+ private ReactRootView mReactRootView;
+ private ReactInstanceManager mReactInstanceManager;
@Override
- protected void onCreate(Bundle savedInstanceState) {
+ protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
- mReactInstanceManager = ReactInstanceManager.builder()
+ mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setCurrentActivity(this)
.setBundleAssetName("index.android.bundle")
.setJSMainModulePath("index")
.addPackage(new MainReactPackage())
- .setUseDeveloperSupport(BuildConfig.DEBUG)
- .setInitialLifecycleState(LifecycleState.RESUMED)
+ .setUseDeveloperSupport(BuildConfig.DEBUG)
+ .setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// The string here (e.g. "MyReactNativeApp") has to match
// the string in AppRegistry.registerComponent() in index.js
- mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);
+ mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);
setContentView(mReactRootView);
}
@@ -663,7 +663,7 @@ AppRegistry.
protected void onPause() {
super.onPause();
- if (mReactInstanceManager != null) {
+ if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause(this);
}
}
@@ -672,7 +672,7 @@ AppRegistry.
protected void onResume() {
super.onResume();
- if (mReactInstanceManager != null) {
+ if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}
@@ -681,10 +681,10 @@ AppRegistry.
protected void onDestroy() {
super.onDestroy();
- if (mReactInstanceManager != null) {
+ if (mReactInstanceManager != null) {
mReactInstanceManager.onHostDestroy(this);
}
- if (mReactRootView != null) {
+ if (mReactRootView != null) {
mReactRootView.unmountReactApplication();
}
}
@@ -692,7 +692,7 @@ AppRegistry.
We also need to pass back button events to React Native:
@Override
public void onBackPressed() {
- if (mReactInstanceManager != null) {
+ if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
@@ -702,8 +702,8 @@ AppRegistry.
This allows JavaScript to control what happens when the user presses the hardware back button (e.g. to implement navigation). When JavaScript doesn't handle the back button press, your invokeDefaultOnBackPressed method will be called. By default this simply finishes your Activity.
Finally, we need to hook up the dev menu. By default, this is activated by (rage) shaking the device, but this is not very useful in emulators. So we make it show when you press the hardware menu button (use Ctrl + M if you're using Android Studio emulator):
@Override
-public boolean onKeyUp(int keyCode, KeyEvent event) {
- if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
+public boolean onKeyUp(int keyCode, KeyEvent event) {
+ if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
diff --git a/docs/0.10/integration-with-existing-apps/index.html b/docs/0.10/integration-with-existing-apps/index.html
index 247b369353b..16446324f48 100644
--- a/docs/0.10/integration-with-existing-apps/index.html
+++ b/docs/0.10/integration-with-existing-apps/index.html
@@ -323,7 +323,7 @@ Pod installation complete! There are 3 dependencies f
class RNHighScores extends React.Component {
render() {
- var contents = this.props['scores'].map((score) => (
+ var contents = this.props['scores'].map((score) => (
<Text key={score.name}>
{score.name}:{score.value}
{'\n'}
@@ -587,20 +587,20 @@ AppRegistry.
...
-if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
- if (!Settings.canDrawOverlays(this)) {
- Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
- Uri.parse("package:" + getPackageName()));
+if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+ if (!Settings.canDrawOverlays(this)) {
+ Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
+ Uri.parse("package:" + getPackageName()));
startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
}
}
Finally, the onActivityResult() method (as shown in the code below) has to be overridden to handle the permission Accepted or Denied cases for consistent UX. Also, for integrating Native Modules which use startActivityForResult, we need to pass the result to the onActivityResult method of our ReactInstanceManager instance.
@Override
-protected void onActivityResult(int requestCode, int resultCode, Intent data) {
+protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
- if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
- if (!Settings.canDrawOverlays(this)) {
+ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+ if (!Settings.canDrawOverlays(this)) {
// SYSTEM_ALERT_WINDOW permission not granted
}
}
@@ -614,26 +614,26 @@ AppRegistry.
If you are targetting Android version <5, use the AppCompatActivity class from the com.android.support:appcompat package instead of Activity.
public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
- private ReactRootView mReactRootView;
- private ReactInstanceManager mReactInstanceManager;
+ private ReactRootView mReactRootView;
+ private ReactInstanceManager mReactInstanceManager;
@Override
- protected void onCreate(Bundle savedInstanceState) {
+ protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
- mReactInstanceManager = ReactInstanceManager.builder()
+ mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setCurrentActivity(this)
.setBundleAssetName("index.android.bundle")
.setJSMainModulePath("index")
.addPackage(new MainReactPackage())
- .setUseDeveloperSupport(BuildConfig.DEBUG)
- .setInitialLifecycleState(LifecycleState.RESUMED)
+ .setUseDeveloperSupport(BuildConfig.DEBUG)
+ .setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// The string here (e.g. "MyReactNativeApp") has to match
// the string in AppRegistry.registerComponent() in index.js
- mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);
+ mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);
setContentView(mReactRootView);
}
@@ -663,7 +663,7 @@ AppRegistry.
protected void onPause() {
super.onPause();
- if (mReactInstanceManager != null) {
+ if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause(this);
}
}
@@ -672,7 +672,7 @@ AppRegistry.
protected void onResume() {
super.onResume();
- if (mReactInstanceManager != null) {
+ if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}
@@ -681,10 +681,10 @@ AppRegistry.
protected void onDestroy() {
super.onDestroy();
- if (mReactInstanceManager != null) {
+ if (mReactInstanceManager != null) {
mReactInstanceManager.onHostDestroy(this);
}
- if (mReactRootView != null) {
+ if (mReactRootView != null) {
mReactRootView.unmountReactApplication();
}
}
@@ -692,7 +692,7 @@ AppRegistry.
We also need to pass back button events to React Native:
@Override
public void onBackPressed() {
- if (mReactInstanceManager != null) {
+ if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
@@ -702,8 +702,8 @@ AppRegistry.
This allows JavaScript to control what happens when the user presses the hardware back button (e.g. to implement navigation). When JavaScript doesn't handle the back button press, your invokeDefaultOnBackPressed method will be called. By default this simply finishes your Activity.
Finally, we need to hook up the dev menu. By default, this is activated by (rage) shaking the device, but this is not very useful in emulators. So we make it show when you press the hardware menu button (use Ctrl + M if you're using Android Studio emulator):
@Override
-public boolean onKeyUp(int keyCode, KeyEvent event) {
- if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
+public boolean onKeyUp(int keyCode, KeyEvent event) {
+ if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
diff --git a/docs/0.10/native-components-android.html b/docs/0.10/native-components-android.html
index 7a24aad0116..d9cf1003155 100644
--- a/docs/0.10/native-components-android.html
+++ b/docs/0.10/native-components-android.html
@@ -88,20 +88,20 @@
In this example we create view manager class ReactImageManager that extends SimpleViewManager of type ReactImageView. ReactImageView is the type of object managed by the manager, this will be the custom native view. Name returned by getName is used to reference the native view type from JavaScript.
...
-public class ReactImageManager extends SimpleViewManager<ReactImageView> {
+public class ReactImageManager extends SimpleViewManager<ReactImageView> {
- public static final String REACT_CLASS = "RCTImageView";
+ public static final String REACT_CLASS = "RCTImageView";
@Override
- public String getName() {
+ public String getName() {
return REACT_CLASS;
}
2. Implement method createViewInstance
Views are created in the createViewInstance method, the view should initialize itself in its default state, any properties will be set via a follow up call to updateView.
@Override
- public ReactImageView createViewInstance(ThemedReactContext context) {
- return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), mCallerContext);
+ public ReactImageView createViewInstance(ThemedReactContext context) {
+ return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), mCallerContext);
}
3. Expose view property setters using @ReactProp (or @ReactPropGroup) annotation
@@ -111,26 +111,26 @@
Setter declaration requirements for methods annotated with @ReactPropGroup are different than for @ReactProp, please refer to the @ReactPropGroup annotation class docs for more information about it.
IMPORTANT! in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" can value can be specified using defaultBoolean, defaultFloat, etc. arguments of @ReactProp annotation, for complex types setter will be called with value set to null).
@ReactProp(name = "src")
- public void setSrc(ReactImageView view, @Nullable ReadableArray sources) {
+ public void setSrc(ReactImageView view, @Nullable ReadableArray sources) {
view.setSource(sources);
}
@ReactProp(name = "borderRadius", defaultFloat = 0f)
- public void setBorderRadius(ReactImageView view, float borderRadius) {
+ public void setBorderRadius(ReactImageView view, float borderRadius) {
view.setBorderRadius(borderRadius);
}
- @ReactProp(name = ViewProps.RESIZE_MODE)
- public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {
- view.setScaleType(ImageResizeMode.toScaleType(resizeMode));
+ @ReactProp(name = ViewProps.RESIZE_MODE)
+ public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {
+ view.setScaleType(ImageResizeMode.toScaleType(resizeMode));
}
4. Register the ViewManager
The final Java step is to register the ViewManager to the application, this happens in a similar way to Native Modules, via the applications package member function createViewManagers.
@Override
- public List<ViewManager> createViewManagers(
- ReactApplicationContext reactContext) {
- return Arrays.<ViewManager>asList(
+ public List<ViewManager> createViewManagers(
+ ReactApplicationContext reactContext) {
+ return Arrays.<ViewManager>asList(
new ReactImageManager()
);
}
@@ -156,10 +156,10 @@ module.exports class MyCustomView extends View {
...
public void onReceiveNativeEvent() {
- WritableMap event = Arguments.createMap();
+ WritableMap event = Arguments.createMap();
event.putString("message", "MyMessage");
- ReactContext reactContext = (ReactContext)getContext();
- reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
+ ReactContext reactContext = (ReactContext)getContext();
+ reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
getId(),
"topChange",
event);
@@ -167,15 +167,15 @@ module.exports }
To map the topChange event name to the onChange callback prop in JavaScript, register it by overriding the getExportedCustomBubblingEventTypeConstants method in your ViewManager:
-public class ReactImageManager extends SimpleViewManager<MyCustomView> {
+public class ReactImageManager extends SimpleViewManager<MyCustomView> {
...
- public Map getExportedCustomBubblingEventTypeConstants() {
- return MapBuilder.builder()
+ public Map getExportedCustomBubblingEventTypeConstants() {
+ return MapBuilder.builder()
.put(
"topChange",
- MapBuilder.of(
+ MapBuilder.of(
"phasedRegistrationNames",
- MapBuilder.of("bubbled", "onChange")))
+ MapBuilder.of("bubbled", "onChange")))
.build();
}
}
@@ -184,18 +184,18 @@ module.exports // MyCustomView.js
class MyCustomView extends React.Component {
- constructor(props) {
+ constructor(props) {
super(props);
- this._onChange = this._onChange.bind(this);
+ this._onChange = this._onChange.bind(this);
}
- _onChange(event: Event) {
+ _onChange(event: Event) {
if (!this.props.onChangeMessage) {
return;
}
this.props.onChangeMessage(event.nativeEvent.message);
}
render() {
- return <RCTMyCustomView {...this.props} onChange={this._onChange} />;
+ return <RCTMyCustomView {...this.props} onChange={this._onChange} />;
}
}
MyCustomView.propTypes = {
diff --git a/docs/0.10/native-components-android/index.html b/docs/0.10/native-components-android/index.html
index 7a24aad0116..d9cf1003155 100644
--- a/docs/0.10/native-components-android/index.html
+++ b/docs/0.10/native-components-android/index.html
@@ -88,20 +88,20 @@
In this example we create view manager class ReactImageManager that extends SimpleViewManager of type ReactImageView. ReactImageView is the type of object managed by the manager, this will be the custom native view. Name returned by getName is used to reference the native view type from JavaScript.
...
-public class ReactImageManager extends SimpleViewManager<ReactImageView> {
+public class ReactImageManager extends SimpleViewManager<ReactImageView> {
- public static final String REACT_CLASS = "RCTImageView";
+ public static final String REACT_CLASS = "RCTImageView";
@Override
- public String getName() {
+ public String getName() {
return REACT_CLASS;
}
2. Implement method createViewInstance
Views are created in the createViewInstance method, the view should initialize itself in its default state, any properties will be set via a follow up call to updateView.
@Override
- public ReactImageView createViewInstance(ThemedReactContext context) {
- return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), mCallerContext);
+ public ReactImageView createViewInstance(ThemedReactContext context) {
+ return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), mCallerContext);
}
3. Expose view property setters using @ReactProp (or @ReactPropGroup) annotation
@@ -111,26 +111,26 @@
Setter declaration requirements for methods annotated with @ReactPropGroup are different than for @ReactProp, please refer to the @ReactPropGroup annotation class docs for more information about it.
IMPORTANT! in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" can value can be specified using defaultBoolean, defaultFloat, etc. arguments of @ReactProp annotation, for complex types setter will be called with value set to null).
@ReactProp(name = "src")
- public void setSrc(ReactImageView view, @Nullable ReadableArray sources) {
+ public void setSrc(ReactImageView view, @Nullable ReadableArray sources) {
view.setSource(sources);
}
@ReactProp(name = "borderRadius", defaultFloat = 0f)
- public void setBorderRadius(ReactImageView view, float borderRadius) {
+ public void setBorderRadius(ReactImageView view, float borderRadius) {
view.setBorderRadius(borderRadius);
}
- @ReactProp(name = ViewProps.RESIZE_MODE)
- public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {
- view.setScaleType(ImageResizeMode.toScaleType(resizeMode));
+ @ReactProp(name = ViewProps.RESIZE_MODE)
+ public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {
+ view.setScaleType(ImageResizeMode.toScaleType(resizeMode));
}
4. Register the ViewManager
The final Java step is to register the ViewManager to the application, this happens in a similar way to Native Modules, via the applications package member function createViewManagers.
@Override
- public List<ViewManager> createViewManagers(
- ReactApplicationContext reactContext) {
- return Arrays.<ViewManager>asList(
+ public List<ViewManager> createViewManagers(
+ ReactApplicationContext reactContext) {
+ return Arrays.<ViewManager>asList(
new ReactImageManager()
);
}
@@ -156,10 +156,10 @@ module.exports class MyCustomView extends View {
...
public void onReceiveNativeEvent() {
- WritableMap event = Arguments.createMap();
+ WritableMap event = Arguments.createMap();
event.putString("message", "MyMessage");
- ReactContext reactContext = (ReactContext)getContext();
- reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
+ ReactContext reactContext = (ReactContext)getContext();
+ reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
getId(),
"topChange",
event);
@@ -167,15 +167,15 @@ module.exports }
To map the topChange event name to the onChange callback prop in JavaScript, register it by overriding the getExportedCustomBubblingEventTypeConstants method in your ViewManager:
-public class ReactImageManager extends SimpleViewManager<MyCustomView> {
+public class ReactImageManager extends SimpleViewManager<MyCustomView> {
...
- public Map getExportedCustomBubblingEventTypeConstants() {
- return MapBuilder.builder()
+ public Map getExportedCustomBubblingEventTypeConstants() {
+ return MapBuilder.builder()
.put(
"topChange",
- MapBuilder.of(
+ MapBuilder.of(
"phasedRegistrationNames",
- MapBuilder.of("bubbled", "onChange")))
+ MapBuilder.of("bubbled", "onChange")))
.build();
}
}
@@ -184,18 +184,18 @@ module.exports // MyCustomView.js
class MyCustomView extends React.Component {
- constructor(props) {
+ constructor(props) {
super(props);
- this._onChange = this._onChange.bind(this);
+ this._onChange = this._onChange.bind(this);
}
- _onChange(event: Event) {
+ _onChange(event: Event) {
if (!this.props.onChangeMessage) {
return;
}
this.props.onChangeMessage(event.nativeEvent.message);
}
render() {
- return <RCTMyCustomView {...this.props} onChange={this._onChange} />;
+ return <RCTMyCustomView {...this.props} onChange={this._onChange} />;
}
}
MyCustomView.propTypes = {
diff --git a/docs/0.10/native-components-ios.html b/docs/0.10/native-components-ios.html
index 38de6835998..51e452ebf73 100644
--- a/docs/0.10/native-components-ios.html
+++ b/docs/0.10/native-components-ios.html
@@ -147,7 +147,7 @@ RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, BOOL)
class MapView extends React.Component {
render() {
- return <RNTMap {...this.props} />;
+ return <RNTMap {...this.props} />;
}
}
@@ -347,7 +347,7 @@ RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion<
// MapView.js
class MapView extends React.Component {
- _onRegionChange = (event) => {
+ _onRegionChange = (event) => {
if (!this.props.onRegionChange) {
return;
}
@@ -358,7 +358,7 @@ RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion<
render() {
return (
<RNTMap
- {...this.props}
+ {...this.props}
onRegionChange={this._onRegionChange}
/>
);
@@ -375,7 +375,7 @@ MapView.propTypes // MyApp.js
class MyApp extends React.Component {
- onRegionChange(event) {
+ onRegionChange(event) {
// Do stuff with event.region.latitude, etc.
}
@@ -403,7 +403,7 @@ MapView.propTypes import { UIManager } from 'react-native';
var RCTDatePickerIOSConsts = UIManager.RCTDatePicker.Constants;
...
- render: function() {
+ render: function() {
return (
<View style={this.props.style}>
<RCTDatePickerIOS
diff --git a/docs/0.10/native-components-ios/index.html b/docs/0.10/native-components-ios/index.html
index 38de6835998..51e452ebf73 100644
--- a/docs/0.10/native-components-ios/index.html
+++ b/docs/0.10/native-components-ios/index.html
@@ -147,7 +147,7 @@ RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, BOOL)
class MapView extends React.Component {
render() {
- return <RNTMap {...this.props} />;
+ return <RNTMap {...this.props} />;
}
}
@@ -347,7 +347,7 @@ RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion<
// MapView.js
class MapView extends React.Component {
- _onRegionChange = (event) => {
+ _onRegionChange = (event) => {
if (!this.props.onRegionChange) {
return;
}
@@ -358,7 +358,7 @@ RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion<
render() {
return (
<RNTMap
- {...this.props}
+ {...this.props}
onRegionChange={this._onRegionChange}
/>
);
@@ -375,7 +375,7 @@ MapView.propTypes // MyApp.js
class MyApp extends React.Component {
- onRegionChange(event) {
+ onRegionChange(event) {
// Do stuff with event.region.latitude, etc.
}
@@ -403,7 +403,7 @@ MapView.propTypes import { UIManager } from 'react-native';
var RCTDatePickerIOSConsts = UIManager.RCTDatePicker.Constants;
...
- render: function() {
+ render: function() {
return (
<View style={this.props.style}>
<RCTDatePickerIOS
diff --git a/docs/0.10/native-modules-android.html b/docs/0.10/native-modules-android.html
index bd4148eaa09..c5a77457880 100644
--- a/docs/0.10/native-modules-android.html
+++ b/docs/0.10/native-modules-android.html
@@ -82,48 +82,48 @@
Create a new Java Class named ToastModule.java inside android/app/src/main/java/com/your-app-name/ folder with the content below:
// ToastModule.java
-package com.your-app-name;
+package com.your-app-name;
-import android.widget.Toast;
+import android.widget.Toast;
-import com.facebook.react.bridge.NativeModule;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.bridge.ReactContextBaseJavaModule;
-import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
-import java.util.Map;
-import java.util.HashMap;
+import java.util.Map;
+import java.util.HashMap;
public class ToastModule extends ReactContextBaseJavaModule {
- private static final String DURATION_SHORT_KEY = "SHORT";
- private static final String DURATION_LONG_KEY = "LONG";
+ private static final String DURATION_SHORT_KEY = "SHORT";
+ private static final String DURATION_LONG_KEY = "LONG";
- public ToastModule(ReactApplicationContext reactContext) {
+ public ToastModule(ReactApplicationContext reactContext) {
super(reactContext);
}
}
ReactContextBaseJavaModule requires that a method called getName is implemented. The purpose of this method is to return the string name of the NativeModule which represents this class in JavaScript. So here we will call this ToastExample so that we can access it through React.NativeModules.ToastExample in JavaScript.
@Override
- public String getName() {
+ public String getName() {
return "ToastExample";
}
An optional method called getConstants returns the constant values exposed to JavaScript. Its implementation is not required but is very useful to key pre-defined values that need to be communicated from JavaScript to Java in sync.
@Override
- public Map<String, Object> getConstants() {
- final Map<String, Object> constants = new HashMap<>();
- constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
- constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
+ public Map<String, Object> getConstants() {
+ final Map<String, Object> constants = new HashMap<>();
+ constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
+ constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
return constants;
}
To expose a method to JavaScript a Java method must be annotated using @ReactMethod. The return type of bridge methods is always void. React Native bridge is asynchronous, so the only way to pass a result to JavaScript is by using callbacks or emitting events (see below).
@ReactMethod
- public void show(String message, int duration) {
- Toast.makeText(getReactApplicationContext(), message, duration).show();
+ public void show(String message, int duration) {
+ Toast.makeText(getReactApplicationContext(), message, duration).show();
}
Argument Types
@@ -143,28 +143,28 @@ ReadableArray -><
create a new Java Class named CustomToastPackage.java inside android/app/src/main/java/com/your-app-name/ folder with the content below:
// CustomToastPackage.java
-package com.your-app-name;
+package com.your-app-name;
-import com.facebook.react.ReactPackage;
-import com.facebook.react.bridge.NativeModule;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.uimanager.ViewManager;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
-import java.util.ArrayList;
-import java.util.Collections;
-import java.util.List;
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
public class CustomToastPackage implements ReactPackage {
@Override
- public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
- return Collections.emptyList();
+ public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+ return Collections.emptyList();
}
@Override
- public List<NativeModule> createNativeModules(
- ReactApplicationContext reactContext) {
- List<NativeModule> modules = new ArrayList<>();
+ public List<NativeModule> createNativeModules(
+ ReactApplicationContext reactContext) {
+ List<NativeModule> modules = new ArrayList<>();
modules.add(new ToastModule(reactContext));
@@ -177,11 +177,11 @@ ReadableArray -><
// MainApplication.java
...
-import com.your-app-name.CustomToastPackage; // <-- Add this line with your package name.
+import com.your-app-name.CustomToastPackage; // <-- Add this line with your package name.
...
-protected List<ReactPackage> getPackages() {
- return Arrays.<ReactPackage>asList(
+protected List<ReactPackage> getPackages() {
+ return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new CustomToastPackage()); // <-- Add this line with your package name.
}
@@ -208,7 +208,7 @@ ToastExample.Beyond Toasts
Callbacks
Native modules also support a special kind of argument - a callback. In most cases it is used to provide the function call result to JavaScript.
-import com.facebook.react.bridge.Callback;
+import com.facebook.react.bridge.Callback;
public class UIManagerModule extends ReactContextBaseJavaModule {
@@ -218,14 +218,14 @@ ToastExample.public void measureLayout(
int tag,
int ancestorTag,
- Callback errorCallback,
- Callback successCallback) {
+ Callback errorCallback,
+ Callback successCallback) {
try {
measureLayout(tag, ancestorTag, mMeasureBuffer);
- float relativeX = PixelUtil.toDIPFromPixel(mMeasureBuffer[0]);
- float relativeY = PixelUtil.toDIPFromPixel(mMeasureBuffer[1]);
- float width = PixelUtil.toDIPFromPixel(mMeasureBuffer[2]);
- float height = PixelUtil.toDIPFromPixel(mMeasureBuffer[3]);
+ float relativeX = PixelUtil.toDIPFromPixel(mMeasureBuffer[0]);
+ float relativeY = PixelUtil.toDIPFromPixel(mMeasureBuffer[1]);
+ float width = PixelUtil.toDIPFromPixel(mMeasureBuffer[2]);
+ float height = PixelUtil.toDIPFromPixel(mMeasureBuffer[3]);
successCallback.invoke(relativeX, relativeY, width, height);
} catch (IllegalViewOperationException e) {
errorCallback.invoke(e.getMessage());
@@ -238,10 +238,10 @@ ToastExample.UIManager.measureLayout(
100,
100,
- (msg) => {
+ (msg) => {
console.log(msg);
},
- (x, y, width, height) => {
+ (x, y, width, height) => {
console.log(x + ':' + y + ':' + width + ':' + height);
},
);
@@ -251,26 +251,26 @@ ToastExample.Promises
Native modules can also fulfill a promise, which can simplify your code, especially when using ES2016's async/await syntax. When the last parameter of a bridged native method is a Promise, its corresponding JS method will return a JS Promise object.
Refactoring the above code to use a promise instead of callbacks looks like this:
-import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.Promise;
public class UIManagerModule extends ReactContextBaseJavaModule {
...
- private static final String E_LAYOUT_ERROR = "E_LAYOUT_ERROR";
+ private static final String E_LAYOUT_ERROR = "E_LAYOUT_ERROR";
@ReactMethod
public void measureLayout(
int tag,
int ancestorTag,
- Promise promise) {
+ Promise promise) {
try {
measureLayout(tag, ancestorTag, mMeasureBuffer);
- WritableMap map = Arguments.createMap();
+ WritableMap map = Arguments.createMap();
- map.putDouble("relativeX", PixelUtil.toDIPFromPixel(mMeasureBuffer[0]));
- map.putDouble("relativeY", PixelUtil.toDIPFromPixel(mMeasureBuffer[1]));
- map.putDouble("width", PixelUtil.toDIPFromPixel(mMeasureBuffer[2]));
- map.putDouble("height", PixelUtil.toDIPFromPixel(mMeasureBuffer[3]));
+ map.putDouble("relativeX", PixelUtil.toDIPFromPixel(mMeasureBuffer[0]));
+ map.putDouble("relativeY", PixelUtil.toDIPFromPixel(mMeasureBuffer[1]));
+ map.putDouble("width", PixelUtil.toDIPFromPixel(mMeasureBuffer[2]));
+ map.putDouble("height", PixelUtil.toDIPFromPixel(mMeasureBuffer[3]));
promise.resolve(map);
} catch (IllegalViewOperationException e) {
@@ -289,7 +289,7 @@ ToastExample.);
console.log(relativeX + ':' + relativeY + ':' + width + ':' + height);
- } catch (e) {
+ } catch (e) {
console.error(e);
}
}
@@ -301,15 +301,15 @@ ToastExample.Sending Events to JavaScript
Native modules can signal events to JavaScript without being invoked directly. The easiest way to do this is to use the RCTDeviceEventEmitter which can be obtained from the ReactContext as in the code snippet below.
...
-private void sendEvent(ReactContext reactContext,
- String eventName,
- @Nullable WritableMap params) {
+private void sendEvent(ReactContext reactContext,
+ String eventName,
+ @Nullable WritableMap params) {
reactContext
- .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
+ .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit(eventName, params);
}
...
-WritableMap params = Arguments.createMap();
+WritableMap params = Arguments.createMap();
...
sendEvent(reactContext, "keyboardWillShow", params);
@@ -328,7 +328,7 @@ WritableMap params = Argumentsthis.scrollResponderKeyboardWillShow);
...
},
- scrollResponderKeyboardWillShow:function(e: Event) {
+ scrollResponderKeyboardWillShow:function(e: Event) {
this.keyboardWillOpenTo = e;
this.props.onKeyboardWillShow && this.props.onKeyboardWillShow(e);
},
@@ -336,7 +336,7 @@ WritableMap params = Arguments...
componentDidMount() {
- this.subscription = DeviceEventEmitter.addListener('keyboardWillShow', function(e: Event) {
+ this.subscription = DeviceEventEmitter.addListener('keyboardWillShow', function(e: Event) {
// handle event
});
}
@@ -354,10 +354,10 @@ WritableMap params = Arguments@Override
public void onActivityResult(
- final Activity activity,
+ final Activity activity,
final int requestCode,
final int resultCode,
- final Intent intent) {
+ final Intent intent) {
// Your logic here
}
@@ -365,38 +365,38 @@ WritableMap params = Argumentspublic class ImagePickerModule extends ReactContextBaseJavaModule {
private static final int IMAGE_PICKER_REQUEST = 467081;
- private static final String E_ACTIVITY_DOES_NOT_EXIST = "E_ACTIVITY_DOES_NOT_EXIST";
- private static final String E_PICKER_CANCELLED = "E_PICKER_CANCELLED";
- private static final String E_FAILED_TO_SHOW_PICKER = "E_FAILED_TO_SHOW_PICKER";
- private static final String E_NO_IMAGE_DATA_FOUND = "E_NO_IMAGE_DATA_FOUND";
+ private static final String E_ACTIVITY_DOES_NOT_EXIST = "E_ACTIVITY_DOES_NOT_EXIST";
+ private static final String E_PICKER_CANCELLED = "E_PICKER_CANCELLED";
+ private static final String E_FAILED_TO_SHOW_PICKER = "E_FAILED_TO_SHOW_PICKER";
+ private static final String E_NO_IMAGE_DATA_FOUND = "E_NO_IMAGE_DATA_FOUND";
- private Promise mPickerPromise;
+ private Promise mPickerPromise;
- private final ActivityEventListener mActivityEventListener = new BaseActivityEventListener() {
+ private final ActivityEventListener mActivityEventListener = new BaseActivityEventListener() {
@Override
- public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent intent) {
+ public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent intent) {
if (requestCode == IMAGE_PICKER_REQUEST) {
- if (mPickerPromise != null) {
- if (resultCode == Activity.RESULT_CANCELED) {
+ if (mPickerPromise != null) {
+ if (resultCode == Activity.RESULT_CANCELED) {
mPickerPromise.reject(E_PICKER_CANCELLED, "Image picker was cancelled");
- } else if (resultCode == Activity.RESULT_OK) {
- Uri uri = intent.getData();
+ } else if (resultCode == Activity.RESULT_OK) {
+ Uri uri = intent.getData();
- if (uri == null) {
+ if (uri == null) {
mPickerPromise.reject(E_NO_IMAGE_DATA_FOUND, "No image data found");
} else {
mPickerPromise.resolve(uri.toString());
}
}
- mPickerPromise = null;
+ mPickerPromise = null;
}
}
}
};
- public ImagePickerModule(ReactApplicationContext reactContext) {
+ public ImagePickerModule(ReactApplicationContext reactContext) {
super(reactContext);
// Add the listener for `onActivityResult`
@@ -404,15 +404,15 @@ WritableMap params = Arguments}
@Override
- public String getName() {
+ public String getName() {
return "ImagePickerModule";
}
@ReactMethod
- public void pickImage(final Promise promise) {
- Activity currentActivity = getCurrentActivity();
+ public void pickImage(final Promise promise) {
+ Activity currentActivity = getCurrentActivity();
- if (currentActivity == null) {
+ if (currentActivity == null) {
promise.reject(E_ACTIVITY_DOES_NOT_EXIST, "Activity doesn't exist");
return;
}
@@ -421,16 +421,16 @@ WritableMap params = Arguments= promise;
try {
- final Intent galleryIntent = new Intent(Intent.ACTION_PICK);
+ final Intent galleryIntent = new Intent(Intent.ACTION_PICK);
galleryIntent.setType("image/*");
- final Intent chooserIntent = Intent.createChooser(galleryIntent, "Pick an image");
+ final Intent chooserIntent = Intent.createChooser(galleryIntent, "Pick an image");
currentActivity.startActivityForResult(chooserIntent, IMAGE_PICKER_REQUEST);
} catch (Exception e) {
mPickerPromise.reject(E_FAILED_TO_SHOW_PICKER, e);
- mPickerPromise = null;
+ mPickerPromise = null;
}
}
}
diff --git a/docs/0.10/native-modules-android/index.html b/docs/0.10/native-modules-android/index.html
index bd4148eaa09..c5a77457880 100644
--- a/docs/0.10/native-modules-android/index.html
+++ b/docs/0.10/native-modules-android/index.html
@@ -82,48 +82,48 @@
Create a new Java Class named ToastModule.java inside android/app/src/main/java/com/your-app-name/ folder with the content below:
// ToastModule.java
-package com.your-app-name;
+package com.your-app-name;
-import android.widget.Toast;
+import android.widget.Toast;
-import com.facebook.react.bridge.NativeModule;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.bridge.ReactContextBaseJavaModule;
-import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
-import java.util.Map;
-import java.util.HashMap;
+import java.util.Map;
+import java.util.HashMap;
public class ToastModule extends ReactContextBaseJavaModule {
- private static final String DURATION_SHORT_KEY = "SHORT";
- private static final String DURATION_LONG_KEY = "LONG";
+ private static final String DURATION_SHORT_KEY = "SHORT";
+ private static final String DURATION_LONG_KEY = "LONG";
- public ToastModule(ReactApplicationContext reactContext) {
+ public ToastModule(ReactApplicationContext reactContext) {
super(reactContext);
}
}
ReactContextBaseJavaModule requires that a method called getName is implemented. The purpose of this method is to return the string name of the NativeModule which represents this class in JavaScript. So here we will call this ToastExample so that we can access it through React.NativeModules.ToastExample in JavaScript.
@Override
- public String getName() {
+ public String getName() {
return "ToastExample";
}
An optional method called getConstants returns the constant values exposed to JavaScript. Its implementation is not required but is very useful to key pre-defined values that need to be communicated from JavaScript to Java in sync.
@Override
- public Map<String, Object> getConstants() {
- final Map<String, Object> constants = new HashMap<>();
- constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
- constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
+ public Map<String, Object> getConstants() {
+ final Map<String, Object> constants = new HashMap<>();
+ constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
+ constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
return constants;
}
To expose a method to JavaScript a Java method must be annotated using @ReactMethod. The return type of bridge methods is always void. React Native bridge is asynchronous, so the only way to pass a result to JavaScript is by using callbacks or emitting events (see below).
@ReactMethod
- public void show(String message, int duration) {
- Toast.makeText(getReactApplicationContext(), message, duration).show();
+ public void show(String message, int duration) {
+ Toast.makeText(getReactApplicationContext(), message, duration).show();
}
Argument Types
@@ -143,28 +143,28 @@ ReadableArray -><
create a new Java Class named CustomToastPackage.java inside android/app/src/main/java/com/your-app-name/ folder with the content below:
// CustomToastPackage.java
-package com.your-app-name;
+package com.your-app-name;
-import com.facebook.react.ReactPackage;
-import com.facebook.react.bridge.NativeModule;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.uimanager.ViewManager;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
-import java.util.ArrayList;
-import java.util.Collections;
-import java.util.List;
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
public class CustomToastPackage implements ReactPackage {
@Override
- public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
- return Collections.emptyList();
+ public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+ return Collections.emptyList();
}
@Override
- public List<NativeModule> createNativeModules(
- ReactApplicationContext reactContext) {
- List<NativeModule> modules = new ArrayList<>();
+ public List<NativeModule> createNativeModules(
+ ReactApplicationContext reactContext) {
+ List<NativeModule> modules = new ArrayList<>();
modules.add(new ToastModule(reactContext));
@@ -177,11 +177,11 @@ ReadableArray -><
// MainApplication.java
...
-import com.your-app-name.CustomToastPackage; // <-- Add this line with your package name.
+import com.your-app-name.CustomToastPackage; // <-- Add this line with your package name.
...
-protected List<ReactPackage> getPackages() {
- return Arrays.<ReactPackage>asList(
+protected List<ReactPackage> getPackages() {
+ return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new CustomToastPackage()); // <-- Add this line with your package name.
}
@@ -208,7 +208,7 @@ ToastExample.Beyond Toasts
Callbacks
Native modules also support a special kind of argument - a callback. In most cases it is used to provide the function call result to JavaScript.
-import com.facebook.react.bridge.Callback;
+import com.facebook.react.bridge.Callback;
public class UIManagerModule extends ReactContextBaseJavaModule {
@@ -218,14 +218,14 @@ ToastExample.public void measureLayout(
int tag,
int ancestorTag,
- Callback errorCallback,
- Callback successCallback) {
+ Callback errorCallback,
+ Callback successCallback) {
try {
measureLayout(tag, ancestorTag, mMeasureBuffer);
- float relativeX = PixelUtil.toDIPFromPixel(mMeasureBuffer[0]);
- float relativeY = PixelUtil.toDIPFromPixel(mMeasureBuffer[1]);
- float width = PixelUtil.toDIPFromPixel(mMeasureBuffer[2]);
- float height = PixelUtil.toDIPFromPixel(mMeasureBuffer[3]);
+ float relativeX = PixelUtil.toDIPFromPixel(mMeasureBuffer[0]);
+ float relativeY = PixelUtil.toDIPFromPixel(mMeasureBuffer[1]);
+ float width = PixelUtil.toDIPFromPixel(mMeasureBuffer[2]);
+ float height = PixelUtil.toDIPFromPixel(mMeasureBuffer[3]);
successCallback.invoke(relativeX, relativeY, width, height);
} catch (IllegalViewOperationException e) {
errorCallback.invoke(e.getMessage());
@@ -238,10 +238,10 @@ ToastExample.UIManager.measureLayout(
100,
100,
- (msg) => {
+ (msg) => {
console.log(msg);
},
- (x, y, width, height) => {
+ (x, y, width, height) => {
console.log(x + ':' + y + ':' + width + ':' + height);
},
);
@@ -251,26 +251,26 @@ ToastExample.Promises
Native modules can also fulfill a promise, which can simplify your code, especially when using ES2016's async/await syntax. When the last parameter of a bridged native method is a Promise, its corresponding JS method will return a JS Promise object.
Refactoring the above code to use a promise instead of callbacks looks like this:
-import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.Promise;
public class UIManagerModule extends ReactContextBaseJavaModule {
...
- private static final String E_LAYOUT_ERROR = "E_LAYOUT_ERROR";
+ private static final String E_LAYOUT_ERROR = "E_LAYOUT_ERROR";
@ReactMethod
public void measureLayout(
int tag,
int ancestorTag,
- Promise promise) {
+ Promise promise) {
try {
measureLayout(tag, ancestorTag, mMeasureBuffer);
- WritableMap map = Arguments.createMap();
+ WritableMap map = Arguments.createMap();
- map.putDouble("relativeX", PixelUtil.toDIPFromPixel(mMeasureBuffer[0]));
- map.putDouble("relativeY", PixelUtil.toDIPFromPixel(mMeasureBuffer[1]));
- map.putDouble("width", PixelUtil.toDIPFromPixel(mMeasureBuffer[2]));
- map.putDouble("height", PixelUtil.toDIPFromPixel(mMeasureBuffer[3]));
+ map.putDouble("relativeX", PixelUtil.toDIPFromPixel(mMeasureBuffer[0]));
+ map.putDouble("relativeY", PixelUtil.toDIPFromPixel(mMeasureBuffer[1]));
+ map.putDouble("width", PixelUtil.toDIPFromPixel(mMeasureBuffer[2]));
+ map.putDouble("height", PixelUtil.toDIPFromPixel(mMeasureBuffer[3]));
promise.resolve(map);
} catch (IllegalViewOperationException e) {
@@ -289,7 +289,7 @@ ToastExample.);
console.log(relativeX + ':' + relativeY + ':' + width + ':' + height);
- } catch (e) {
+ } catch (e) {
console.error(e);
}
}
@@ -301,15 +301,15 @@ ToastExample.Sending Events to JavaScript
Native modules can signal events to JavaScript without being invoked directly. The easiest way to do this is to use the RCTDeviceEventEmitter which can be obtained from the ReactContext as in the code snippet below.
...
-private void sendEvent(ReactContext reactContext,
- String eventName,
- @Nullable WritableMap params) {
+private void sendEvent(ReactContext reactContext,
+ String eventName,
+ @Nullable WritableMap params) {
reactContext
- .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
+ .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit(eventName, params);
}
...
-WritableMap params = Arguments.createMap();
+WritableMap params = Arguments.createMap();
...
sendEvent(reactContext, "keyboardWillShow", params);
@@ -328,7 +328,7 @@ WritableMap params = Argumentsthis.scrollResponderKeyboardWillShow);
...
},
- scrollResponderKeyboardWillShow:function(e: Event) {
+ scrollResponderKeyboardWillShow:function(e: Event) {
this.keyboardWillOpenTo = e;
this.props.onKeyboardWillShow && this.props.onKeyboardWillShow(e);
},
@@ -336,7 +336,7 @@ WritableMap params = Arguments...
componentDidMount() {
- this.subscription = DeviceEventEmitter.addListener('keyboardWillShow', function(e: Event) {
+ this.subscription = DeviceEventEmitter.addListener('keyboardWillShow', function(e: Event) {
// handle event
});
}
@@ -354,10 +354,10 @@ WritableMap params = Arguments@Override
public void onActivityResult(
- final Activity activity,
+ final Activity activity,
final int requestCode,
final int resultCode,
- final Intent intent) {
+ final Intent intent) {
// Your logic here
}
@@ -365,38 +365,38 @@ WritableMap params = Argumentspublic class ImagePickerModule extends ReactContextBaseJavaModule {
private static final int IMAGE_PICKER_REQUEST = 467081;
- private static final String E_ACTIVITY_DOES_NOT_EXIST = "E_ACTIVITY_DOES_NOT_EXIST";
- private static final String E_PICKER_CANCELLED = "E_PICKER_CANCELLED";
- private static final String E_FAILED_TO_SHOW_PICKER = "E_FAILED_TO_SHOW_PICKER";
- private static final String E_NO_IMAGE_DATA_FOUND = "E_NO_IMAGE_DATA_FOUND";
+ private static final String E_ACTIVITY_DOES_NOT_EXIST = "E_ACTIVITY_DOES_NOT_EXIST";
+ private static final String E_PICKER_CANCELLED = "E_PICKER_CANCELLED";
+ private static final String E_FAILED_TO_SHOW_PICKER = "E_FAILED_TO_SHOW_PICKER";
+ private static final String E_NO_IMAGE_DATA_FOUND = "E_NO_IMAGE_DATA_FOUND";
- private Promise mPickerPromise;
+ private Promise mPickerPromise;
- private final ActivityEventListener mActivityEventListener = new BaseActivityEventListener() {
+ private final ActivityEventListener mActivityEventListener = new BaseActivityEventListener() {
@Override
- public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent intent) {
+ public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent intent) {
if (requestCode == IMAGE_PICKER_REQUEST) {
- if (mPickerPromise != null) {
- if (resultCode == Activity.RESULT_CANCELED) {
+ if (mPickerPromise != null) {
+ if (resultCode == Activity.RESULT_CANCELED) {
mPickerPromise.reject(E_PICKER_CANCELLED, "Image picker was cancelled");
- } else if (resultCode == Activity.RESULT_OK) {
- Uri uri = intent.getData();
+ } else if (resultCode == Activity.RESULT_OK) {
+ Uri uri = intent.getData();
- if (uri == null) {
+ if (uri == null) {
mPickerPromise.reject(E_NO_IMAGE_DATA_FOUND, "No image data found");
} else {
mPickerPromise.resolve(uri.toString());
}
}
- mPickerPromise = null;
+ mPickerPromise = null;
}
}
}
};
- public ImagePickerModule(ReactApplicationContext reactContext) {
+ public ImagePickerModule(ReactApplicationContext reactContext) {
super(reactContext);
// Add the listener for `onActivityResult`
@@ -404,15 +404,15 @@ WritableMap params = Arguments}
@Override
- public String getName() {
+ public String getName() {
return "ImagePickerModule";
}
@ReactMethod
- public void pickImage(final Promise promise) {
- Activity currentActivity = getCurrentActivity();
+ public void pickImage(final Promise promise) {
+ Activity currentActivity = getCurrentActivity();
- if (currentActivity == null) {
+ if (currentActivity == null) {
promise.reject(E_ACTIVITY_DOES_NOT_EXIST, "Activity doesn't exist");
return;
}
@@ -421,16 +421,16 @@ WritableMap params = Arguments= promise;
try {
- final Intent galleryIntent = new Intent(Intent.ACTION_PICK);
+ final Intent galleryIntent = new Intent(Intent.ACTION_PICK);
galleryIntent.setType("image/*");
- final Intent chooserIntent = Intent.createChooser(galleryIntent, "Pick an image");
+ final Intent chooserIntent = Intent.createChooser(galleryIntent, "Pick an image");
currentActivity.startActivityForResult(chooserIntent, IMAGE_PICKER_REQUEST);
} catch (Exception e) {
mPickerPromise.reject(E_FAILED_TO_SHOW_PICKER, e);
- mPickerPromise = null;
+ mPickerPromise = null;
}
}
}
diff --git a/docs/0.10/native-modules-ios.html b/docs/0.10/native-modules-ios.html
index 77fac4643e4..ffda46d1fcc 100644
--- a/docs/0.10/native-modules-ios.html
+++ b/docs/0.10/native-modules-ios.html
@@ -201,7 +201,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
}
RCTResponseSenderBlock accepts only one argument - an array of parameters to pass to the JavaScript callback. In this case we use Node's convention to make the first parameter an error object (usually null when there is no error) and the rest are the results of the function.
-CalendarManager.findEvents((error, events) => {
+CalendarManager.findEvents((error, events) => {
if (error) {
console.error(error);
} else {
@@ -233,7 +233,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
var events = await CalendarManager.findEvents();
this.setState({events});
- } catch (e) {
+ } catch (e) {
console.error(e);
}
}
@@ -366,7 +366,7 @@ RCT_EXPORT_MODULE();
const subscription = calendarManagerEmitter.addListener(
'EventReminder',
- (reminder) => console.log(reminder.name)
+ (reminder) => console.log(reminder.name)
);
...
// Don't forget to unsubscribe, typically in componentWillUnmount
diff --git a/docs/0.10/native-modules-ios/index.html b/docs/0.10/native-modules-ios/index.html
index 77fac4643e4..ffda46d1fcc 100644
--- a/docs/0.10/native-modules-ios/index.html
+++ b/docs/0.10/native-modules-ios/index.html
@@ -201,7 +201,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
}
RCTResponseSenderBlock accepts only one argument - an array of parameters to pass to the JavaScript callback. In this case we use Node's convention to make the first parameter an error object (usually null when there is no error) and the rest are the results of the function.
-CalendarManager.findEvents((error, events) => {
+CalendarManager.findEvents((error, events) => {
if (error) {
console.error(error);
} else {
@@ -233,7 +233,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name d
var events = await CalendarManager.findEvents();
this.setState({events});
- } catch (e) {
+ } catch (e) {
console.error(e);
}
}
@@ -366,7 +366,7 @@ RCT_EXPORT_MODULE();
const subscription = calendarManagerEmitter.addListener(
'EventReminder',
- (reminder) => console.log(reminder.name)
+ (reminder) => console.log(reminder.name)
);
...
// Don't forget to unsubscribe, typically in componentWillUnmount
diff --git a/docs/0.10/navigator.html b/docs/0.10/navigator.html
index ee1d5ef06cb..2b497176848 100644
--- a/docs/0.10/navigator.html
+++ b/docs/0.10/navigator.html
@@ -80,7 +80,7 @@
return (
<Navigator
initialRoute={{title: 'Awesome Scene', index: 0}}
- renderScene={(route, navigator) => <Text>Hello {route.title}!</Text>}
+ renderScene={(route, navigator) => <Text>Hello {route.title}!</Text>}
style={{padding: 100}}
/>
);
@@ -99,7 +99,7 @@
<Navigator
initialRoute={routes[0]}
initialRouteStack={routes}
- renderScene={(route, navigator) =>
+ renderScene={(route, navigator) =>
<TouchableHighlight onPress={() => {
if (route.index === 0) {
navigator.push(routes[1]);
@@ -201,7 +201,7 @@
configureScene
Optional function where you can configure scene animations and gestures. Will be invoked with route and routeStack parameters, where route corresponds to the current scene being rendered by the Navigator and routeStack is the set of currently mounted routes that the navigator could transition to.
The function should return a scene configuration object.
-(route, routeStack) => Navigator.SceneConfigs.FloatFromRight;
+(route, routeStack) => Navigator.SceneConfigs.FloatFromRight;
Available scene configuration options are:
@@ -296,7 +296,7 @@
renderScene
Required function which renders the scene for a given route. Will be invoked with the route and the navigator object.
-
(route, navigator) => (
+(route, navigator) => (
<MySceneComponent title={route.title} navigator={navigator} />
);
diff --git a/docs/0.10/navigator/index.html b/docs/0.10/navigator/index.html
index ee1d5ef06cb..2b497176848 100644
--- a/docs/0.10/navigator/index.html
+++ b/docs/0.10/navigator/index.html
@@ -80,7 +80,7 @@
return (
<Navigator
initialRoute={{title: 'Awesome Scene', index: 0}}
- renderScene={(route, navigator) => <Text>Hello {route.title}!</Text>}
+ renderScene={(route, navigator) => <Text>Hello {route.title}!</Text>}
style={{padding: 100}}
/>
);
@@ -99,7 +99,7 @@
<Navigator
initialRoute={routes[0]}
initialRouteStack={routes}
- renderScene={(route, navigator) =>
+ renderScene={(route, navigator) =>
<TouchableHighlight onPress={() => {
if (route.index === 0) {
navigator.push(routes[1]);
@@ -201,7 +201,7 @@
configureScene
Optional function where you can configure scene animations and gestures. Will be invoked with route and routeStack parameters, where route corresponds to the current scene being rendered by the Navigator and routeStack is the set of currently mounted routes that the navigator could transition to.
The function should return a scene configuration object.
-(route, routeStack) => Navigator.SceneConfigs.FloatFromRight;
+(route, routeStack) => Navigator.SceneConfigs.FloatFromRight;
Available scene configuration options are:
@@ -296,7 +296,7 @@
renderScene
Required function which renders the scene for a given route. Will be invoked with the route and the navigator object.
-
(route, navigator) => (
+(route, navigator) => (
<MySceneComponent title={route.title} navigator={navigator} />
);
diff --git a/docs/0.10/network.html b/docs/0.10/network.html
index 72047123917..2cd1941d5f3 100644
--- a/docs/0.10/network.html
+++ b/docs/0.10/network.html
@@ -96,11 +96,11 @@
Networking is an inherently asynchronous operation. Fetch methods will return a Promise that makes it straightforward to write code that works in an asynchronous manner:
function getMoviesFromApiAsync() {
return fetch('https://facebook.github.io/react-native/movies.json')
- .then((response) => response.json())
- .then((responseJson) => {
+ .then((response) => response.json())
+ .then((responseJson) => {
return responseJson.movies;
})
- .catch((error) => {
+ .catch((error) => {
console.error(error);
});
}
@@ -113,7 +113,7 @@
);
let responseJson = await response.json();
return responseJson.movies;
- } catch (error) {
+ } catch (error) {
console.error(error);
}
}
@@ -191,7 +191,7 @@
Using Other Networking Libraries
The XMLHttpRequest API is built in to React Native. This means that you can use third party libraries such as frisbee or axios that depend on it, or you can use the XMLHttpRequest API directly if you prefer.
var request = new XMLHttpRequest();
-request.onreadystatechange = (e) => {
+request.onreadystatechange = (e) => {
if (request.readyState !== 4) {
return;
}
@@ -218,17 +218,17 @@ ws..send('something'); // send a message
};
-ws.onmessage = (e) => {
+ws.onmessage = (e) => {
// a message was received
console.log(e.data);
};
-ws.onerror = (e) => {
+ws.onerror = (e) => {
// an error occurred
console.log(e.message);
};
-ws.onclose = (e) => {
+ws.onclose = (e) => {
// connection closed
console.log(e.code, e.reason);
};
diff --git a/docs/0.10/network/index.html b/docs/0.10/network/index.html
index 72047123917..2cd1941d5f3 100644
--- a/docs/0.10/network/index.html
+++ b/docs/0.10/network/index.html
@@ -96,11 +96,11 @@
Networking is an inherently asynchronous operation. Fetch methods will return a Promise that makes it straightforward to write code that works in an asynchronous manner:
function getMoviesFromApiAsync() {
return fetch('https://facebook.github.io/react-native/movies.json')
- .then((response) => response.json())
- .then((responseJson) => {
+ .then((response) => response.json())
+ .then((responseJson) => {
return responseJson.movies;
})
- .catch((error) => {
+ .catch((error) => {
console.error(error);
});
}
@@ -113,7 +113,7 @@
);
let responseJson = await response.json();
return responseJson.movies;
- } catch (error) {
+ } catch (error) {
console.error(error);
}
}
@@ -191,7 +191,7 @@
Using Other Networking Libraries
The XMLHttpRequest API is built in to React Native. This means that you can use third party libraries such as frisbee or axios that depend on it, or you can use the XMLHttpRequest API directly if you prefer.
var request = new XMLHttpRequest();
-request.onreadystatechange = (e) => {
+request.onreadystatechange = (e) => {
if (request.readyState !== 4) {
return;
}
@@ -218,17 +218,17 @@ ws..send('something'); // send a message
};
-ws.onmessage = (e) => {
+ws.onmessage = (e) => {
// a message was received
console.log(e.data);
};
-ws.onerror = (e) => {
+ws.onerror = (e) => {
// an error occurred
console.log(e.message);
};
-ws.onclose = (e) => {
+ws.onclose = (e) => {
// connection closed
console.log(e.code, e.reason);
};
diff --git a/docs/0.10/permissionsandroid.html b/docs/0.10/permissionsandroid.html
index b1af42c9d0b..792869e6460 100644
--- a/docs/0.10/permissionsandroid.html
+++ b/docs/0.10/permissionsandroid.html
@@ -44,7 +44,7 @@
} else {
console.log('Camera permission denied');
}
- } catch (err) {
+ } catch (err) {
console.warn(err);
}
}
diff --git a/docs/0.10/permissionsandroid/index.html b/docs/0.10/permissionsandroid/index.html
index b1af42c9d0b..792869e6460 100644
--- a/docs/0.10/permissionsandroid/index.html
+++ b/docs/0.10/permissionsandroid/index.html
@@ -44,7 +44,7 @@
} else {
console.log('Camera permission denied');
}
- } catch (err) {
+ } catch (err) {
console.warn(err);
}
}
diff --git a/docs/0.10/platform-specific-code.html b/docs/0.10/platform-specific-code.html
index 276cb3211f8..b69e62f83a0 100644
--- a/docs/0.10/platform-specific-code.html
+++ b/docs/0.10/platform-specific-code.html
@@ -106,8 +106,8 @@
This will result in a container having flex: 1 on both platforms, a red background color on iOS, and a blue background color on Android.
Since it accepts any value, you can also use it to return platform specific component, like below:
const Component = Platform.select({
- ios: () => require('ComponentIOS'),
- android: () => require('ComponentAndroid'),
+ ios: () => require('ComponentIOS'),
+ android: () => require('ComponentAndroid'),
})();
<Component />;
diff --git a/docs/0.10/platform-specific-code/index.html b/docs/0.10/platform-specific-code/index.html
index 276cb3211f8..b69e62f83a0 100644
--- a/docs/0.10/platform-specific-code/index.html
+++ b/docs/0.10/platform-specific-code/index.html
@@ -106,8 +106,8 @@
This will result in a container having flex: 1 on both platforms, a red background color on iOS, and a blue background color on Android.
Since it accepts any value, you can also use it to return platform specific component, like below:
const Component = Platform.select({
- ios: () => require('ComponentIOS'),
- android: () => require('ComponentAndroid'),
+ ios: () => require('ComponentIOS'),
+ android: () => require('ComponentAndroid'),
})();
<Component />;
diff --git a/docs/0.10/refreshcontrol.html b/docs/0.10/refreshcontrol.html
index 0e46f88d46f..186a30ac260 100644
--- a/docs/0.10/refreshcontrol.html
+++ b/docs/0.10/refreshcontrol.html
@@ -17,7 +17,7 @@
