diff --git a/css/main.css b/css/main.css
index d07a6b3bbd2..3e2d92f173a 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,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:#000}a:hover{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 #000;border-radius:3px;color:#000;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:#000;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:#000;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:#000;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:#000;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:#000;color:#fff;font-size:14px;font-weight:400}.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight{background-color:#000;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:#000}.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:grey;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:#000;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:#000}.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:#000;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:#000;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:#000;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:#000}.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:#000;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 #000}.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}.blog .wrapper{max-width:1200px}.blog h1 a{-webkit-transition:color .25s ease-in-out;transition:color .25s ease-in-out}.blog h1 a:hover{color:#6d6d6d;-webkit-transition:none;transition:none}.blogContainer .postHeader .authorBlock{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;flex-direction:row-reverse;-webkit-box-pack:end;justify-content:flex-end}.blogContainer .postHeader .post-authorName{color:#6d6d6d;font-size:16px;margin-left:10px;margin-right:0;font-weight:500;line-height:1.5}.blogContainer .postHeader .post-authorName a{color:#1a1a1a;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.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}.docs-prevnext{background-color:#282c34;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}@media only screen and (min-width:1024px){.docs-prevnext{margin:0 -9999px 0 -3rem;padding:2rem 9999px 2rem 3rem}}@media only screen and (max-width:1023px){.docs-prevnext{margin:0 -2rem;padding:3rem 2rem}}@media only screen and (max-width:480px){.docs-prevnext{padding:1rem 2rem;display:-webkit-box;display:flex}.button.docs-next,.button.docs-prev{font-size:14px}}.button.docs-next,.button.docs-prev{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;line-height:1.5;max-width:45%;font-size:1.25rem}.button.docs-next:hover,.button.docs-prev:hover{color:#61dafb}.button.docs-prev{margin-right:auto}.button.docs-next{margin-left:auto}.docs-next span:first-child{text-align:right}.docs-prev:before{content:"‹";font-size:150%;margin-right:8px;margin-bottom:4px}.docs-next:after{content:"›";font-size:150%;margin-left:8px;margin-bottom:4px}.button:hover{background:transparent}.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{border:1px solid #b0b0b0;border-collapse:collapse;display:table;margin:20px 0;width:80%}table thead tr{background:#ddd}table tbody{display:table-row-group}table tr{display:table-row}table tbody tr:nth-of-type(odd){background:#fff}table tbody tr:nth-of-type(2n){background:#f7f7f7}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.nav-footer{background-color:#282c34er}@media only screen and (min-width:741px){.nav-footer .sitemap{display:grid;grid-template-columns:1fr 1.33fr 1fr;justify-items:center;max-width:900px}}.nav-footer .sitemap h5,.nav-footer .sitemap h5 a{color:#999;text-transform:uppercase;margin:0}.nav-footer .sitemap a{color:#fff;margin:2px 0;padding:3px 0}.nav-footer .sitemap a:hover{color:#61dafb}footer.nav-footer .nav-home img{height:auto;width:34px}.nav-footer .fbOpenSource{opacity:.5}footer.nav-footer .copyright{color:#999}.fixedHeaderContainer{padding:0;background-color:#20232a;height:60px}.fixedHeaderContainer header img{height:75%}.fixedHeaderContainer header a{margin:13px 0}.fixedHeaderContainer header>a:first-child{width:160px}.fixedHeaderContainer header h3{font-size:14px;margin-left:8px;text-decoration:none;font-weight:400;-webkit-transition:color .15s ease-out;transition:color .15s ease-out}.fixedHeaderContainer header h3:hover{color:#61dafb;-webkit-transition:none;transition:none}li.navSearchWrapper{font-size:16px}.fixedHeaderContainer header .headerTitleWithLogo{font-weight:500;font-size:1.25rem;color:#61dafb}@media only screen and (max-width:480px){.headerWrapper.wrapper{padding:0 10px}.fixedHeaderContainer header>a:first-child{width:140px}.fixedHeaderContainer header .headerTitleWithLogo{display:initial!important;font-size:1rem}}@media only screen and (max-width:1023px){.navPusher{padding-top:110px}ul.nav-site.nav-site-internal{margin-top:60px}.navigationSlider .slidingNav ul{background-color:#373940}.navigationSlider .slidingNav ul li a{background-color:transparent;-webkit-transition:none;transition:none}.navigationSlider .slidingNav ul li>a:hover{background-color:transparent;color:#61dafb}.navigationSlider .slidingNav ul li>a:focus{background-color:transparent}.navigationSlider .slidingNav ul li:not(.reactNavSearchWrapper){position:relative}.navigationSlider .slidingNav ul li.siteNavGroupActive a,.navigationSlider .slidingNav ul li.siteNavItemActive a{color:#61dafb;background-color:transparent}.navigationSlider .slidingNav ul li.siteNavGroupActive:after,.navigationSlider .slidingNav ul li.siteNavItemActive:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:.25rem;background-color:#61dafb}.navigationSlider .slidingNav ul li:not(.reactNavSearchWrapper):focus-within{background-color:#373940}}@media only screen and (max-width:1024px){.reactNavSearchWrapper input#search_input_react{border-radius:.25rem;background-color:#282c34;height:30px}.reactNavSearchWrapper input#search_input_react:focus{background-color:#373940}}@media only screen and (min-width:1024px){.navPusher{padding-top:60px}.navigationSlider .slidingNav ul li:not(.reactNavSearchWrapper){position:relative;padding:0;height:60px}.navigationSlider .slidingNav ul li:not(.reactNavSearchWrapper):focus-within{background-color:#373940}.navigationSlider .slidingNav ul li.siteNavGroupActive:after,.navigationSlider .slidingNav ul li.siteNavItemActive:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:.25rem;background-color:#61dafb}.navigationSlider .slidingNav ul li a{color:#fff;background-color:transparent!important;-webkit-transition:color .15s ease-out;transition:color .15s ease-out;height:60px;padding:0 1.5rem}.navigationSlider .slidingNav ul li a:hover{color:#61dafb;-webkit-transition:none;transition:none}.navigationSlider .slidingNav ul li.siteNavGroupActive a,.navigationSlider .slidingNav ul li.siteNavItemActive a{color:#61dafb}}.reactNavSearchWrapper{box-sizing:initial}input#search_input_react{width:220px;background-color:#282c34;border-radius:.25rem;-webkit-transition:background-color .15s ease-in-out;transition:background-color .15s ease-in-out}input#search_input_react:focus{background-color:#373940}.HelpPage .mainContainer{padding-top:0}@media only screen and (max-width:480px){.HelpPage iframe{max-width:100%}}.ActionButton{padding:.75rem 1.5rem;text-align:center;font-size:1.25rem;font-weight:400;text-decoration:none!important;border-bottom:none;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;max-width:50%}.ActionButton.primary{color:#282c34;background-color:#61dafb}.ActionButton.primary:hover{color:#000;background-color:#fff}.ActionButton.secondary{background:none;color:#61dafb}.ActionButton.secondary:after{content:"›";font-size:24px;margin-left:5px}.ActionButton.secondary:hover{color:#fff}.AppList{display:grid;padding:0;grid-template-columns:1fr 1fr 1fr 1fr 1fr;grid-gap:15px}.AppList .item{list-style:none}.Community .content{max-width:900px;margin:0 auto;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}@media only screen and (max-width:480px){.Community .Heading{width:100%;padding:0 1rem;margin-bottom:1.5rem}}@media only screen and (min-width:481px) and (max-width:960px){.Community .Heading{width:100%;padding:0 4rem;margin-bottom:1.5rem}.Community .AppList{width:500px;margin:2rem auto}}@media only screen and (min-width:961px){.Community .column.first{border-right:1px solid #ececec}}.Community .firstP{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.Community .firstP span{margin-left:20px;font-size:17px}.Community .last{margin-top:10px}.Community .Heading{color:#000}@media only screen and (max-width:960px){.CrossPlatform .TwoColumns{grid-gap:2rem}}@media only screen and (min-width:481px) and (max-width:960px){.CrossPlatform .column.last{width:75%;margin:0 auto}}.FastRefresh{margin-bottom:-50px}.FastRefresh .column.last{margin-bottom:-6px}@media only screen and (max-width:480px){.FastRefresh .column.last{padding:0}.FastRefresh video{width:100%}}@media only screen and (min-width:481px) and (max-width:960px){.FastRefresh .TwoColumns{grid-gap:2rem}.FastRefresh .column.last{width:100%;padding:0}.FastRefresh video{width:100%}}@media only screen and (min-width:961px){.FastRefresh .TwoColumns{grid-template-columns:2fr 1fr}.FastRefresh .last{margin-top:-50px}.FastRefresh video{height:340px}}.GetStarted,.GetStarted p{color:#fff}.GetStarted .Heading{color:#61dafb;text-align:center}.GetStarted .content{max-width:900px;margin:0 auto;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.GetStarted .steps{align-self:center}.GetStarted .steps li{font-size:28px}.GetStarted .terminal{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;border-left:1px solid grey;border-right:1px solid grey;border-top:1px solid grey;border-top-left-radius:10px;border-top-right-radius:10px;padding:30px 30px 0;width:600px;position:relative}.GetStarted .terminal:before{content:"○ ○ ○";color:grey;font-size:16px;position:absolute;left:15px;top:5px}.GetStarted code{color:#fff!important;font-size:18px;position:relative}.GetStarted code:first-child:before{content:">";position:absolute;left:-13px;color:grey}@media screen and (max-width:760px){.GetStarted .content{width:80%}.GetStarted .steps li{margin-left:-2rem}.GetStarted .terminal{width:100%}}.HeaderHero{padding-top:20px}.HeaderHero .TwoColumns .column{max-width:none}.HeaderHero .socialLinks{display:-webkit-box;display:flex;-webkit-box-pack:end;justify-content:flex-end;max-width:1200px;margin:-10px auto 0}.HeaderHero .socialLinks *{margin-right:1rem}.HeaderHero .TwoColumns{-webkit-box-align:center;align-items:center}.HeaderHero .title{font-size:84px;color:#61dafb;line-height:1;margin-top:0;margin-bottom:20px;font-weight:500}.HeaderHero .tagline{font-size:36px;line-height:1.3;color:#fff;font-weight:500}.HeaderHero .buttons{margin-top:40px}.HeaderHero .image{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}@media only screen and (min-width:961px){.HeaderHero .TwoColumns{grid-template-columns:3fr 1fr}.HeaderHero .TwoColumns .column.left{padding-right:0}.HeaderHero .TwoColumns .column.right{padding-left:0}}@media only screen and (min-width:481px) and (max-width:960px){.HeaderHero .column.first{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center}.HeaderHero .column.last{text-align:center}}@media only screen and (max-width:760px){.HeaderHero .title{font-size:60px}.HeaderHero .tagline{font-size:30px}.HeaderHero .socialLinks{margin-top:-2rem}}.Heading{font-size:25px;color:#1a1a1a;line-height:1.2;margin-top:0;margin-bottom:20px;font-weight:700}.HomePage{width:100%;overflow-x:hidden}.LogoAnimation{width:350px}@media only screen and (max-width:760px){.LogoAnimation{width:100%}}.LogoAnimation .screen{-webkit-transition:all .85s ease-in-out;transition:all .85s ease-in-out;stroke-opacity:0;-webkit-transform:scale(2.25,1.33) rotate(0);transform:scale(2.25,1.33) rotate(0);stroke-width:5px}.LogoAnimation .background{fill:#282c34}.LogoAnimation .logoInner{-webkit-transform:scale(1);transform:scale(1);-webkit-transition:all .85s ease-in-out;transition:all .85s ease-in-out;-webkit-transition-delay:50ms;transition-delay:50ms}.LogoAnimation.mobile2 .logoInner,.LogoAnimation.mobile .logoInner{-webkit-transform:scale(.4);transform:scale(.4)}.LogoAnimation.desktop .logoInner{-webkit-transform:scale(.5);transform:scale(.5)}.LogoAnimation.laptop .logoInner{-webkit-transform:scale(.35);transform:scale(.35)}.LogoAnimation.full .screen{stroke-opacity:0;-webkit-transform:scale(2.25,1.33) rotate(0);transform:scale(2.25,1.33) rotate(0);opacity:1;-webkit-transition:none;transition:none}.LogoAnimation.mobile .screen{stroke-opacity:1;-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0);opacity:1;stroke-width:5px}.LogoAnimation.desktop .screen{stroke-opacity:1;-webkit-transform:scale(1.125,1.1) rotate(-90deg);transform:scale(1.125,1.1) rotate(-90deg);opacity:1;stroke-width:8px}.LogoAnimation.laptop .screen{stroke-opacity:1;-webkit-transform:scale(.83) rotate(-90deg);transform:scale(.83) rotate(-90deg);opacity:1;stroke-width:5px}.LogoAnimation.mobile2 .screen{stroke-opacity:1;opacity:1;stroke-width:5px;-webkit-transform:scale(1) rotate(-180deg);transform:scale(1) rotate(-180deg)}.LogoAnimation.full2 .screen{stroke-opacity:0;-webkit-transform:scale(2.25,1.33) rotate(-180deg);transform:scale(2.25,1.33) rotate(-180deg)}.LogoAnimation:not(.mobile):not(.mobile2) .speaker{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}.LogoAnimation:not(.desktop) .stand,.LogoAnimation:not(.laptop) .base{-webkit-transform:scaleX(0);transform:scaleX(0)}.LogoAnimation .base,.LogoAnimation .speaker,.LogoAnimation .stand{-webkit-transition:all .85s ease-in-out;transition:all .85s ease-in-out}.NativeApps{overflow:hidden}@media only screen and (max-width:960px){.NativeApps .column.last{max-height:300px}}@media only screen and (min-width:481px) and (max-width:960px){.NativeApps .column.last{width:66.7%;margin:0 auto}}@media only screen and (min-width:961px){.NativeApps{max-height:400px}.NativeApps .column.left{margin-top:-25px}}.NativeCode .column.last{margin-bottom:-50px}.NativeCode pre{margin:0}.NativeCode code{border-radius:0}@media only screen and (max-width:480px){.NativeCode .column.last{width:100%;padding:0;overflow-x:hidden}.NativeCode code{font-size:10px;padding:1.25rem}}@media screen and (min-width:481px) and (max-width:960px){.NativeCode .TwoColumns{grid-gap:2rem}.NativeCode .column.last{width:100%;padding:0;background-color:#282c34;height:28rem;overflow-y:scroll}.NativeCode code{width:30rem;margin:0 auto;padding:1.25rem 0}}@media only screen and (min-width:961px){.NativeCode .TwoColumns .column.right{margin-top:-50px;padding-left:0}.NativeCode .column.right code{margin-right:-9999px;padding:50px 1.5rem;height:450px}}.NativeDevelopment{overflow-y:hidden}.NativeDevelopment .dissection{position:relative;margin-top:-50px}.NativeDevelopment .dissection img{position:absolute;left:0;top:0}@media only screen and (max-width:960px){.NativeDevelopment .TwoColumns{grid-gap:2rem}}@media only screen and (max-width:480px){.NativeDevelopment .dissection{height:350px}}@media only screen and (min-width:481px) and (max-width:960px){.NativeDevelopment .dissection{height:450px}}@media only screen and (min-width:961px){.NativeDevelopment .dissection{height:300px}}.Section{width:100%;padding-top:50px;padding-bottom:50px}.Section+.Section{border-top:1px solid #ececec}.Section.light{background-color:#fff}.Section.tint{background-color:#f7f7f7}.Section.dark{background-color:#282c34}@media only screen and (max-width:960px){.Talks .TwoColumns{grid-gap:2rem}.Talks .column.last{width:100%;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center}.Talks .vidWrapper{position:relative;width:100%;padding-top:56.25%}.Talks iframe{position:absolute;top:0;left:0;width:100%;height:100%}}@media only screen and (min-width:961px){.Talks .TwoColumns{grid-template-columns:1fr 2fr}.Talks iframe{width:560px;height:315px}}.TwoColumns{display:grid}.TwoColumns .column{width:100%}.TwoColumns .column.first{grid-area:first}.TwoColumns .column.last{grid-area:last}@media only screen and (min-width:961px){.TwoColumns{max-width:900px;margin:0 auto;grid-template-columns:repeat(2,1fr);grid-template-areas:"first last"}.TwoColumns.reverse{grid-template-areas:"last first"}.TwoColumns .column{max-width:450px}.TwoColumns .column.left{padding-right:50px}.TwoColumns .column.right{padding-left:50px}}@media only screen and (max-width:960px){.TwoColumns,.TwoColumns.reverse{grid-template-columns:1fr;grid-template-areas:"first" "last"}.TwoColumns .column{padding:0 4rem}}@media only screen and (max-width:480px){.TwoColumns .column{padding:0 1.25rem}}* :focus:not(.focus-visible){outline:none}.mainContainer,body{background-color:#fff}@media only screen and (max-width:1023px){.mainContainer{padding-top:3rem;padding-bottom:0}.docMainWrapper{overflow-x:hidden}.mainContainer .post{margin-bottom:2rem}}@media only screen and (min-width:1024px){.mainContainer{margin:0;padding:0}.mainContainer .wrapper{margin-left:3rem}.mainContainer .post{margin:3rem 0}.docsNavContainer{width:240px}.container{max-width:900px}.docMainWrapper>:last-child{margin-right:20px}}.mainContainer h1,.mainContainer h2,.mainContainer h3,.mainContainer h4,.mainContainer h5,.mainContainer h6{color:#1a1a1a}.mainContainer h1{color:#282c34;font-weight:700;font-size:60px;line-height:65px;margin-top:10px;margin-bottom:30px}@media only screen and (max-width:960px){.mainContainer h1.postHeaderTitle{font-size:40px;margin-bottom:1rem;line-height:1.25}}li a,p a{background-color:rgba(187,239,253,.3);border-bottom:1px solid rgba(0,0,0,.2)}li a:hover,p a:hover{background-color:#bbeffd;border-bottom-color:#1a1a1a}a code{background:none}.button{border:none;font-size:1.5rem;text-transform:none;-webkit-transition:all 0s;transition:all 0s;padding:0;color:#fff}.button.edit-page-link{color:#6d6d6d;font-size:1.25rem;margin-top:1rem}.arrow-next,.arrow-prev{display:none}.hash-link:focus{opacity:1;-webkit-transition:none;transition:none}.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;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.mainContainer .component:hover{-webkit-transform:scale(1.03);transform:scale(1.03)}.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 .wrapper h2{font-size:35px;font-weight:700}.container .wrapper h3{font-size:25px;font-weight:700}.container .wrapper .hljs{margin:14px 0;border-radius:10px}.pageContainer .container{margin:40px auto}p{font-size:17px;color:#1a1a1a;line-height:1.7}li{font-size:18px}.prose h1{padding:0}.prose{max-width:800px}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%}}html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:400;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{overflow-x:hidden;position:relative}*{margin:0;padding:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}a{color:inherit;text-decoration:none}img{display:inline-block;vertical-align:top}code,pre{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.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}.hljs{line-height:20px;background-color:#282c34;color:#fff}.hljs+.hljs{margin-top:10px}.token.attr-name,.token.keyword{color:#c5a5c5}.token.attr-value,.token.regex,.token.string{color:#8dc891}.token.constant,.token.number,.token.symbol{color:#5a9bcf}.token.boolean{color:#ff8b50}.token.class-name{color:#fac863}.token.function{color:#79b6f2}.token.operator,.token.tag{color:#fc929e}.toggler{margin-bottom:1em}.toggler li{display:inline-block;top:1px;padding:10px;margin:0 2px;border-bottom-color:transparent;border-radius:3px 3px 0 0;font-size:.99em}.toggler button,.toggler li{position:relative;color:#1a1a1a;background-color:transparent;cursor:pointer}.toggler button:hover,.toggler li:hover{color:#6d6d6d}.toggler button.active,.toggler li.active{font-weight:700}.toggler button:after,.toggler li:after{content:"";position:absolute;bottom:1px;left:0;height:3px;width:100%;background-color:#61dafb;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transition:-webkit-transform .2s ease-out;transition:-webkit-transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out, -webkit-transform .2s ease-out}.toggler button.active:after,.toggler li.active:after{-webkit-transform:scaleX(1);transform:scaleX(1)}.toggler li:first-child{margin-left:0}.toggler li:last-child{margin-right:0}.toggler ul{width:100%;display:inline-block;list-style-type:none;padding:0;margin:0;border-bottom:1px solid #6d6d6d;cursor:default}@media screen and (max-width:960px){.toggler li,.toggler li:first-child,.toggler li:last-child{border-bottom-color:#6d6d6d;border-radius:3px;margin:2px 0}.toggler ul{border-bottom:0}}.toggler button{display:inline-block;padding:10px 5px;margin:2px;border:none;text-decoration:none;font-size:16px}block{display:none}block.active{display:block}.toggler span:first-child{font-weight:700}@media only screen and (max-width:480px){.toggler span:first-child{display:block}}.docsNavContainer .toc .navBreadcrumb{z-index:9999;background-color:#f7f7f7;border-bottom:2px solid #ececec}.toc .toggleNav .navBreadcrumb h2{font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.08em}.toc .toggleNav .navBreadcrumb i{display:none}.navBreadcrumb a,.navBreadcrumb span{color:#6d6d6d}.collapsible .arrow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.collapsible .arrow.rotate{-webkit-transform:rotate(0);transform:rotate(0)}@media only screen and (min-width:736px){.docsNavContainer{width:100%}}.container.docsNavContainer{overflow:visible;-webkit-box-flex:0;flex:0 0 280px;margin-right:0}.toc{height:100%;border-right:1px solid #ececec;margin-left:-9999px;padding-left:9999px;overflow-y:auto;background-color:#f7f7f7}.toc .toggleNav .navGroup .navGroupCategoryTitle{color:#6d6d6d;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.toc .toggleNav .navGroup .navGroupCategoryTitle.collapsible:hover{color:#1a1a1a}.toc .toggleNav ul{padding:0 10px 0 0}.toc .toggleNav ul li a{color:#1a1a1a;background-color:transparent;font-size:16px}.toc .toggleNav ul li a:hover{color:#6d6d6d;-webkit-transition:none;transition:none}.toc .toggleNav ul li.navListItemActive a{font-weight:700}.toc .toggleNav ul li{position:relative}.toc .toggleNav ul li.navListItemActive:before{content:"";background-color:#61dafb;position:absolute;width:5px;top:2px;left:-20px;bottom:2px}@media only screen and (min-width:1024px){.toc{padding-top:2rem}}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:8px}table.versions td a{text-decoration:underline}table.versions td a:hover{text-decoration:none}
\ 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:#000}a:hover{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 #000;border-radius:3px;color:#000;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:#000;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:#000;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:#000;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:#000;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:#000;color:#fff;font-size:14px;font-weight:400}.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight{background-color:#000;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:#000}.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:grey;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:#000;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:#000}.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:#000;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:#000;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:#000;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:#000}.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:#000;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 #000}.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}.blog .wrapper{max-width:1200px}.blog h1 a{-webkit-transition:color .25s ease-in-out;transition:color .25s ease-in-out}.blog h1 a:hover{color:#6d6d6d;-webkit-transition:none;transition:none}.blogContainer .postHeader .authorBlock{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;flex-direction:row-reverse;-webkit-box-pack:end;justify-content:flex-end}.blogContainer .postHeader .post-authorName{color:#6d6d6d;font-size:16px;margin-left:10px;margin-right:0;font-weight:500;line-height:1.5}.blogContainer .postHeader .post-authorName a{color:#1a1a1a;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.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}.docs-prevnext{background-color:#282c34;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}@media only screen and (min-width:1024px){.docs-prevnext{margin:0 -9999px 0 -3rem;padding:2rem 9999px 2rem 3rem}}@media only screen and (max-width:1023px){.docs-prevnext{margin:0 -2rem;padding:3rem 2rem}}@media only screen and (max-width:480px){.docs-prevnext{padding:1rem 2rem;display:-webkit-box;display:flex}.button.docs-next,.button.docs-prev{font-size:14px}}.button.docs-next,.button.docs-prev{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;line-height:1.5;max-width:45%;font-size:1.25rem}.button.docs-next:hover,.button.docs-prev:hover{color:#61dafb}.button.docs-prev{margin-right:auto}.button.docs-next{margin-left:auto}.docs-next span:first-child{text-align:right}.docs-prev:before{content:"‹";font-size:150%;margin-right:8px;margin-bottom:4px}.docs-next:after{content:"›";font-size:150%;margin-left:8px;margin-bottom:4px}.button:hover{background:transparent}.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{border:1px solid #b0b0b0;border-collapse:collapse;display:table;margin:20px 0;width:80%}table thead tr{background:#ddd}table tbody{display:table-row-group}table tr{display:table-row}table tbody tr:nth-of-type(odd){background:#fff}table tbody tr:nth-of-type(2n){background:#f7f7f7}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.nav-footer{background-color:#282c34er}@media only screen and (min-width:741px){.nav-footer .sitemap{display:grid;grid-template-columns:1fr 1.33fr 1fr;justify-items:center;max-width:900px}}.nav-footer .sitemap h5,.nav-footer .sitemap h5 a{color:#999;text-transform:uppercase;margin:0}.nav-footer .sitemap a{color:#fff;margin:2px 0;padding:3px 0}.nav-footer .sitemap a:hover{color:#61dafb}footer.nav-footer .nav-home img{height:auto;width:34px}.nav-footer .fbOpenSource{opacity:.5}footer.nav-footer .copyright{color:#999}.fixedHeaderContainer{padding:0;background-color:#20232a;height:60px}.fixedHeaderContainer header img{height:75%}.fixedHeaderContainer header a{margin:13px 0}.fixedHeaderContainer header>a:first-child{width:160px}.fixedHeaderContainer header h3{font-size:14px;margin-left:8px;text-decoration:none;font-weight:400;-webkit-transition:color .15s ease-out;transition:color .15s ease-out}.fixedHeaderContainer header h3:hover{color:#61dafb;-webkit-transition:none;transition:none}li.navSearchWrapper{font-size:16px}.fixedHeaderContainer header .headerTitleWithLogo{font-weight:500;font-size:1.25rem;color:#61dafb}@media only screen and (max-width:480px){.headerWrapper.wrapper{padding:0 10px}.fixedHeaderContainer header>a:first-child{width:140px}.fixedHeaderContainer header .headerTitleWithLogo{display:initial!important;font-size:1rem}}@media only screen and (max-width:1023px){.navPusher{padding-top:110px}ul.nav-site.nav-site-internal{margin-top:60px}.navigationSlider .slidingNav ul{background-color:#373940}.navigationSlider .slidingNav ul li a{background-color:transparent;-webkit-transition:none;transition:none}.navigationSlider .slidingNav ul li>a:hover{background-color:transparent;color:#61dafb}.navigationSlider .slidingNav ul li>a:focus{background-color:transparent}.navigationSlider .slidingNav ul li:not(.reactNavSearchWrapper){position:relative}.navigationSlider .slidingNav ul li.siteNavGroupActive a,.navigationSlider .slidingNav ul li.siteNavItemActive a{color:#61dafb;background-color:transparent}.navigationSlider .slidingNav ul li.siteNavGroupActive:after,.navigationSlider .slidingNav ul li.siteNavItemActive:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:.25rem;background-color:#61dafb}.navigationSlider .slidingNav ul li:not(.reactNavSearchWrapper):focus-within{background-color:#373940}}@media only screen and (max-width:1024px){.reactNavSearchWrapper input#search_input_react{border-radius:.25rem;background-color:#282c34;height:30px}.reactNavSearchWrapper input#search_input_react:focus{background-color:#373940}}@media only screen and (min-width:1024px){.navPusher{padding-top:60px}.navigationSlider .slidingNav ul li:not(.reactNavSearchWrapper){position:relative;padding:0;height:60px}.navigationSlider .slidingNav ul li:not(.reactNavSearchWrapper):focus-within{background-color:#373940}.navigationSlider .slidingNav ul li.siteNavGroupActive:after,.navigationSlider .slidingNav ul li.siteNavItemActive:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:.25rem;background-color:#61dafb}.navigationSlider .slidingNav ul li a{color:#fff;background-color:transparent!important;-webkit-transition:color .15s ease-out;transition:color .15s ease-out;height:60px;padding:0 1.5rem}.navigationSlider .slidingNav ul li a:hover{color:#61dafb;-webkit-transition:none;transition:none}.navigationSlider .slidingNav ul li.siteNavGroupActive a,.navigationSlider .slidingNav ul li.siteNavItemActive a{color:#61dafb}}.reactNavSearchWrapper{box-sizing:initial}input#search_input_react{width:220px;background-color:#282c34;border-radius:.25rem;-webkit-transition:background-color .15s ease-in-out;transition:background-color .15s ease-in-out}input#search_input_react:focus{background-color:#373940}.HelpPage .mainContainer{padding-top:0}@media only screen and (max-width:480px){.HelpPage iframe{max-width:100%}}.ActionButton{padding:.75rem 1.5rem;text-align:center;font-size:1.25rem;font-weight:400;text-decoration:none!important;border-bottom:none;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;max-width:50%}.ActionButton.primary{color:#282c34;background-color:#61dafb}.ActionButton.primary:hover{color:#000;background-color:#fff}.ActionButton.secondary{background:none;color:#61dafb}.ActionButton.secondary:after{content:"›";font-size:24px;margin-left:5px}.ActionButton.secondary:hover{color:#fff}.AppList{display:grid;padding:0;grid-template-columns:1fr 1fr 1fr 1fr 1fr;grid-gap:15px}.AppList .item{list-style:none}.Community .content{max-width:900px;margin:0 auto;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}@media only screen and (max-width:480px){.Community .Heading{width:100%;padding:0 1rem;margin-bottom:1.5rem}}@media only screen and (min-width:481px) and (max-width:960px){.Community .Heading{width:100%;padding:0 4rem;margin-bottom:1.5rem}.Community .AppList{width:500px;margin:2rem auto}}@media only screen and (min-width:961px){.Community .column.first{border-right:1px solid #ececec}}.Community .firstP{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.Community .firstP span{margin-left:20px;font-size:17px}.Community .last{margin-top:10px}.Community .Heading{color:#000}@media only screen and (max-width:960px){.CrossPlatform .TwoColumns{grid-gap:2rem}}@media only screen and (min-width:481px) and (max-width:960px){.CrossPlatform .column.last{width:75%;margin:0 auto}}.FastRefresh{margin-bottom:-50px}.FastRefresh .column.last{margin-bottom:-6px}@media only screen and (max-width:480px){.FastRefresh .column.last{padding:0}.FastRefresh video{width:100%}}@media only screen and (min-width:481px) and (max-width:960px){.FastRefresh .TwoColumns{grid-gap:2rem}.FastRefresh .column.last{width:100%;padding:0}.FastRefresh video{width:100%}}@media only screen and (min-width:961px){.FastRefresh .TwoColumns{grid-template-columns:2fr 1fr}.FastRefresh .last{margin-top:-50px}.FastRefresh video{height:340px}}.GetStarted,.GetStarted p{color:#fff}.GetStarted .Heading{color:#61dafb;text-align:center}.GetStarted .content{max-width:900px;margin:0 auto;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.GetStarted .steps{align-self:center}.GetStarted .steps li{font-size:28px}.GetStarted .terminal{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;border-left:1px solid grey;border-right:1px solid grey;border-top:1px solid grey;border-top-left-radius:10px;border-top-right-radius:10px;padding:30px 30px 0;width:600px;position:relative}.GetStarted .terminal:before{content:"○ ○ ○";color:grey;font-size:16px;position:absolute;left:15px;top:5px}.GetStarted code{color:#fff!important;font-size:18px;position:relative}.GetStarted code:first-child:before{content:">";position:absolute;left:-13px;color:grey}@media screen and (max-width:760px){.GetStarted .content{width:80%}.GetStarted .steps li{margin-left:-2rem}.GetStarted .terminal{width:100%}}.HeaderHero{padding-top:20px}.HeaderHero .TwoColumns .column{max-width:none}.HeaderHero .socialLinks{display:-webkit-box;display:flex;-webkit-box-pack:end;justify-content:flex-end;max-width:1200px;margin:-10px auto 0}.HeaderHero .socialLinks *{margin-right:1rem}.HeaderHero .TwoColumns{-webkit-box-align:center;align-items:center}.HeaderHero .title{font-size:84px;color:#61dafb;line-height:1;margin-top:0;margin-bottom:20px;font-weight:500}.HeaderHero .tagline{font-size:36px;line-height:1.3;color:#fff;font-weight:500}.HeaderHero .buttons{margin-top:40px}.HeaderHero .image{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}@media only screen and (min-width:961px){.HeaderHero .TwoColumns{grid-template-columns:3fr 1fr}.HeaderHero .TwoColumns .column.left{padding-right:0}.HeaderHero .TwoColumns .column.right{padding-left:0}}@media only screen and (min-width:481px) and (max-width:960px){.HeaderHero .column.first{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center}.HeaderHero .column.last{text-align:center}}@media only screen and (max-width:760px){.HeaderHero .title{font-size:60px}.HeaderHero .tagline{font-size:30px}.HeaderHero .socialLinks{margin-top:-2rem}}.Heading{font-size:25px;color:#1a1a1a;line-height:1.2;margin-top:0;margin-bottom:20px;font-weight:700}.HomePage{width:100%;overflow-x:hidden}.LogoAnimation{width:350px}@media only screen and (max-width:760px){.LogoAnimation{width:100%}}.LogoAnimation .screen{-webkit-transition:all .85s ease-in-out;transition:all .85s ease-in-out;stroke-opacity:0;-webkit-transform:scale(2.25,1.33) rotate(0);transform:scale(2.25,1.33) rotate(0);stroke-width:5px}.LogoAnimation .background{fill:#282c34}.LogoAnimation .logoInner{-webkit-transform:scale(1);transform:scale(1);-webkit-transition:all .85s ease-in-out;transition:all .85s ease-in-out;-webkit-transition-delay:50ms;transition-delay:50ms}.LogoAnimation.mobile2 .logoInner,.LogoAnimation.mobile .logoInner{-webkit-transform:scale(.4);transform:scale(.4)}.LogoAnimation.desktop .logoInner{-webkit-transform:scale(.5);transform:scale(.5)}.LogoAnimation.laptop .logoInner{-webkit-transform:scale(.35);transform:scale(.35)}.LogoAnimation.full .screen{stroke-opacity:0;-webkit-transform:scale(2.25,1.33) rotate(0);transform:scale(2.25,1.33) rotate(0);opacity:1;-webkit-transition:none;transition:none}.LogoAnimation.mobile .screen{stroke-opacity:1;-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0);opacity:1;stroke-width:5px}.LogoAnimation.desktop .screen{stroke-opacity:1;-webkit-transform:scale(1.125,1.1) rotate(-90deg);transform:scale(1.125,1.1) rotate(-90deg);opacity:1;stroke-width:8px}.LogoAnimation.laptop .screen{stroke-opacity:1;-webkit-transform:scale(.83) rotate(-90deg);transform:scale(.83) rotate(-90deg);opacity:1;stroke-width:5px}.LogoAnimation.mobile2 .screen{stroke-opacity:1;opacity:1;stroke-width:5px;-webkit-transform:scale(1) rotate(-180deg);transform:scale(1) rotate(-180deg)}.LogoAnimation.full2 .screen{stroke-opacity:0;-webkit-transform:scale(2.25,1.33) rotate(-180deg);transform:scale(2.25,1.33) rotate(-180deg)}.LogoAnimation:not(.mobile):not(.mobile2) .speaker{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}.LogoAnimation:not(.desktop) .stand,.LogoAnimation:not(.laptop) .base{-webkit-transform:scaleX(0);transform:scaleX(0)}.LogoAnimation .base,.LogoAnimation .speaker,.LogoAnimation .stand{-webkit-transition:all .85s ease-in-out;transition:all .85s ease-in-out}.NativeApps{overflow:hidden}@media only screen and (max-width:960px){.NativeApps .column.last{max-height:300px}}@media only screen and (min-width:481px) and (max-width:960px){.NativeApps .column.last{width:66.7%;margin:0 auto}}@media only screen and (min-width:961px){.NativeApps{max-height:400px}.NativeApps .column.left{margin-top:-25px}}.NativeCode .column.last{margin-bottom:-50px}.NativeCode pre{margin:0}.NativeCode code{border-radius:0}@media only screen and (max-width:480px){.NativeCode .column.last{width:100%;padding:0;overflow-x:hidden}.NativeCode code{font-size:10px;padding:1.25rem}}@media screen and (min-width:481px) and (max-width:960px){.NativeCode .TwoColumns{grid-gap:2rem}.NativeCode .column.last{width:100%;padding:0;background-color:#282c34;height:28rem;overflow-y:scroll}.NativeCode code{width:30rem;margin:0 auto;padding:1.25rem 0}}@media only screen and (min-width:961px){.NativeCode .TwoColumns .column.right{margin-top:-50px;padding-left:0}.NativeCode .column.right code{margin-right:-9999px;padding:50px 1.5rem;height:450px}}.NativeDevelopment{overflow-y:hidden}.NativeDevelopment .dissection{position:relative;margin-top:-50px}.NativeDevelopment .dissection img{position:absolute;left:0;top:0}@media only screen and (max-width:960px){.NativeDevelopment .TwoColumns{grid-gap:2rem}}@media only screen and (max-width:480px){.NativeDevelopment .dissection{height:350px}}@media only screen and (min-width:481px) and (max-width:960px){.NativeDevelopment .dissection{height:450px}}@media only screen and (min-width:961px){.NativeDevelopment .dissection{height:300px}}.Section{width:100%;padding-top:50px;padding-bottom:50px}.Section+.Section{border-top:1px solid #ececec}.Section.light{background-color:#fff}.Section.tint{background-color:#f7f7f7}.Section.dark{background-color:#282c34}@media only screen and (max-width:960px){.Talks .TwoColumns{grid-gap:2rem}.Talks .column.last{width:100%;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center}.Talks .vidWrapper{position:relative;width:100%;padding-top:56.25%}.Talks iframe{position:absolute;top:0;left:0;width:100%;height:100%}}@media only screen and (min-width:961px){.Talks .TwoColumns{grid-template-columns:1fr 2fr}.Talks iframe{width:560px;height:315px}}.TwoColumns{display:grid}.TwoColumns .column{width:100%}.TwoColumns .column.first{grid-area:first}.TwoColumns .column.last{grid-area:last}@media only screen and (min-width:961px){.TwoColumns{max-width:900px;margin:0 auto;grid-template-columns:repeat(2,1fr);grid-template-areas:"first last"}.TwoColumns.reverse{grid-template-areas:"last first"}.TwoColumns .column{max-width:450px}.TwoColumns .column.left{padding-right:50px}.TwoColumns .column.right{padding-left:50px}}@media only screen and (max-width:960px){.TwoColumns,.TwoColumns.reverse{grid-template-columns:1fr;grid-template-areas:"first" "last"}.TwoColumns .column{padding:0 4rem}}@media only screen and (max-width:480px){.TwoColumns .column{padding:0 1.25rem}}* :focus:not(.focus-visible){outline:none}.mainContainer,body{background-color:#fff}@media only screen and (max-width:1023px){.mainContainer{padding-top:3rem;padding-bottom:0}.docMainWrapper{overflow-x:hidden}.mainContainer .post{margin-bottom:2rem}}@media only screen and (min-width:1024px){.mainContainer{margin:0;padding:0}.mainContainer .wrapper{margin-left:3rem}.mainContainer .post{margin:3rem 0}.docsNavContainer{width:240px}.container{max-width:900px}.docMainWrapper>:last-child{margin-right:20px}}.mainContainer h1,.mainContainer h2,.mainContainer h3,.mainContainer h4,.mainContainer h5,.mainContainer h6{color:#1a1a1a}.mainContainer h1{color:#282c34;font-weight:700;font-size:60px;line-height:65px;margin-top:10px;margin-bottom:30px}@media only screen and (max-width:960px){.mainContainer h1.postHeaderTitle{font-size:40px;margin-bottom:1rem;line-height:1.25}}li a,p a{background-color:rgba(187,239,253,.3);border-bottom:1px solid rgba(0,0,0,.2)}li a:hover,p a:hover{background-color:#bbeffd;border-bottom-color:#1a1a1a}a code{background:none}.button{border:none;font-size:1.5rem;text-transform:none;-webkit-transition:all 0s;transition:all 0s;padding:0;color:#fff}.button.edit-page-link{color:#6d6d6d;font-size:1.25rem;margin-top:1rem}.arrow-next,.arrow-prev{display:none}.hash-link:focus{opacity:1;-webkit-transition:none;transition:none}.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;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.mainContainer .component:hover{-webkit-transform:scale(1.03);transform:scale(1.03)}.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-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(2,1fr)}@media only screen and (min-width:1440px){.mainContainer .component-grid{grid-template-columns:repeat(3,1fr)}}.mainContainer .component{width:auto;height:auto;margin:0}}}.wrapper{max-width:1200px}.container .wrapper h2{font-size:35px;font-weight:700}.container .wrapper h3{font-size:25px;font-weight:700}.container .wrapper .hljs{margin:14px 0;border-radius:10px}.pageContainer .container{margin:40px auto}p{font-size:17px;color:#1a1a1a;line-height:1.7}li{font-size:18px}.prose h1{padding:0}.prose{max-width:800px}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%}}html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:400;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{overflow-x:hidden;position:relative}*{margin:0;padding:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}a{color:inherit;text-decoration:none}img{display:inline-block;vertical-align:top}code,pre{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.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}.hljs{line-height:20px;background-color:#282c34;color:#fff}.hljs+.hljs{margin-top:10px}.token.attr-name,.token.keyword{color:#c5a5c5}.token.attr-value,.token.regex,.token.string{color:#8dc891}.token.constant,.token.number,.token.symbol{color:#5a9bcf}.token.boolean{color:#ff8b50}.token.class-name{color:#fac863}.token.function{color:#79b6f2}.token.operator,.token.tag{color:#fc929e}.toggler{margin-bottom:1em}.toggler li{display:inline-block;top:1px;padding:10px;margin:0 2px;border-bottom-color:transparent;border-radius:3px 3px 0 0;font-size:.99em}.toggler button,.toggler li{position:relative;color:#1a1a1a;background-color:transparent;cursor:pointer}.toggler button:hover,.toggler li:hover{color:#6d6d6d}.toggler button.active,.toggler li.active{font-weight:700}.toggler button:after,.toggler li:after{content:"";position:absolute;bottom:1px;left:0;height:3px;width:100%;background-color:#61dafb;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transition:-webkit-transform .2s ease-out;transition:-webkit-transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out, -webkit-transform .2s ease-out}.toggler button.active:after,.toggler li.active:after{-webkit-transform:scaleX(1);transform:scaleX(1)}.toggler li:first-child{margin-left:0}.toggler li:last-child{margin-right:0}.toggler ul{width:100%;display:inline-block;list-style-type:none;padding:0;margin:0;border-bottom:1px solid #6d6d6d;cursor:default}@media screen and (max-width:960px){.toggler li,.toggler li:first-child,.toggler li:last-child{border-bottom-color:#6d6d6d;border-radius:3px;margin:2px 0}.toggler ul{border-bottom:0}}.toggler button{display:inline-block;padding:10px 5px;margin:2px;border:none;text-decoration:none;font-size:16px}block{display:none}block.active{display:block}.toggler span:first-child{font-weight:700}@media only screen and (max-width:480px){.toggler span:first-child{display:block}}.docsNavContainer .toc .navBreadcrumb{z-index:9999;background-color:#f7f7f7;border-bottom:2px solid #ececec}.toc .toggleNav .navBreadcrumb h2{font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.08em}.toc .toggleNav .navBreadcrumb i{display:none}.navBreadcrumb a,.navBreadcrumb span{color:#6d6d6d}.collapsible .arrow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.collapsible .arrow.rotate{-webkit-transform:rotate(0);transform:rotate(0)}@media only screen and (min-width:736px){.docsNavContainer{width:100%}}.container.docsNavContainer{overflow:visible;-webkit-box-flex:0;flex:0 0 280px;margin-right:0}.toc{height:100%;border-right:1px solid #ececec;margin-left:-9999px;padding-left:9999px;overflow-y:auto;background-color:#f7f7f7}.toc .toggleNav .navGroup .navGroupCategoryTitle{color:#6d6d6d;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.toc .toggleNav .navGroup .navGroupCategoryTitle.collapsible:hover{color:#1a1a1a}.toc .toggleNav ul{padding:0 10px 0 0}.toc .toggleNav ul li a{color:#1a1a1a;background-color:transparent;font-size:16px}.toc .toggleNav ul li a:hover{color:#6d6d6d;-webkit-transition:none;transition:none}.toc .toggleNav ul li.navListItemActive a{font-weight:700}.toc .toggleNav ul li{position:relative}.toc .toggleNav ul li.navListItemActive:before{content:"";background-color:#61dafb;position:absolute;width:5px;top:2px;left:-20px;bottom:2px}@media only screen and (min-width:1024px){.toc{padding-top:2rem}}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:8px}table.versions td a{text-decoration:underline}table.versions td a:hover{text-decoration:none}
\ No newline at end of file
diff --git a/docs/flatlist.html b/docs/flatlist.html
index cb4a8566205..829f03cb0d3 100644
--- a/docs/flatlist.html
+++ b/docs/flatlist.html
@@ -84,73 +84,182 @@
 <li>Multiple column support.</li>
 </ul>
 <p>If you need section support, use <a href="/react-native/docs/sectionlist"><code>&lt;SectionList&gt;</code></a>.</p>
-<p>Minimal Example:</p>
-<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">FlatList</span></span>
-  <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'a'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'b'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
-  <span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">}</span></span>
-<span class="token punctuation">/></span></span>
-</code></pre>
-<p>To render multiple columns, use the <a href="/react-native/docs/flatlist#numcolumns"><code>numColumns</code></a> prop. Using this approach instead of a <code>flexWrap</code> layout can prevent conflicts with the item height logic.</p>
-<p>More complex, multi-select example demonstrating <code>PureComponent</code> usage for perf optimization and avoiding bugs.</p>
+<h3><a class="anchor" aria-hidden="true" id="basic-example"></a><a href="#basic-example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Basic Example:</h3>
+<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
+<span class="hljs-keyword">import</span> { SafeAreaView, View, FlatList, StyleSheet, Text } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
+<span class="hljs-keyword">import</span> Constants <span class="hljs-keyword">from</span> <span class="hljs-string">'expo-constants'</span>;
+
+<span class="hljs-keyword">const</span> DATA = [
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'First Item'</span>,
+  },
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'Second Item'</span>,
+  },
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'58694a0f-3da1-471f-bd96-145571e29d72'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'Third Item'</span>,
+  },
+];
+
+<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Item</span>(<span class="hljs-params">{ title }</span>) </span>{
+  <span class="hljs-keyword">return</span> (
+    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.item}</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.title}</span>&gt;</span>{title}<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span></span>
+  );
+}
+
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
+  <span class="hljs-keyword">return</span> (
+    &lt;SafeAreaView style={styles.container}&gt;
+      &lt;FlatList
+        data={DATA}
+        renderItem={({ item }) =&gt; &lt;Item title={item.title} /&gt;}
+        keyExtractor={item =&gt; item.id}
+      /&gt;
+    &lt;/SafeAreaView&gt;
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: Constants.statusBarHeight,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
+        data-snack-name="flatlist-simple"
+        data-snack-description="Example usage"
+        data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20SafeAreaView%2C%20View%2C%20FlatList%2C%20StyleSheet%2C%20Text%20%7D%20from%20'react-native'%3B%0Aimport%20Constants%20from%20'expo-constants'%3B%0A%0Aconst%20DATA%20%3D%20%5B%0A%20%20%7B%0A%20%20%20%20id%3A%20'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'%2C%0A%20%20%20%20title%3A%20'First%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'%2C%0A%20%20%20%20title%3A%20'Second%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'58694a0f-3da1-471f-bd96-145571e29d72'%2C%0A%20%20%20%20title%3A%20'Third%20Item'%2C%0A%20%20%7D%2C%0A%5D%3B%0A%0Afunction%20Item(%7B%20title%20%7D)%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.item%7D%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Btitle%7D%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CFlatList%0A%20%20%20%20%20%20%20%20data%3D%7BDATA%7D%0A%20%20%20%20%20%20%20%20renderItem%3D%7B(%7B%20item%20%7D)%20%3D%3E%20%3CItem%20title%3D%7Bitem.title%7D%20%2F%3E%7D%0A%20%20%20%20%20%20%20%20keyExtractor%3D%7Bitem%20%3D%3E%20item.id%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FSafeAreaView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20marginTop%3A%20Constants.statusBarHeight%2C%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20backgroundColor%3A%20'%23f9c2ff'%2C%0A%20%20%20%20padding%3A%2020%2C%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%20%20marginHorizontal%3A%2016%2C%0A%20%20%7D%2C%0A%20%20title%3A%20%7B%0A%20%20%20%20fontSize%3A%2032%2C%0A%20%20%7D%2C%0A%7D)%3B%0A"
+        data-snack-platform="web"
+        data-snack-preview="true"
+        style="
+          overflow: hidden;
+          background: #fafafa;
+          border: 1px solid rgba(0,0,0,.16);
+          border-radius: 4px;
+          height: 514px;
+          width: 100%;
+        "
+      ></div></div></div><p>To render multiple columns, use the <a href="/react-native/docs/flatlist#numcolumns"><code>numColumns</code></a> prop. Using this approach instead of a <code>flexWrap</code> layout can prevent conflicts with the item height logic.</p>
+<p>More complex, multi-select example demonstrating `` usage for perf optimization and avoiding bugs.</p>
 <ul>
-<li>By binding the <code>onPressItem</code> handler, the props will remain <code>===</code> and <code>PureComponent</code> will prevent wasteful re-renders unless the actual <code>id</code>, <code>selected</code>, or <code>title</code> props change, even if the components rendered in <code>MyListItem</code> did not have such optimizations.</li>
-<li>By passing <code>extraData={this.state}</code> to <code>FlatList</code> we make sure <code>FlatList</code> itself will re-render when the <code>state.selected</code> changes. Without setting this prop, <code>FlatList</code> would not know it needs to re-render any items because it is also a <code>PureComponent</code> and the prop comparison will not show any changes.</li>
+<li>By passing <code>extraData={selected}</code> to <code>FlatList</code> we make sure <code>FlatList</code> itself will re-render when the state changes. Without setting this prop, <code>FlatList</code> would not know it needs to re-render any items because it is a <code>PureComponent</code> and the prop comparison will not show any changes.</li>
 <li><code>keyExtractor</code> tells the list to use the <code>id</code>s for the react keys instead of the default <code>key</code> property.</li>
 </ul>
-<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">MyListItem</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>PureComponent</span> <span class="token punctuation">{</span>
-  <span class="token function-variable function">_onPress</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">onPressItem</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span><span class="token punctuation">;</span>
+<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
+<span class="hljs-keyword">import</span> {
+  SafeAreaView,
+  TouchableOpacity,
+  FlatList,
+  StyleSheet,
+  Text,
+} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
+<span class="hljs-keyword">import</span> Constants <span class="hljs-keyword">from</span> <span class="hljs-string">'expo-constants'</span>;
 
-  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> textColor <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>selected <span class="token operator">?</span> <span class="token string">'red'</span> <span class="token punctuation">:</span> <span class="token string">'black'</span><span class="token punctuation">;</span>
-    <span class="token keyword">return</span> <span class="token punctuation">(</span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">TouchableOpacity</span></span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPress<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
-          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token punctuation">:</span> textColor<span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">TouchableOpacity</span></span><span class="token punctuation">></span></span>
-    <span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
+<span class="hljs-keyword">const</span> DATA = [
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'First Item'</span>,
+  },
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'Second Item'</span>,
+  },
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'58694a0f-3da1-471f-bd96-145571e29d72'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'Third Item'</span>,
+  },
+];
 
-<span class="token keyword">class</span> <span class="token class-name">MultiSelectList</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>PureComponent</span> <span class="token punctuation">{</span>
-  state <span class="token operator">=</span> <span class="token punctuation">{</span>selected<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> Map<span class="token operator">&lt;</span>string<span class="token punctuation">,</span> boolean<span class="token operator">></span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Item</span>(<span class="hljs-params">{ id, title, selected, onSelect }</span>) </span>{
+  <span class="hljs-keyword">return</span> (
+    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">TouchableOpacity</span>
+      <span class="hljs-attr">onPress</span>=<span class="hljs-string">{()</span> =&gt;</span> onSelect(id)}
+      style={[
+        styles.item,
+        { backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },
+      ]}
+    &gt;
+      <span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.title}</span>&gt;</span>{title}<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">TouchableOpacity</span>&gt;</span></span>
+  );
+}
 
-  <span class="token function-variable function">_keyExtractor</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>id<span class="token punctuation">;</span>
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
+  <span class="hljs-keyword">const</span> [selected, setSelected] = React.useState(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Map</span>());
 
-  <span class="token function-variable function">_onPressItem</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
-    <span class="token comment">// updater functions are preferred for transactional updates</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
-      <span class="token comment">// copy the map rather than modifying state.</span>
-      <span class="token keyword">const</span> selected <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>selected<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      selected<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span> <span class="token operator">!</span>selected<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// toggle</span>
-      <span class="token keyword">return</span> <span class="token punctuation">{</span>selected<span class="token punctuation">}</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span><span class="token punctuation">;</span>
+  <span class="hljs-keyword">const</span> onSelect = React.useCallback(
+    <span class="hljs-function"><span class="hljs-params">id</span> =&gt;</span> {
+      <span class="hljs-keyword">const</span> newSelected = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Map</span>(selected);
+      newSelected.set(id, !selected.get(id));
 
-  <span class="token function-variable function">_renderItem</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyListItem</span></span>
-      <span class="token attr-name">id</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>id<span class="token punctuation">}</span></span>
-      <span class="token attr-name">onPressItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPressItem<span class="token punctuation">}</span></span>
-      <span class="token attr-name">selected</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token operator">!</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selected<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
-      <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span>
-    <span class="token punctuation">/></span></span>
-  <span class="token punctuation">)</span><span class="token punctuation">;</span>
+      setSelected(newSelected);
+    },
+    [selected],
+  );
 
-  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> <span class="token punctuation">(</span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">FlatList</span></span>
-        <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>data<span class="token punctuation">}</span></span>
-        <span class="token attr-name">extraData</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">}</span></span>
-        <span class="token attr-name">keyExtractor</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_keyExtractor<span class="token punctuation">}</span></span>
-        <span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_renderItem<span class="token punctuation">}</span></span>
-      <span class="token punctuation">/></span></span>
-    <span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre>
-<p>This is a convenience wrapper around <a href="/react-native/docs/virtualizedlist"><code>&lt;VirtualizedList&gt;</code></a>, and thus inherits its props (as well as those of <a href="/react-native/docs/scrollview"><code>&lt;ScrollView&gt;</code></a>) that aren't explicitly listed here, along with the following caveats:</p>
+  <span class="hljs-keyword">return</span> (
+    &lt;SafeAreaView style={styles.container}&gt;
+      &lt;FlatList
+        data={DATA}
+        renderItem={({ item }) =&gt; (
+          &lt;Item
+            id={item.id}
+            title={item.title}
+            selected={!!selected.get(item.id)}
+            onSelect={onSelect}
+          /&gt;
+        )}
+        keyExtractor={item =&gt; item.id}
+        extraData={selected}
+      /&gt;
+    &lt;/SafeAreaView&gt;
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: Constants.statusBarHeight,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
+        data-snack-name="flatlist-selectable"
+        data-snack-description="Example usage"
+        data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%0A%20%20SafeAreaView%2C%0A%20%20TouchableOpacity%2C%0A%20%20FlatList%2C%0A%20%20StyleSheet%2C%0A%20%20Text%2C%0A%7D%20from%20'react-native'%3B%0Aimport%20Constants%20from%20'expo-constants'%3B%0A%0Aconst%20DATA%20%3D%20%5B%0A%20%20%7B%0A%20%20%20%20id%3A%20'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'%2C%0A%20%20%20%20title%3A%20'First%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'%2C%0A%20%20%20%20title%3A%20'Second%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'58694a0f-3da1-471f-bd96-145571e29d72'%2C%0A%20%20%20%20title%3A%20'Third%20Item'%2C%0A%20%20%7D%2C%0A%5D%3B%0A%0Afunction%20Item(%7B%20id%2C%20title%2C%20selected%2C%20onSelect%20%7D)%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CTouchableOpacity%0A%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20onSelect(id)%7D%0A%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20styles.item%2C%0A%20%20%20%20%20%20%20%20%7B%20backgroundColor%3A%20selected%20%3F%20'%236e3b6e'%20%3A%20'%23f9c2ff'%20%7D%2C%0A%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Btitle%7D%3C%2FText%3E%0A%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20%5Bselected%2C%20setSelected%5D%20%3D%20React.useState(new%20Map())%3B%0A%0A%20%20const%20onSelect%20%3D%20React.useCallback(%0A%20%20%20%20id%20%3D%3E%20%7B%0A%20%20%20%20%20%20const%20newSelected%20%3D%20new%20Map(selected)%3B%0A%20%20%20%20%20%20newSelected.set(id%2C%20!selected.get(id))%3B%0A%0A%20%20%20%20%20%20setSelected(newSelected)%3B%0A%20%20%20%20%7D%2C%0A%20%20%20%20%5Bselected%5D%2C%0A%20%20)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CFlatList%0A%20%20%20%20%20%20%20%20data%3D%7BDATA%7D%0A%20%20%20%20%20%20%20%20renderItem%3D%7B(%7B%20item%20%7D)%20%3D%3E%20(%0A%20%20%20%20%20%20%20%20%20%20%3CItem%0A%20%20%20%20%20%20%20%20%20%20%20%20id%3D%7Bitem.id%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20title%3D%7Bitem.title%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20selected%3D%7B!!selected.get(item.id)%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20onSelect%3D%7BonSelect%7D%0A%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20)%7D%0A%20%20%20%20%20%20%20%20keyExtractor%3D%7Bitem%20%3D%3E%20item.id%7D%0A%20%20%20%20%20%20%20%20extraData%3D%7Bselected%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FSafeAreaView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20marginTop%3A%20Constants.statusBarHeight%2C%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20backgroundColor%3A%20'%23f9c2ff'%2C%0A%20%20%20%20padding%3A%2020%2C%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%20%20marginHorizontal%3A%2016%2C%0A%20%20%7D%2C%0A%20%20title%3A%20%7B%0A%20%20%20%20fontSize%3A%2032%2C%0A%20%20%7D%2C%0A%7D)%3B%0A"
+        data-snack-platform="web"
+        data-snack-preview="true"
+        style="
+          overflow: hidden;
+          background: #fafafa;
+          border: 1px solid rgba(0,0,0,.16);
+          border-radius: 4px;
+          height: 514px;
+          width: 100%;
+        "
+      ></div></div></div><p>This is a convenience wrapper around <a href="/react-native/docs/virtualizedlist"><code>&lt;VirtualizedList&gt;</code></a>, and thus inherits its props (as well as those of <a href="/react-native/docs/scrollview"><code>&lt;ScrollView&gt;</code></a>) that aren't explicitly listed here, along with the following caveats:</p>
 <ul>
 <li>Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.</li>
 <li>This is a <code>PureComponent</code> which means that it will not re-render if <code>props</code> remain shallow-equal. Make sure that everything your <code>renderItem</code> function depends on is passed as a prop (e.g. <code>extraData</code>) that is not <code>===</code> after updates, otherwise your UI may not update on changes. This includes the <code>data</code> prop and parent component state.</li>
diff --git a/docs/flatlist/index.html b/docs/flatlist/index.html
index cb4a8566205..829f03cb0d3 100644
--- a/docs/flatlist/index.html
+++ b/docs/flatlist/index.html
@@ -84,73 +84,182 @@
 <li>Multiple column support.</li>
 </ul>
 <p>If you need section support, use <a href="/react-native/docs/sectionlist"><code>&lt;SectionList&gt;</code></a>.</p>
-<p>Minimal Example:</p>
-<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">FlatList</span></span>
-  <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'a'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'b'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
-  <span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">}</span></span>
-<span class="token punctuation">/></span></span>
-</code></pre>
-<p>To render multiple columns, use the <a href="/react-native/docs/flatlist#numcolumns"><code>numColumns</code></a> prop. Using this approach instead of a <code>flexWrap</code> layout can prevent conflicts with the item height logic.</p>
-<p>More complex, multi-select example demonstrating <code>PureComponent</code> usage for perf optimization and avoiding bugs.</p>
+<h3><a class="anchor" aria-hidden="true" id="basic-example"></a><a href="#basic-example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Basic Example:</h3>
+<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
+<span class="hljs-keyword">import</span> { SafeAreaView, View, FlatList, StyleSheet, Text } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
+<span class="hljs-keyword">import</span> Constants <span class="hljs-keyword">from</span> <span class="hljs-string">'expo-constants'</span>;
+
+<span class="hljs-keyword">const</span> DATA = [
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'First Item'</span>,
+  },
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'Second Item'</span>,
+  },
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'58694a0f-3da1-471f-bd96-145571e29d72'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'Third Item'</span>,
+  },
+];
+
+<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Item</span>(<span class="hljs-params">{ title }</span>) </span>{
+  <span class="hljs-keyword">return</span> (
+    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.item}</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.title}</span>&gt;</span>{title}<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span></span>
+  );
+}
+
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
+  <span class="hljs-keyword">return</span> (
+    &lt;SafeAreaView style={styles.container}&gt;
+      &lt;FlatList
+        data={DATA}
+        renderItem={({ item }) =&gt; &lt;Item title={item.title} /&gt;}
+        keyExtractor={item =&gt; item.id}
+      /&gt;
+    &lt;/SafeAreaView&gt;
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: Constants.statusBarHeight,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
+        data-snack-name="flatlist-simple"
+        data-snack-description="Example usage"
+        data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20SafeAreaView%2C%20View%2C%20FlatList%2C%20StyleSheet%2C%20Text%20%7D%20from%20'react-native'%3B%0Aimport%20Constants%20from%20'expo-constants'%3B%0A%0Aconst%20DATA%20%3D%20%5B%0A%20%20%7B%0A%20%20%20%20id%3A%20'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'%2C%0A%20%20%20%20title%3A%20'First%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'%2C%0A%20%20%20%20title%3A%20'Second%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'58694a0f-3da1-471f-bd96-145571e29d72'%2C%0A%20%20%20%20title%3A%20'Third%20Item'%2C%0A%20%20%7D%2C%0A%5D%3B%0A%0Afunction%20Item(%7B%20title%20%7D)%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.item%7D%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Btitle%7D%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CFlatList%0A%20%20%20%20%20%20%20%20data%3D%7BDATA%7D%0A%20%20%20%20%20%20%20%20renderItem%3D%7B(%7B%20item%20%7D)%20%3D%3E%20%3CItem%20title%3D%7Bitem.title%7D%20%2F%3E%7D%0A%20%20%20%20%20%20%20%20keyExtractor%3D%7Bitem%20%3D%3E%20item.id%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FSafeAreaView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20marginTop%3A%20Constants.statusBarHeight%2C%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20backgroundColor%3A%20'%23f9c2ff'%2C%0A%20%20%20%20padding%3A%2020%2C%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%20%20marginHorizontal%3A%2016%2C%0A%20%20%7D%2C%0A%20%20title%3A%20%7B%0A%20%20%20%20fontSize%3A%2032%2C%0A%20%20%7D%2C%0A%7D)%3B%0A"
+        data-snack-platform="web"
+        data-snack-preview="true"
+        style="
+          overflow: hidden;
+          background: #fafafa;
+          border: 1px solid rgba(0,0,0,.16);
+          border-radius: 4px;
+          height: 514px;
+          width: 100%;
+        "
+      ></div></div></div><p>To render multiple columns, use the <a href="/react-native/docs/flatlist#numcolumns"><code>numColumns</code></a> prop. Using this approach instead of a <code>flexWrap</code> layout can prevent conflicts with the item height logic.</p>
+<p>More complex, multi-select example demonstrating `` usage for perf optimization and avoiding bugs.</p>
 <ul>
-<li>By binding the <code>onPressItem</code> handler, the props will remain <code>===</code> and <code>PureComponent</code> will prevent wasteful re-renders unless the actual <code>id</code>, <code>selected</code>, or <code>title</code> props change, even if the components rendered in <code>MyListItem</code> did not have such optimizations.</li>
-<li>By passing <code>extraData={this.state}</code> to <code>FlatList</code> we make sure <code>FlatList</code> itself will re-render when the <code>state.selected</code> changes. Without setting this prop, <code>FlatList</code> would not know it needs to re-render any items because it is also a <code>PureComponent</code> and the prop comparison will not show any changes.</li>
+<li>By passing <code>extraData={selected}</code> to <code>FlatList</code> we make sure <code>FlatList</code> itself will re-render when the state changes. Without setting this prop, <code>FlatList</code> would not know it needs to re-render any items because it is a <code>PureComponent</code> and the prop comparison will not show any changes.</li>
 <li><code>keyExtractor</code> tells the list to use the <code>id</code>s for the react keys instead of the default <code>key</code> property.</li>
 </ul>
-<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">MyListItem</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>PureComponent</span> <span class="token punctuation">{</span>
-  <span class="token function-variable function">_onPress</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">onPressItem</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span><span class="token punctuation">;</span>
+<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
+<span class="hljs-keyword">import</span> {
+  SafeAreaView,
+  TouchableOpacity,
+  FlatList,
+  StyleSheet,
+  Text,
+} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
+<span class="hljs-keyword">import</span> Constants <span class="hljs-keyword">from</span> <span class="hljs-string">'expo-constants'</span>;
 
-  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> textColor <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>selected <span class="token operator">?</span> <span class="token string">'red'</span> <span class="token punctuation">:</span> <span class="token string">'black'</span><span class="token punctuation">;</span>
-    <span class="token keyword">return</span> <span class="token punctuation">(</span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">TouchableOpacity</span></span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPress<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
-          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token punctuation">:</span> textColor<span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">TouchableOpacity</span></span><span class="token punctuation">></span></span>
-    <span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
+<span class="hljs-keyword">const</span> DATA = [
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'First Item'</span>,
+  },
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'Second Item'</span>,
+  },
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'58694a0f-3da1-471f-bd96-145571e29d72'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'Third Item'</span>,
+  },
+];
 
-<span class="token keyword">class</span> <span class="token class-name">MultiSelectList</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>PureComponent</span> <span class="token punctuation">{</span>
-  state <span class="token operator">=</span> <span class="token punctuation">{</span>selected<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> Map<span class="token operator">&lt;</span>string<span class="token punctuation">,</span> boolean<span class="token operator">></span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Item</span>(<span class="hljs-params">{ id, title, selected, onSelect }</span>) </span>{
+  <span class="hljs-keyword">return</span> (
+    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">TouchableOpacity</span>
+      <span class="hljs-attr">onPress</span>=<span class="hljs-string">{()</span> =&gt;</span> onSelect(id)}
+      style={[
+        styles.item,
+        { backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },
+      ]}
+    &gt;
+      <span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.title}</span>&gt;</span>{title}<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">TouchableOpacity</span>&gt;</span></span>
+  );
+}
 
-  <span class="token function-variable function">_keyExtractor</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>id<span class="token punctuation">;</span>
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
+  <span class="hljs-keyword">const</span> [selected, setSelected] = React.useState(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Map</span>());
 
-  <span class="token function-variable function">_onPressItem</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
-    <span class="token comment">// updater functions are preferred for transactional updates</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
-      <span class="token comment">// copy the map rather than modifying state.</span>
-      <span class="token keyword">const</span> selected <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>selected<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      selected<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span> <span class="token operator">!</span>selected<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// toggle</span>
-      <span class="token keyword">return</span> <span class="token punctuation">{</span>selected<span class="token punctuation">}</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span><span class="token punctuation">;</span>
+  <span class="hljs-keyword">const</span> onSelect = React.useCallback(
+    <span class="hljs-function"><span class="hljs-params">id</span> =&gt;</span> {
+      <span class="hljs-keyword">const</span> newSelected = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Map</span>(selected);
+      newSelected.set(id, !selected.get(id));
 
-  <span class="token function-variable function">_renderItem</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyListItem</span></span>
-      <span class="token attr-name">id</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>id<span class="token punctuation">}</span></span>
-      <span class="token attr-name">onPressItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPressItem<span class="token punctuation">}</span></span>
-      <span class="token attr-name">selected</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token operator">!</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selected<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
-      <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span>
-    <span class="token punctuation">/></span></span>
-  <span class="token punctuation">)</span><span class="token punctuation">;</span>
+      setSelected(newSelected);
+    },
+    [selected],
+  );
 
-  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> <span class="token punctuation">(</span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">FlatList</span></span>
-        <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>data<span class="token punctuation">}</span></span>
-        <span class="token attr-name">extraData</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">}</span></span>
-        <span class="token attr-name">keyExtractor</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_keyExtractor<span class="token punctuation">}</span></span>
-        <span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_renderItem<span class="token punctuation">}</span></span>
-      <span class="token punctuation">/></span></span>
-    <span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre>
-<p>This is a convenience wrapper around <a href="/react-native/docs/virtualizedlist"><code>&lt;VirtualizedList&gt;</code></a>, and thus inherits its props (as well as those of <a href="/react-native/docs/scrollview"><code>&lt;ScrollView&gt;</code></a>) that aren't explicitly listed here, along with the following caveats:</p>
+  <span class="hljs-keyword">return</span> (
+    &lt;SafeAreaView style={styles.container}&gt;
+      &lt;FlatList
+        data={DATA}
+        renderItem={({ item }) =&gt; (
+          &lt;Item
+            id={item.id}
+            title={item.title}
+            selected={!!selected.get(item.id)}
+            onSelect={onSelect}
+          /&gt;
+        )}
+        keyExtractor={item =&gt; item.id}
+        extraData={selected}
+      /&gt;
+    &lt;/SafeAreaView&gt;
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: Constants.statusBarHeight,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
+        data-snack-name="flatlist-selectable"
+        data-snack-description="Example usage"
+        data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%0A%20%20SafeAreaView%2C%0A%20%20TouchableOpacity%2C%0A%20%20FlatList%2C%0A%20%20StyleSheet%2C%0A%20%20Text%2C%0A%7D%20from%20'react-native'%3B%0Aimport%20Constants%20from%20'expo-constants'%3B%0A%0Aconst%20DATA%20%3D%20%5B%0A%20%20%7B%0A%20%20%20%20id%3A%20'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'%2C%0A%20%20%20%20title%3A%20'First%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'%2C%0A%20%20%20%20title%3A%20'Second%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'58694a0f-3da1-471f-bd96-145571e29d72'%2C%0A%20%20%20%20title%3A%20'Third%20Item'%2C%0A%20%20%7D%2C%0A%5D%3B%0A%0Afunction%20Item(%7B%20id%2C%20title%2C%20selected%2C%20onSelect%20%7D)%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CTouchableOpacity%0A%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20onSelect(id)%7D%0A%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20styles.item%2C%0A%20%20%20%20%20%20%20%20%7B%20backgroundColor%3A%20selected%20%3F%20'%236e3b6e'%20%3A%20'%23f9c2ff'%20%7D%2C%0A%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Btitle%7D%3C%2FText%3E%0A%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20%5Bselected%2C%20setSelected%5D%20%3D%20React.useState(new%20Map())%3B%0A%0A%20%20const%20onSelect%20%3D%20React.useCallback(%0A%20%20%20%20id%20%3D%3E%20%7B%0A%20%20%20%20%20%20const%20newSelected%20%3D%20new%20Map(selected)%3B%0A%20%20%20%20%20%20newSelected.set(id%2C%20!selected.get(id))%3B%0A%0A%20%20%20%20%20%20setSelected(newSelected)%3B%0A%20%20%20%20%7D%2C%0A%20%20%20%20%5Bselected%5D%2C%0A%20%20)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CFlatList%0A%20%20%20%20%20%20%20%20data%3D%7BDATA%7D%0A%20%20%20%20%20%20%20%20renderItem%3D%7B(%7B%20item%20%7D)%20%3D%3E%20(%0A%20%20%20%20%20%20%20%20%20%20%3CItem%0A%20%20%20%20%20%20%20%20%20%20%20%20id%3D%7Bitem.id%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20title%3D%7Bitem.title%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20selected%3D%7B!!selected.get(item.id)%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20onSelect%3D%7BonSelect%7D%0A%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20)%7D%0A%20%20%20%20%20%20%20%20keyExtractor%3D%7Bitem%20%3D%3E%20item.id%7D%0A%20%20%20%20%20%20%20%20extraData%3D%7Bselected%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FSafeAreaView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20marginTop%3A%20Constants.statusBarHeight%2C%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20backgroundColor%3A%20'%23f9c2ff'%2C%0A%20%20%20%20padding%3A%2020%2C%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%20%20marginHorizontal%3A%2016%2C%0A%20%20%7D%2C%0A%20%20title%3A%20%7B%0A%20%20%20%20fontSize%3A%2032%2C%0A%20%20%7D%2C%0A%7D)%3B%0A"
+        data-snack-platform="web"
+        data-snack-preview="true"
+        style="
+          overflow: hidden;
+          background: #fafafa;
+          border: 1px solid rgba(0,0,0,.16);
+          border-radius: 4px;
+          height: 514px;
+          width: 100%;
+        "
+      ></div></div></div><p>This is a convenience wrapper around <a href="/react-native/docs/virtualizedlist"><code>&lt;VirtualizedList&gt;</code></a>, and thus inherits its props (as well as those of <a href="/react-native/docs/scrollview"><code>&lt;ScrollView&gt;</code></a>) that aren't explicitly listed here, along with the following caveats:</p>
 <ul>
 <li>Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.</li>
 <li>This is a <code>PureComponent</code> which means that it will not re-render if <code>props</code> remain shallow-equal. Make sure that everything your <code>renderItem</code> function depends on is passed as a prop (e.g. <code>extraData</code>) that is not <code>===</code> after updates, otherwise your UI may not update on changes. This includes the <code>data</code> prop and parent component state.</li>
diff --git a/docs/next/flatlist.html b/docs/next/flatlist.html
index 1a0bd3dde86..c3673ae0efd 100644
--- a/docs/next/flatlist.html
+++ b/docs/next/flatlist.html
@@ -84,73 +84,182 @@
 <li>Multiple column support.</li>
 </ul>
 <p>If you need section support, use <a href="/react-native/docs/next/sectionlist"><code>&lt;SectionList&gt;</code></a>.</p>
-<p>Minimal Example:</p>
-<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">FlatList</span></span>
-  <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'a'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'b'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
-  <span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">}</span></span>
-<span class="token punctuation">/></span></span>
-</code></pre>
-<p>To render multiple columns, use the <a href="/react-native/docs/next/flatlist#numcolumns"><code>numColumns</code></a> prop. Using this approach instead of a <code>flexWrap</code> layout can prevent conflicts with the item height logic.</p>
-<p>More complex, multi-select example demonstrating <code>PureComponent</code> usage for perf optimization and avoiding bugs.</p>
+<h3><a class="anchor" aria-hidden="true" id="basic-example"></a><a href="#basic-example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Basic Example:</h3>
+<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
+<span class="hljs-keyword">import</span> { SafeAreaView, View, FlatList, StyleSheet, Text } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
+<span class="hljs-keyword">import</span> Constants <span class="hljs-keyword">from</span> <span class="hljs-string">'expo-constants'</span>;
+
+<span class="hljs-keyword">const</span> DATA = [
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'First Item'</span>,
+  },
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'Second Item'</span>,
+  },
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'58694a0f-3da1-471f-bd96-145571e29d72'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'Third Item'</span>,
+  },
+];
+
+<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Item</span>(<span class="hljs-params">{ title }</span>) </span>{
+  <span class="hljs-keyword">return</span> (
+    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.item}</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.title}</span>&gt;</span>{title}<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span></span>
+  );
+}
+
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
+  <span class="hljs-keyword">return</span> (
+    &lt;SafeAreaView style={styles.container}&gt;
+      &lt;FlatList
+        data={DATA}
+        renderItem={({ item }) =&gt; &lt;Item title={item.title} /&gt;}
+        keyExtractor={item =&gt; item.id}
+      /&gt;
+    &lt;/SafeAreaView&gt;
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: Constants.statusBarHeight,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
+        data-snack-name="flatlist-simple"
+        data-snack-description="Example usage"
+        data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20SafeAreaView%2C%20View%2C%20FlatList%2C%20StyleSheet%2C%20Text%20%7D%20from%20'react-native'%3B%0Aimport%20Constants%20from%20'expo-constants'%3B%0A%0Aconst%20DATA%20%3D%20%5B%0A%20%20%7B%0A%20%20%20%20id%3A%20'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'%2C%0A%20%20%20%20title%3A%20'First%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'%2C%0A%20%20%20%20title%3A%20'Second%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'58694a0f-3da1-471f-bd96-145571e29d72'%2C%0A%20%20%20%20title%3A%20'Third%20Item'%2C%0A%20%20%7D%2C%0A%5D%3B%0A%0Afunction%20Item(%7B%20title%20%7D)%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.item%7D%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Btitle%7D%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CFlatList%0A%20%20%20%20%20%20%20%20data%3D%7BDATA%7D%0A%20%20%20%20%20%20%20%20renderItem%3D%7B(%7B%20item%20%7D)%20%3D%3E%20%3CItem%20title%3D%7Bitem.title%7D%20%2F%3E%7D%0A%20%20%20%20%20%20%20%20keyExtractor%3D%7Bitem%20%3D%3E%20item.id%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FSafeAreaView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20marginTop%3A%20Constants.statusBarHeight%2C%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20backgroundColor%3A%20'%23f9c2ff'%2C%0A%20%20%20%20padding%3A%2020%2C%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%20%20marginHorizontal%3A%2016%2C%0A%20%20%7D%2C%0A%20%20title%3A%20%7B%0A%20%20%20%20fontSize%3A%2032%2C%0A%20%20%7D%2C%0A%7D)%3B%0A"
+        data-snack-platform="web"
+        data-snack-preview="true"
+        style="
+          overflow: hidden;
+          background: #fafafa;
+          border: 1px solid rgba(0,0,0,.16);
+          border-radius: 4px;
+          height: 514px;
+          width: 100%;
+        "
+      ></div></div></div><p>To render multiple columns, use the <a href="/react-native/docs/next/flatlist#numcolumns"><code>numColumns</code></a> prop. Using this approach instead of a <code>flexWrap</code> layout can prevent conflicts with the item height logic.</p>
+<p>More complex, multi-select example demonstrating `` usage for perf optimization and avoiding bugs.</p>
 <ul>
-<li>By binding the <code>onPressItem</code> handler, the props will remain <code>===</code> and <code>PureComponent</code> will prevent wasteful re-renders unless the actual <code>id</code>, <code>selected</code>, or <code>title</code> props change, even if the components rendered in <code>MyListItem</code> did not have such optimizations.</li>
-<li>By passing <code>extraData={this.state}</code> to <code>FlatList</code> we make sure <code>FlatList</code> itself will re-render when the <code>state.selected</code> changes. Without setting this prop, <code>FlatList</code> would not know it needs to re-render any items because it is also a <code>PureComponent</code> and the prop comparison will not show any changes.</li>
+<li>By passing <code>extraData={selected}</code> to <code>FlatList</code> we make sure <code>FlatList</code> itself will re-render when the state changes. Without setting this prop, <code>FlatList</code> would not know it needs to re-render any items because it is a <code>PureComponent</code> and the prop comparison will not show any changes.</li>
 <li><code>keyExtractor</code> tells the list to use the <code>id</code>s for the react keys instead of the default <code>key</code> property.</li>
 </ul>
-<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">MyListItem</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>PureComponent</span> <span class="token punctuation">{</span>
-  <span class="token function-variable function">_onPress</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">onPressItem</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span><span class="token punctuation">;</span>
+<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
+<span class="hljs-keyword">import</span> {
+  SafeAreaView,
+  TouchableOpacity,
+  FlatList,
+  StyleSheet,
+  Text,
+} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
+<span class="hljs-keyword">import</span> Constants <span class="hljs-keyword">from</span> <span class="hljs-string">'expo-constants'</span>;
 
-  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> textColor <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>selected <span class="token operator">?</span> <span class="token string">'red'</span> <span class="token punctuation">:</span> <span class="token string">'black'</span><span class="token punctuation">;</span>
-    <span class="token keyword">return</span> <span class="token punctuation">(</span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">TouchableOpacity</span></span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPress<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
-          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token punctuation">:</span> textColor<span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">TouchableOpacity</span></span><span class="token punctuation">></span></span>
-    <span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
+<span class="hljs-keyword">const</span> DATA = [
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'First Item'</span>,
+  },
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'Second Item'</span>,
+  },
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'58694a0f-3da1-471f-bd96-145571e29d72'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'Third Item'</span>,
+  },
+];
 
-<span class="token keyword">class</span> <span class="token class-name">MultiSelectList</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>PureComponent</span> <span class="token punctuation">{</span>
-  state <span class="token operator">=</span> <span class="token punctuation">{</span>selected<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> Map<span class="token operator">&lt;</span>string<span class="token punctuation">,</span> boolean<span class="token operator">></span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Item</span>(<span class="hljs-params">{ id, title, selected, onSelect }</span>) </span>{
+  <span class="hljs-keyword">return</span> (
+    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">TouchableOpacity</span>
+      <span class="hljs-attr">onPress</span>=<span class="hljs-string">{()</span> =&gt;</span> onSelect(id)}
+      style={[
+        styles.item,
+        { backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },
+      ]}
+    &gt;
+      <span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.title}</span>&gt;</span>{title}<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">TouchableOpacity</span>&gt;</span></span>
+  );
+}
 
-  <span class="token function-variable function">_keyExtractor</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>id<span class="token punctuation">;</span>
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
+  <span class="hljs-keyword">const</span> [selected, setSelected] = React.useState(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Map</span>());
 
-  <span class="token function-variable function">_onPressItem</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
-    <span class="token comment">// updater functions are preferred for transactional updates</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
-      <span class="token comment">// copy the map rather than modifying state.</span>
-      <span class="token keyword">const</span> selected <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>selected<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      selected<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span> <span class="token operator">!</span>selected<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// toggle</span>
-      <span class="token keyword">return</span> <span class="token punctuation">{</span>selected<span class="token punctuation">}</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span><span class="token punctuation">;</span>
+  <span class="hljs-keyword">const</span> onSelect = React.useCallback(
+    <span class="hljs-function"><span class="hljs-params">id</span> =&gt;</span> {
+      <span class="hljs-keyword">const</span> newSelected = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Map</span>(selected);
+      newSelected.set(id, !selected.get(id));
 
-  <span class="token function-variable function">_renderItem</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyListItem</span></span>
-      <span class="token attr-name">id</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>id<span class="token punctuation">}</span></span>
-      <span class="token attr-name">onPressItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPressItem<span class="token punctuation">}</span></span>
-      <span class="token attr-name">selected</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token operator">!</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selected<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
-      <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span>
-    <span class="token punctuation">/></span></span>
-  <span class="token punctuation">)</span><span class="token punctuation">;</span>
+      setSelected(newSelected);
+    },
+    [selected],
+  );
 
-  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> <span class="token punctuation">(</span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">FlatList</span></span>
-        <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>data<span class="token punctuation">}</span></span>
-        <span class="token attr-name">extraData</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">}</span></span>
-        <span class="token attr-name">keyExtractor</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_keyExtractor<span class="token punctuation">}</span></span>
-        <span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_renderItem<span class="token punctuation">}</span></span>
-      <span class="token punctuation">/></span></span>
-    <span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre>
-<p>This is a convenience wrapper around <a href="/react-native/docs/next/virtualizedlist"><code>&lt;VirtualizedList&gt;</code></a>, and thus inherits its props (as well as those of <a href="/react-native/docs/next/scrollview"><code>&lt;ScrollView&gt;</code></a>) that aren't explicitly listed here, along with the following caveats:</p>
+  <span class="hljs-keyword">return</span> (
+    &lt;SafeAreaView style={styles.container}&gt;
+      &lt;FlatList
+        data={DATA}
+        renderItem={({ item }) =&gt; (
+          &lt;Item
+            id={item.id}
+            title={item.title}
+            selected={!!selected.get(item.id)}
+            onSelect={onSelect}
+          /&gt;
+        )}
+        keyExtractor={item =&gt; item.id}
+        extraData={selected}
+      /&gt;
+    &lt;/SafeAreaView&gt;
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: Constants.statusBarHeight,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
+        data-snack-name="flatlist-selectable"
+        data-snack-description="Example usage"
+        data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%0A%20%20SafeAreaView%2C%0A%20%20TouchableOpacity%2C%0A%20%20FlatList%2C%0A%20%20StyleSheet%2C%0A%20%20Text%2C%0A%7D%20from%20'react-native'%3B%0Aimport%20Constants%20from%20'expo-constants'%3B%0A%0Aconst%20DATA%20%3D%20%5B%0A%20%20%7B%0A%20%20%20%20id%3A%20'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'%2C%0A%20%20%20%20title%3A%20'First%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'%2C%0A%20%20%20%20title%3A%20'Second%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'58694a0f-3da1-471f-bd96-145571e29d72'%2C%0A%20%20%20%20title%3A%20'Third%20Item'%2C%0A%20%20%7D%2C%0A%5D%3B%0A%0Afunction%20Item(%7B%20id%2C%20title%2C%20selected%2C%20onSelect%20%7D)%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CTouchableOpacity%0A%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20onSelect(id)%7D%0A%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20styles.item%2C%0A%20%20%20%20%20%20%20%20%7B%20backgroundColor%3A%20selected%20%3F%20'%236e3b6e'%20%3A%20'%23f9c2ff'%20%7D%2C%0A%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Btitle%7D%3C%2FText%3E%0A%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20%5Bselected%2C%20setSelected%5D%20%3D%20React.useState(new%20Map())%3B%0A%0A%20%20const%20onSelect%20%3D%20React.useCallback(%0A%20%20%20%20id%20%3D%3E%20%7B%0A%20%20%20%20%20%20const%20newSelected%20%3D%20new%20Map(selected)%3B%0A%20%20%20%20%20%20newSelected.set(id%2C%20!selected.get(id))%3B%0A%0A%20%20%20%20%20%20setSelected(newSelected)%3B%0A%20%20%20%20%7D%2C%0A%20%20%20%20%5Bselected%5D%2C%0A%20%20)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CFlatList%0A%20%20%20%20%20%20%20%20data%3D%7BDATA%7D%0A%20%20%20%20%20%20%20%20renderItem%3D%7B(%7B%20item%20%7D)%20%3D%3E%20(%0A%20%20%20%20%20%20%20%20%20%20%3CItem%0A%20%20%20%20%20%20%20%20%20%20%20%20id%3D%7Bitem.id%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20title%3D%7Bitem.title%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20selected%3D%7B!!selected.get(item.id)%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20onSelect%3D%7BonSelect%7D%0A%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20)%7D%0A%20%20%20%20%20%20%20%20keyExtractor%3D%7Bitem%20%3D%3E%20item.id%7D%0A%20%20%20%20%20%20%20%20extraData%3D%7Bselected%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FSafeAreaView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20marginTop%3A%20Constants.statusBarHeight%2C%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20backgroundColor%3A%20'%23f9c2ff'%2C%0A%20%20%20%20padding%3A%2020%2C%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%20%20marginHorizontal%3A%2016%2C%0A%20%20%7D%2C%0A%20%20title%3A%20%7B%0A%20%20%20%20fontSize%3A%2032%2C%0A%20%20%7D%2C%0A%7D)%3B%0A"
+        data-snack-platform="web"
+        data-snack-preview="true"
+        style="
+          overflow: hidden;
+          background: #fafafa;
+          border: 1px solid rgba(0,0,0,.16);
+          border-radius: 4px;
+          height: 514px;
+          width: 100%;
+        "
+      ></div></div></div><p>This is a convenience wrapper around <a href="/react-native/docs/next/virtualizedlist"><code>&lt;VirtualizedList&gt;</code></a>, and thus inherits its props (as well as those of <a href="/react-native/docs/next/scrollview"><code>&lt;ScrollView&gt;</code></a>) that aren't explicitly listed here, along with the following caveats:</p>
 <ul>
 <li>Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.</li>
 <li>This is a <code>PureComponent</code> which means that it will not re-render if <code>props</code> remain shallow-equal. Make sure that everything your <code>renderItem</code> function depends on is passed as a prop (e.g. <code>extraData</code>) that is not <code>===</code> after updates, otherwise your UI may not update on changes. This includes the <code>data</code> prop and parent component state.</li>
diff --git a/docs/next/flatlist/index.html b/docs/next/flatlist/index.html
index 1a0bd3dde86..c3673ae0efd 100644
--- a/docs/next/flatlist/index.html
+++ b/docs/next/flatlist/index.html
@@ -84,73 +84,182 @@
 <li>Multiple column support.</li>
 </ul>
 <p>If you need section support, use <a href="/react-native/docs/next/sectionlist"><code>&lt;SectionList&gt;</code></a>.</p>
-<p>Minimal Example:</p>
-<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">FlatList</span></span>
-  <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'a'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'b'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
-  <span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">}</span></span>
-<span class="token punctuation">/></span></span>
-</code></pre>
-<p>To render multiple columns, use the <a href="/react-native/docs/next/flatlist#numcolumns"><code>numColumns</code></a> prop. Using this approach instead of a <code>flexWrap</code> layout can prevent conflicts with the item height logic.</p>
-<p>More complex, multi-select example demonstrating <code>PureComponent</code> usage for perf optimization and avoiding bugs.</p>
+<h3><a class="anchor" aria-hidden="true" id="basic-example"></a><a href="#basic-example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Basic Example:</h3>
+<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
+<span class="hljs-keyword">import</span> { SafeAreaView, View, FlatList, StyleSheet, Text } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
+<span class="hljs-keyword">import</span> Constants <span class="hljs-keyword">from</span> <span class="hljs-string">'expo-constants'</span>;
+
+<span class="hljs-keyword">const</span> DATA = [
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'First Item'</span>,
+  },
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'Second Item'</span>,
+  },
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'58694a0f-3da1-471f-bd96-145571e29d72'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'Third Item'</span>,
+  },
+];
+
+<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Item</span>(<span class="hljs-params">{ title }</span>) </span>{
+  <span class="hljs-keyword">return</span> (
+    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.item}</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.title}</span>&gt;</span>{title}<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span></span>
+  );
+}
+
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
+  <span class="hljs-keyword">return</span> (
+    &lt;SafeAreaView style={styles.container}&gt;
+      &lt;FlatList
+        data={DATA}
+        renderItem={({ item }) =&gt; &lt;Item title={item.title} /&gt;}
+        keyExtractor={item =&gt; item.id}
+      /&gt;
+    &lt;/SafeAreaView&gt;
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: Constants.statusBarHeight,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
+        data-snack-name="flatlist-simple"
+        data-snack-description="Example usage"
+        data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20SafeAreaView%2C%20View%2C%20FlatList%2C%20StyleSheet%2C%20Text%20%7D%20from%20'react-native'%3B%0Aimport%20Constants%20from%20'expo-constants'%3B%0A%0Aconst%20DATA%20%3D%20%5B%0A%20%20%7B%0A%20%20%20%20id%3A%20'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'%2C%0A%20%20%20%20title%3A%20'First%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'%2C%0A%20%20%20%20title%3A%20'Second%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'58694a0f-3da1-471f-bd96-145571e29d72'%2C%0A%20%20%20%20title%3A%20'Third%20Item'%2C%0A%20%20%7D%2C%0A%5D%3B%0A%0Afunction%20Item(%7B%20title%20%7D)%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.item%7D%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Btitle%7D%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CFlatList%0A%20%20%20%20%20%20%20%20data%3D%7BDATA%7D%0A%20%20%20%20%20%20%20%20renderItem%3D%7B(%7B%20item%20%7D)%20%3D%3E%20%3CItem%20title%3D%7Bitem.title%7D%20%2F%3E%7D%0A%20%20%20%20%20%20%20%20keyExtractor%3D%7Bitem%20%3D%3E%20item.id%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FSafeAreaView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20marginTop%3A%20Constants.statusBarHeight%2C%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20backgroundColor%3A%20'%23f9c2ff'%2C%0A%20%20%20%20padding%3A%2020%2C%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%20%20marginHorizontal%3A%2016%2C%0A%20%20%7D%2C%0A%20%20title%3A%20%7B%0A%20%20%20%20fontSize%3A%2032%2C%0A%20%20%7D%2C%0A%7D)%3B%0A"
+        data-snack-platform="web"
+        data-snack-preview="true"
+        style="
+          overflow: hidden;
+          background: #fafafa;
+          border: 1px solid rgba(0,0,0,.16);
+          border-radius: 4px;
+          height: 514px;
+          width: 100%;
+        "
+      ></div></div></div><p>To render multiple columns, use the <a href="/react-native/docs/next/flatlist#numcolumns"><code>numColumns</code></a> prop. Using this approach instead of a <code>flexWrap</code> layout can prevent conflicts with the item height logic.</p>
+<p>More complex, multi-select example demonstrating `` usage for perf optimization and avoiding bugs.</p>
 <ul>
-<li>By binding the <code>onPressItem</code> handler, the props will remain <code>===</code> and <code>PureComponent</code> will prevent wasteful re-renders unless the actual <code>id</code>, <code>selected</code>, or <code>title</code> props change, even if the components rendered in <code>MyListItem</code> did not have such optimizations.</li>
-<li>By passing <code>extraData={this.state}</code> to <code>FlatList</code> we make sure <code>FlatList</code> itself will re-render when the <code>state.selected</code> changes. Without setting this prop, <code>FlatList</code> would not know it needs to re-render any items because it is also a <code>PureComponent</code> and the prop comparison will not show any changes.</li>
+<li>By passing <code>extraData={selected}</code> to <code>FlatList</code> we make sure <code>FlatList</code> itself will re-render when the state changes. Without setting this prop, <code>FlatList</code> would not know it needs to re-render any items because it is a <code>PureComponent</code> and the prop comparison will not show any changes.</li>
 <li><code>keyExtractor</code> tells the list to use the <code>id</code>s for the react keys instead of the default <code>key</code> property.</li>
 </ul>
-<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">MyListItem</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>PureComponent</span> <span class="token punctuation">{</span>
-  <span class="token function-variable function">_onPress</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">onPressItem</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span><span class="token punctuation">;</span>
+<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
+<span class="hljs-keyword">import</span> {
+  SafeAreaView,
+  TouchableOpacity,
+  FlatList,
+  StyleSheet,
+  Text,
+} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
+<span class="hljs-keyword">import</span> Constants <span class="hljs-keyword">from</span> <span class="hljs-string">'expo-constants'</span>;
 
-  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> textColor <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>selected <span class="token operator">?</span> <span class="token string">'red'</span> <span class="token punctuation">:</span> <span class="token string">'black'</span><span class="token punctuation">;</span>
-    <span class="token keyword">return</span> <span class="token punctuation">(</span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">TouchableOpacity</span></span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPress<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
-          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token punctuation">:</span> textColor<span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">TouchableOpacity</span></span><span class="token punctuation">></span></span>
-    <span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
+<span class="hljs-keyword">const</span> DATA = [
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'First Item'</span>,
+  },
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'Second Item'</span>,
+  },
+  {
+    <span class="hljs-attr">id</span>: <span class="hljs-string">'58694a0f-3da1-471f-bd96-145571e29d72'</span>,
+    <span class="hljs-attr">title</span>: <span class="hljs-string">'Third Item'</span>,
+  },
+];
 
-<span class="token keyword">class</span> <span class="token class-name">MultiSelectList</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>PureComponent</span> <span class="token punctuation">{</span>
-  state <span class="token operator">=</span> <span class="token punctuation">{</span>selected<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> Map<span class="token operator">&lt;</span>string<span class="token punctuation">,</span> boolean<span class="token operator">></span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Item</span>(<span class="hljs-params">{ id, title, selected, onSelect }</span>) </span>{
+  <span class="hljs-keyword">return</span> (
+    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">TouchableOpacity</span>
+      <span class="hljs-attr">onPress</span>=<span class="hljs-string">{()</span> =&gt;</span> onSelect(id)}
+      style={[
+        styles.item,
+        { backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },
+      ]}
+    &gt;
+      <span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.title}</span>&gt;</span>{title}<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">TouchableOpacity</span>&gt;</span></span>
+  );
+}
 
-  <span class="token function-variable function">_keyExtractor</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>id<span class="token punctuation">;</span>
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
+  <span class="hljs-keyword">const</span> [selected, setSelected] = React.useState(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Map</span>());
 
-  <span class="token function-variable function">_onPressItem</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
-    <span class="token comment">// updater functions are preferred for transactional updates</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
-      <span class="token comment">// copy the map rather than modifying state.</span>
-      <span class="token keyword">const</span> selected <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>selected<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      selected<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span> <span class="token operator">!</span>selected<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// toggle</span>
-      <span class="token keyword">return</span> <span class="token punctuation">{</span>selected<span class="token punctuation">}</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span><span class="token punctuation">;</span>
+  <span class="hljs-keyword">const</span> onSelect = React.useCallback(
+    <span class="hljs-function"><span class="hljs-params">id</span> =&gt;</span> {
+      <span class="hljs-keyword">const</span> newSelected = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Map</span>(selected);
+      newSelected.set(id, !selected.get(id));
 
-  <span class="token function-variable function">_renderItem</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyListItem</span></span>
-      <span class="token attr-name">id</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>id<span class="token punctuation">}</span></span>
-      <span class="token attr-name">onPressItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPressItem<span class="token punctuation">}</span></span>
-      <span class="token attr-name">selected</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token operator">!</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selected<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
-      <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span>
-    <span class="token punctuation">/></span></span>
-  <span class="token punctuation">)</span><span class="token punctuation">;</span>
+      setSelected(newSelected);
+    },
+    [selected],
+  );
 
-  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> <span class="token punctuation">(</span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">FlatList</span></span>
-        <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>data<span class="token punctuation">}</span></span>
-        <span class="token attr-name">extraData</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">}</span></span>
-        <span class="token attr-name">keyExtractor</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_keyExtractor<span class="token punctuation">}</span></span>
-        <span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_renderItem<span class="token punctuation">}</span></span>
-      <span class="token punctuation">/></span></span>
-    <span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre>
-<p>This is a convenience wrapper around <a href="/react-native/docs/next/virtualizedlist"><code>&lt;VirtualizedList&gt;</code></a>, and thus inherits its props (as well as those of <a href="/react-native/docs/next/scrollview"><code>&lt;ScrollView&gt;</code></a>) that aren't explicitly listed here, along with the following caveats:</p>
+  <span class="hljs-keyword">return</span> (
+    &lt;SafeAreaView style={styles.container}&gt;
+      &lt;FlatList
+        data={DATA}
+        renderItem={({ item }) =&gt; (
+          &lt;Item
+            id={item.id}
+            title={item.title}
+            selected={!!selected.get(item.id)}
+            onSelect={onSelect}
+          /&gt;
+        )}
+        keyExtractor={item =&gt; item.id}
+        extraData={selected}
+      /&gt;
+    &lt;/SafeAreaView&gt;
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: Constants.statusBarHeight,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
+</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
+        data-snack-name="flatlist-selectable"
+        data-snack-description="Example usage"
+        data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%0A%20%20SafeAreaView%2C%0A%20%20TouchableOpacity%2C%0A%20%20FlatList%2C%0A%20%20StyleSheet%2C%0A%20%20Text%2C%0A%7D%20from%20'react-native'%3B%0Aimport%20Constants%20from%20'expo-constants'%3B%0A%0Aconst%20DATA%20%3D%20%5B%0A%20%20%7B%0A%20%20%20%20id%3A%20'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'%2C%0A%20%20%20%20title%3A%20'First%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'%2C%0A%20%20%20%20title%3A%20'Second%20Item'%2C%0A%20%20%7D%2C%0A%20%20%7B%0A%20%20%20%20id%3A%20'58694a0f-3da1-471f-bd96-145571e29d72'%2C%0A%20%20%20%20title%3A%20'Third%20Item'%2C%0A%20%20%7D%2C%0A%5D%3B%0A%0Afunction%20Item(%7B%20id%2C%20title%2C%20selected%2C%20onSelect%20%7D)%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CTouchableOpacity%0A%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20onSelect(id)%7D%0A%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20styles.item%2C%0A%20%20%20%20%20%20%20%20%7B%20backgroundColor%3A%20selected%20%3F%20'%236e3b6e'%20%3A%20'%23f9c2ff'%20%7D%2C%0A%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Btitle%7D%3C%2FText%3E%0A%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20%5Bselected%2C%20setSelected%5D%20%3D%20React.useState(new%20Map())%3B%0A%0A%20%20const%20onSelect%20%3D%20React.useCallback(%0A%20%20%20%20id%20%3D%3E%20%7B%0A%20%20%20%20%20%20const%20newSelected%20%3D%20new%20Map(selected)%3B%0A%20%20%20%20%20%20newSelected.set(id%2C%20!selected.get(id))%3B%0A%0A%20%20%20%20%20%20setSelected(newSelected)%3B%0A%20%20%20%20%7D%2C%0A%20%20%20%20%5Bselected%5D%2C%0A%20%20)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CFlatList%0A%20%20%20%20%20%20%20%20data%3D%7BDATA%7D%0A%20%20%20%20%20%20%20%20renderItem%3D%7B(%7B%20item%20%7D)%20%3D%3E%20(%0A%20%20%20%20%20%20%20%20%20%20%3CItem%0A%20%20%20%20%20%20%20%20%20%20%20%20id%3D%7Bitem.id%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20title%3D%7Bitem.title%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20selected%3D%7B!!selected.get(item.id)%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20onSelect%3D%7BonSelect%7D%0A%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20)%7D%0A%20%20%20%20%20%20%20%20keyExtractor%3D%7Bitem%20%3D%3E%20item.id%7D%0A%20%20%20%20%20%20%20%20extraData%3D%7Bselected%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FSafeAreaView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20marginTop%3A%20Constants.statusBarHeight%2C%0A%20%20%7D%2C%0A%20%20item%3A%20%7B%0A%20%20%20%20backgroundColor%3A%20'%23f9c2ff'%2C%0A%20%20%20%20padding%3A%2020%2C%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%20%20marginHorizontal%3A%2016%2C%0A%20%20%7D%2C%0A%20%20title%3A%20%7B%0A%20%20%20%20fontSize%3A%2032%2C%0A%20%20%7D%2C%0A%7D)%3B%0A"
+        data-snack-platform="web"
+        data-snack-preview="true"
+        style="
+          overflow: hidden;
+          background: #fafafa;
+          border: 1px solid rgba(0,0,0,.16);
+          border-radius: 4px;
+          height: 514px;
+          width: 100%;
+        "
+      ></div></div></div><p>This is a convenience wrapper around <a href="/react-native/docs/next/virtualizedlist"><code>&lt;VirtualizedList&gt;</code></a>, and thus inherits its props (as well as those of <a href="/react-native/docs/next/scrollview"><code>&lt;ScrollView&gt;</code></a>) that aren't explicitly listed here, along with the following caveats:</p>
 <ul>
 <li>Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.</li>
 <li>This is a <code>PureComponent</code> which means that it will not re-render if <code>props</code> remain shallow-equal. Make sure that everything your <code>renderItem</code> function depends on is passed as a prop (e.g. <code>extraData</code>) that is not <code>===</code> after updates, otherwise your UI may not update on changes. This includes the <code>data</code> prop and parent component state.</li>