mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Deploy website - based on 92f92befddc3d856eb0abcfef7e594dea5636751
This commit is contained in:
Website Deployment Script committed
1 parent
70cf530b75
commit
cf2f351158
1774 files changed
+7468
-7468
No files matched your search
@@ -1 +0,0 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[115],{1008:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return m}));var a=n(0),o=n.n(a);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,a,o=function(e,t){if(null==e)return{};var n,a,o={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var b=o.a.createContext({}),p=function(e){var t=o.a.useContext(b),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},s=function(e){var t=p(e.components);return o.a.createElement(b.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},u=o.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,i=e.parentName,b=c(e,["components","mdxType","originalType","parentName"]),s=p(n),u=a,m=s["".concat(i,".").concat(u)]||s[u]||d[u]||r;return n?o.a.createElement(m,l(l({ref:t},b),{},{components:n})):o.a.createElement(m,l({ref:t},b))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,i=new Array(r);i[0]=u;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:a,i[1]=l;for(var b=2;b<r;b++)i[b]=n[b];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},1016:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAZCAIAAABCYLJOAAACLUlEQVR4Ab2Vw6IfPxiG3zfJHPPP2rbdfW3rProsLqCr7rqsbVur2raPPb+Z5Du2+YyRJ87HtLQ0dAIKnYNBQ5BEI4hI271BEIjUNZAgqbUm2WovyRLpyVMnfd83xggq3ATDMHTOzZo1q3ev3iRbXV4RKZEuXLBQayPOAQSESjlnDx85nJ+fjwpa7zUlaHPj2CO/oLTUNnTR8Wb2kvGeZ9rVbwJxTuArm69haAMaqtJXgnZ5y1tVmxKsMoqgKS0p2z1+WdEgItWXjp4XJEiCHesVZ50LnbUOrcE0LQURk2BsYHU0ASmnuqUgrfaSEAcvWs9eMQbKGe0J0L17j8TERJICW+hnx0Ylk6o17SAVF6U1lL3/bld+UbrAzpgx9f///4sEeT/TH955srMwkk2wNeUlROCsiBNCicu7dH+zH5BUgChapThh0NrYqCRpbTsoxZiEKBu60EbSsr+m5Z7RaoiIJQkQkv3lz8De/8/0tJEWekmKdSXb9MUjRYK7L3bk+996/7PpT/Zr6yIko0xcSsK0r2n33/+4NLjnXNIA0nz7kizy/b379ly6ckGIb+kPUhP7zZu5zTN/B/ZzaL+lxPecN2O7YsKbL2edOLLF5f3/v/+zsrOSk1MAxEb1z8j5dezaVggTYiYDyCnIP359q4gENl4EDdJwfLPWAiCplAptABEHp2oMKSfljzTaa0W/GVPxXkQ8EwWw5gCs+VhCK7w1/25o0ZHOj8dd7C0GRnwgNA5r8rwAAAAASUVORK5CYII="},1030:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/GettingStartedAndroidStudioWelcomeWindows-b88d46e9a7fe5e050224a9a295148222.png"},1031:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAo0AAAClCAMAAAAOEzcNAAABwlBMVEVfosv///8AAADMzMz//7ZmAABmtv9mADqQ2///25A6ADq2ZgA6kNv/tmYAZrYFBwg6AGa2//9mAGY6AAA6kJCQ27b//9uQOgAAAGZmZjq2/7aQtpDbkDoAADoAOpDb//86OpDb/9uQOjoAOmZmOjrw8PB6enqrYAA2h87wq2AAYKvwzoc2ADaHzvDw8KtgADZgq/A6OmY6OgA6Ojo2AGCr8PBgAGAAZmbw8M6HNgBgYDYAAGCr8KuHq4c2AACHh2DOhzYANofO8PBgAADb/7Y2NofO8M6HNjYAADZmtrYANmBgNjaQOmYAeNczmf/MZgCg7v//7v9amf/B//9/mf+gq/9/3v//3v/hzv8zq//h//8zvP/BvP+gvP/h7v/B7v/h3v9azv/B3v+gzv9gNoc2NmBgNmClZgAAYGCtra3h4eHh4aBaAABaoOEzf8HhwX8zADN/weFaADPhoFrh4cF/MwAAWqAAM3/B4eEzAFqg4eEAADOgWgAzAAB/oOHBfzNaWjMAAFozWqBaoKAzMwB/MzN/f1ozMzMzM3+gWjN/oH/B4cFaAFpaM39/waB/M1qgwX9aWlozM1paMzMAM1q/v7+vTvonAAAKLUlEQVR4Aeyd17arNhBAo3EBAnZyesO39957r+n5/7/JDBouxrfiNLO89wNiNOPztJdG4jzouxUCIACsBtgI2AiAjYCNANgI/bYRABsBsBGwEUAGcRzIJ20cjkRkXL0lafZ9qi8e+GORvNDHZBpq/Dde7QPAJxn8MPDh0zYmLQHt+SUbXcR8HFpgYwfQ0R7/jI3ZjxthuLmBjcuCjibjF23MtmQ7SYfJzkhkOmfj7p7I2LL7G8PkYF8l3N0b2/qYW51NHWqlB0dbUtiPYn34JICOLuOn941m2mgcylmqJi2sjZNazUkxHBXBKIvYqK14FO3z4Nhx3UTqW6wP3QBsdJmyE8ft7WMbs62iWjhFpp7R2pOn1DaRyl4ragL1VIdYH7oCdOpP27irwlVbxFDKWEevjKmjE8d1SkvcxibQNh7jALDsKabdqY382PGQT4NSeo/2jPlZhEndlW3ag1Fh/noDB1jiC89IxOwS2Y4q5rHH2vFFhZzYrtJatXdqQ82z9OkztY11cCAy9lNMl04NfP0G4D+DAGtgI2AjADYCNgJgI2AjADYCNgJgI2DjWYDVABsBGwGwEbARABsBGwGwEbARABsBGwGwEbARABsBGwGwEQAbARsBsBGwEQAbARsB/jkbAbDxHKwpK2ljgLUEG/8+gI2AjdgI2AjYeP6CPi5e+hBfvnI1vly7ftWHf9PGeGfXcOQXbPp9Ss097hOPNzc8tXCDsVf4n1DKWeo/hr7Z6CKev9Gu+e9szG6eSU2rW+Noo/plXtk42d8Ik5ld3VWYjZ5asLGpSG5XUyO/grOPYOPlO3fPXrt39/+ysSzKwrTSyzRrG/3CQgvtPuwYq42eamxsVyQHha2l95P+2oiNDx7esPXxvMglNe/R4ydqnwdPn8mFysbLz+Tx3crM56JTc/kbL2wiFlx8+aqrjXbdaxY9zIvaRr/M1S7
Line truncated
|
||||
@@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[115],{1008:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return m}));var a=n(0),o=n.n(a);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,a,o=function(e,t){if(null==e)return{};var n,a,o={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var b=o.a.createContext({}),s=function(e){var t=o.a.useContext(b),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=s(e.components);return o.a.createElement(b.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},u=o.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,i=e.parentName,b=c(e,["components","mdxType","originalType","parentName"]),p=s(n),u=a,m=p["".concat(i,".").concat(u)]||p[u]||d[u]||r;return n?o.a.createElement(m,l(l({ref:t},b),{},{components:n})):o.a.createElement(m,l({ref:t},b))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,i=new Array(r);i[0]=u;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:a,i[1]=l;for(var b=2;b<r;b++)i[b]=n[b];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},1016:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAZCAIAAABCYLJOAAACLUlEQVR4Ab2Vw6IfPxiG3zfJHPPP2rbdfW3rProsLqCr7rqsbVur2raPPb+Z5Du2+YyRJ87HtLQ0dAIKnYNBQ5BEI4hI271BEIjUNZAgqbUm2WovyRLpyVMnfd83xggq3ATDMHTOzZo1q3ev3iRbXV4RKZEuXLBQayPOAQSESjlnDx85nJ+fjwpa7zUlaHPj2CO/oLTUNnTR8Wb2kvGeZ9rVbwJxTuArm69haAMaqtJXgnZ5y1tVmxKsMoqgKS0p2z1+WdEgItWXjp4XJEiCHesVZ50LnbUOrcE0LQURk2BsYHU0ASmnuqUgrfaSEAcvWs9eMQbKGe0J0L17j8TERJICW+hnx0Ylk6o17SAVF6U1lL3/bld+UbrAzpgx9f///4sEeT/TH955srMwkk2wNeUlROCsiBNCicu7dH+zH5BUgChapThh0NrYqCRpbTsoxZiEKBu60EbSsr+m5Z7RaoiIJQkQkv3lz8De/8/0tJEWekmKdSXb9MUjRYK7L3bk+996/7PpT/Zr6yIko0xcSsK0r2n33/+4NLjnXNIA0nz7kizy/b379ly6ckGIb+kPUhP7zZu5zTN/B/ZzaL+lxPecN2O7YsKbL2edOLLF5f3/v/+zsrOSk1MAxEb1z8j5dezaVggTYiYDyCnIP359q4gENl4EDdJwfLPWAiCplAptABEHp2oMKSfljzTaa0W/GVPxXkQ8EwWw5gCs+VhCK7w1/25o0ZHOj8dd7C0GRnwgNA5r8rwAAAAASUVORK5CYII="},1030:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/GettingStartedAndroidStudioWelcomeWindows-b88d46e9a7fe5e050224a9a295148222.png"},1031:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAo0AAAClCAMAAAAOEzcNAAABwlBMVEVfosv///8AAADMzMz//7ZmAABmtv9mADqQ2///25A6ADq2ZgA6kNv/tmYAZrYFBwg6AGa2//9mAGY6AAA6kJCQ27b//9uQOgAAAGZmZjq2/7aQtpDbkDoAADoAOpDb//86OpDb/9uQOjoAOmZmOjrw8PB6enqrYAA2h87wq2AAYKvwzoc2ADaHzvDw8KtgADZgq/A6OmY6OgA6Ojo2AGCr8PBgAGAAZmbw8M6HNgBgYDYAAGCr8KuHq4c2AACHh2DOhzYANofO8PBgAADb/7Y2NofO8M6HNjYAADZmtrYANmBgNjaQOmYAeNczmf/MZgCg7v//7v9amf/B//9/mf+gq/9/3v//3v/hzv8zq//h//8zvP/BvP+gvP/h7v/B7v/h3v9azv/B3v+gzv9gNoc2NmBgNmClZgAAYGCtra3h4eHh4aBaAABaoOEzf8HhwX8zADN/weFaADPhoFrh4cF/MwAAWqAAM3/B4eEzAFqg4eEAADOgWgAzAAB/oOHBfzNaWjMAAFozWqBaoKAzMwB/MzN/f1ozMzMzM3+gWjN/oH/B4cFaAFpaM39/waB/M1qgwX9aWlozM1paMzMAM1q/v7+vTvonAAAKLUlEQVR4Aeyd17arNhBAo3EBAnZyesO39957r+n5/7/JDBouxrfiNLO89wNiNOPztJdG4jzouxUCIACsBtgI2AiAjYCNANgI/bYRABsBsBGwEUAGcRzIJ20cjkRkXL0lafZ9qi8e+GORvNDHZBpq/Dde7QPAJxn8MPDh0zYmLQHt+SUbXcR8HFpgYwfQ0R7/jI3ZjxthuLmBjcuCjibjF23MtmQ7SYfJzkhkOmfj7p7I2LL7G8PkYF8l3N0b2/qYW51NHWqlB0dbUtiPYn34JICOLuOn941m2mgcylmqJi2sjZNazUkxHBXBKIvYqK14FO3z4Nhx3UTqW6wP3QBsdJmyE8ft7WMbs62iWjhFpp7R2pOn1DaRyl4ragL1VIdYH7oCdOpP27irwlVbxFDKWEevjKmjE8d1SkvcxibQNh7jALDsKabdqY382PGQT4NSeo/2jPlZhEndlW3ag1Fh/noDB1jiC89IxOwS2Y4q5rHH2vFFhZzYrtJatXdqQ82z9OkztY11cCAy9lNMl04NfP0G4D+DAGtgI2AjADYCNgJgI2AjADYCNgJgI2DjWYDVABsBGwGwEbARABsBGwGwEbARABsBGwGwEbARABsBGwGwEQAbARsBsBGwEQAbARsB/jkbAbDxHKwpK2ljgLUEG/8+gI2AjdgI2AjYeP6CPi5e+hBfvnI1vly7ftWHf9PGeGfXcOQXbPp9Ss097hOPNzc8tXCDsVf4n1DKWeo/hr7Z6CKev9Gu+e9szG6eSU2rW+Noo/plXtk42d8Ik5ld3VWYjZ5asLGpSG5XUyO/grOPYOPlO3fPXrt39/+ysSzKwrTSyzRrG/3CQgvtPuwYq42eamxsVyQHha2l95P+2oiNDx7esPXxvMglNe/R4ydqnwdPn8mFysbLz+Tx3crM56JTc/kbL2wiFlx8+aqrjXbdaxY9zIvaRr/M1S7
Line truncated
|
||||
@@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[121],{1008:function(e,t,a){"use strict";a.d(t,"a",(function(){return s})),a.d(t,"b",(function(){return h}));var n=a(0),r=a.n(n);function o(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function i(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function c(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?i(Object(a),!0).forEach((function(t){o(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function p(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var u=r.a.createContext({}),l=function(e){var t=r.a.useContext(u),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},s=function(e){var t=l(e.components);return r.a.createElement(u.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},b=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),s=l(a),b=n,h=s["".concat(i,".").concat(b)]||s[b]||d[b]||o;return a?r.a.createElement(h,c(c({ref:t},u),{},{components:a})):r.a.createElement(h,c({ref:t},u))}));function h(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,i=new Array(o);i[0]=b;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var u=2;u<o;u++)i[u]=a[u];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,a)}b.displayName="MDXCreateElement"},210:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return i})),a.d(t,"metadata",(function(){return c})),a.d(t,"rightToc",(function(){return p})),a.d(t,"default",(function(){return l}));var n=a(2),r=a(7),o=(a(0),a(1008)),i={title:"Introducing Create React Native App",author:"Adam Perry",authorTitle:"Software Engineer at Expo",authorURL:"https://github.com/dikaiosune",authorImageURL:"https://avatars2.githubusercontent.com/u/6812281",authorTwitter:"dika10sune",tags:["engineering"],youtubeVideoId:"9baaVjGdBqs"},c={permalink:"/blog/2017/03/13/introducing-create-react-native-app",source:"@site/blog/2017-03-13-introducing-create-react-native-app.md",description:"Today we\u2019re announcing Create React Native App: a new tool that makes it significantly easier to get started with a React Native project! It\u2019s heavily inspired by the design of Create React App and is the product of a collaboration between Facebook and Expo (formerly Exponent).",date:"2017-03-13T00:00:00.000Z",tags:[{label:"engineering",permalink:"/blog/tags/engineering"}],title:"Introducing Create React Native App",readingTime:1.815,truncated:!1,prevItem:{title:"idx: The Existential Function",permalink:"/blog/2017/03/13/idx-the-existential-function"},nextItem:{title:"Using Native Driver for Animated",permalink:"/blog/2017/02/14/using-native-driver-for-animated"}},p=[{value:"What about native code?",id:"what-about-native-code",children:[]},{value:"Questions? Feedback?",id:"questions-feedback",children:[]}],u={rightToc:p};function l(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},u,a,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Today we\u2019re announcing ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/react-community/create-react-native-app"}),"Create React Native App"),": a new tool that makes it significantly easier to get started with a React Native project! It\u2019s heavily inspired by the design of ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/facebookincubator/create-react-app"}),"Create React App")," and is the product of a collaboration between ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://code.facebook.com"}),"Facebook")," and ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://expo.io"}),"Expo")," (formerly Exponent)."),Object(o.b)("p",null,"Many developers struggle with installing and configuring React Native\u2019s current native build dependencies, especially for Android. With Create React Native App, there\u2019s no need to use Xcode or Android Studio, and you can develop for your iOS device using Linux or Windows. This is accomplished using the Expo app, whLine truncated
|
||||
@@ -1 +0,0 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[121],{1008:function(e,t,a){"use strict";a.d(t,"a",(function(){return s})),a.d(t,"b",(function(){return h}));var n=a(0),r=a.n(n);function o(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function i(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function c(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?i(Object(a),!0).forEach((function(t){o(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function p(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var l=r.a.createContext({}),u=function(e){var t=r.a.useContext(l),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},s=function(e){var t=u(e.components);return r.a.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},b=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),s=u(a),b=n,h=s["".concat(i,".").concat(b)]||s[b]||d[b]||o;return a?r.a.createElement(h,c(c({ref:t},l),{},{components:a})):r.a.createElement(h,c({ref:t},l))}));function h(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,i=new Array(o);i[0]=b;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var l=2;l<o;l++)i[l]=a[l];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,a)}b.displayName="MDXCreateElement"},210:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return i})),a.d(t,"metadata",(function(){return c})),a.d(t,"rightToc",(function(){return p})),a.d(t,"default",(function(){return u}));var n=a(2),r=a(7),o=(a(0),a(1008)),i={title:"Introducing Create React Native App",author:"Adam Perry",authorTitle:"Software Engineer at Expo",authorURL:"https://github.com/dikaiosune",authorImageURL:"https://avatars2.githubusercontent.com/u/6812281",authorTwitter:"dika10sune",tags:["engineering"],youtubeVideoId:"9baaVjGdBqs"},c={permalink:"/blog/2017/03/13/introducing-create-react-native-app",source:"@site/blog/2017-03-13-introducing-create-react-native-app.md",description:"Today we\u2019re announcing Create React Native App: a new tool that makes it significantly easier to get started with a React Native project! It\u2019s heavily inspired by the design of Create React App and is the product of a collaboration between Facebook and Expo (formerly Exponent).",date:"2017-03-13T00:00:00.000Z",tags:[{label:"engineering",permalink:"/blog/tags/engineering"}],title:"Introducing Create React Native App",readingTime:1.815,truncated:!1,prevItem:{title:"Better List Views in React Native",permalink:"/blog/2017/03/13/better-list-views"},nextItem:{title:"idx: The Existential Function",permalink:"/blog/2017/03/13/idx-the-existential-function"}},p=[{value:"What about native code?",id:"what-about-native-code",children:[]},{value:"Questions? Feedback?",id:"questions-feedback",children:[]}],l={rightToc:p};function u(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,a,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Today we\u2019re announcing ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/react-community/create-react-native-app"}),"Create React Native App"),": a new tool that makes it significantly easier to get started with a React Native project! It\u2019s heavily inspired by the design of ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/facebookincubator/create-react-app"}),"Create React App")," and is the product of a collaboration between ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://code.facebook.com"}),"Facebook")," and ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://expo.io"}),"Expo")," (formerly Exponent)."),Object(o.b)("p",null,"Many developers struggle with installing and configuring React Native\u2019s current native build dependencies, especially for Android. With Create React Native App, there\u2019s no need to use Xcode or Android Studio, and you can develop for your iOS device using Linux or Windows. This is accomplished using the Expo app, which loads and
Line truncated
|
||||
@@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[181],{1008:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return b}));var a=n(0),r=n.n(a);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c=r.a.createContext({}),d=function(e){var t=r.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},p=function(e){var t=d(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},u=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=d(n),u=a,b=p["".concat(o,".").concat(u)]||p[u]||m[u]||i;return n?r.a.createElement(b,s(s({ref:t},c),{},{components:n})):r.a.createElement(b,s({ref:t},c))}));function b(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=u;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s.mdxType="string"==typeof e?e:a,o[1]=s;for(var c=2;c<i;c++)o[c]=n[c];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},269:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return s})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return d}));var a=n(2),r=n(7),i=(n(0),n(1008)),o={title:"Better List Views in React Native",author:"Spencer Ahrens",authorTitle:"Software Engineer at Facebook",authorURL:"https://github.com/sahrens",authorImageURL:"https://avatars1.githubusercontent.com/u/1509831",authorTwitter:"sahrens2012",tags:["engineering"]},s={permalink:"/blog/2017/03/13/better-list-views",source:"@site/blog/2017-03-13-better-list-views.md",description:"Many of you have started playing with some of our new List components already after our teaser announcement in the community group, but we are officially announcing them today! No more ListViews or DataSources, stale rows, ignored bugs, or excessive memory consumption - with the latest React Native March 2017 release candidate (0.43-rc.1) you can pick from the new suite of components what best fits your use-case, with great perf and feature sets out of the box:",date:"2017-03-13T00:00:00.000Z",tags:[{label:"engineering",permalink:"/blog/tags/engineering"}],title:"Better List Views in React Native",readingTime:5.255,truncated:!1,prevItem:{title:"React Native Monthly #1",permalink:"/blog/2017/06/21/react-native-monthly-1"},nextItem:{title:"idx: The Existential Function",permalink:"/blog/2017/03/13/idx-the-existential-function"}},l=[{value:"<FlatList>",id:"flatlist",children:[]},{value:"<SectionList>",id:"sectionlist",children:[]},{value:"<VirtualizedList>",id:"virtualizedlist",children:[]},{value:"Features",id:"features",children:[{value:"Some Caveats",id:"some-caveats",children:[]}]},{value:"Performance",id:"performance",children:[]},{value:"Advanced Usage",id:"advanced-usage",children:[]},{value:"Future Work",id:"future-work",children:[]}],c={rightToc:l};function d(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(a.a)({},c,n,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Many of you have started playing with some of our new List components already after our ",Object(i.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.facebook.com/groups/react.native.community/permalink/921378591331053"}),"teaser announcement in the community group"),", but we are officially announcing them today! No more ",Object(i.b)("inlineCode",{parentName:"p"},"ListView"),"s or ",Object(i.b)("inlineCode",{parentName:"p"},"DataSource"),"s, stale rows, ignored bugs, or excessive memory consumption - with the latest React Native March 2017 release candidate (",Object(i.b)("inlineCode",{parentName:"p"},"0.43-rc.1"),") you can pick from the new suite of compoLine truncated
|
||||
@@ -1 +0,0 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[181],{1008:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return b}));var a=n(0),r=n.n(a);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c=r.a.createContext({}),p=function(e){var t=r.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},d=function(e){var t=p(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},u=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),d=p(n),u=a,b=d["".concat(o,".").concat(u)]||d[u]||m[u]||i;return n?r.a.createElement(b,s(s({ref:t},c),{},{components:n})):r.a.createElement(b,s({ref:t},c))}));function b(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=u;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s.mdxType="string"==typeof e?e:a,o[1]=s;for(var c=2;c<i;c++)o[c]=n[c];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},269:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return s})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return p}));var a=n(2),r=n(7),i=(n(0),n(1008)),o={title:"Better List Views in React Native",author:"Spencer Ahrens",authorTitle:"Software Engineer at Facebook",authorURL:"https://github.com/sahrens",authorImageURL:"https://avatars1.githubusercontent.com/u/1509831",authorTwitter:"sahrens2012",tags:["engineering"]},s={permalink:"/blog/2017/03/13/better-list-views",source:"@site/blog/2017-03-13-better-list-views.md",description:"Many of you have started playing with some of our new List components already after our teaser announcement in the community group, but we are officially announcing them today! No more ListViews or DataSources, stale rows, ignored bugs, or excessive memory consumption - with the latest React Native March 2017 release candidate (0.43-rc.1) you can pick from the new suite of components what best fits your use-case, with great perf and feature sets out of the box:",date:"2017-03-13T00:00:00.000Z",tags:[{label:"engineering",permalink:"/blog/tags/engineering"}],title:"Better List Views in React Native",readingTime:5.255,truncated:!1,prevItem:{title:"React Native Monthly #1",permalink:"/blog/2017/06/21/react-native-monthly-1"},nextItem:{title:"Introducing Create React Native App",permalink:"/blog/2017/03/13/introducing-create-react-native-app"}},l=[{value:"<FlatList>",id:"flatlist",children:[]},{value:"<SectionList>",id:"sectionlist",children:[]},{value:"<VirtualizedList>",id:"virtualizedlist",children:[]},{value:"Features",id:"features",children:[{value:"Some Caveats",id:"some-caveats",children:[]}]},{value:"Performance",id:"performance",children:[]},{value:"Advanced Usage",id:"advanced-usage",children:[]},{value:"Future Work",id:"future-work",children:[]}],c={rightToc:l};function p(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(a.a)({},c,n,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Many of you have started playing with some of our new List components already after our ",Object(i.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.facebook.com/groups/react.native.community/permalink/921378591331053"}),"teaser announcement in the community group"),", but we are officially announcing them today! No more ",Object(i.b)("inlineCode",{parentName:"p"},"ListView"),"s or ",Object(i.b)("inlineCode",{parentName:"p"},"DataSource"),"s, stale rows, ignored bugs, or excessive memory consumption - with the latest React Native March 2017 release candidate (",Object(i.b)("inlineCode",{parentName:"p"},"0.43-rc.1"),") you can pick from the new sLine truncated
|
||||
@@ -18,14 +18,14 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Page Not Found · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Page Not Found · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a class="menu__link" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--xl"><div class="row"><div class="col col--6 col--offset-3"><h1 class="hero__title">Page Not Found</h1><p>We could not find what you were looking for.</p><p>Please contact the owner of the site that linked you to the original URL and let them know their link is bLine truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1 +0,0 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[300],{1008:function(e,t,a){"use strict";a.d(t,"a",(function(){return s})),a.d(t,"b",(function(){return h}));var n=a(0),r=a.n(n);function o(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function i(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function c(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?i(Object(a),!0).forEach((function(t){o(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function p(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var l=r.a.createContext({}),u=function(e){var t=r.a.useContext(l),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},s=function(e){var t=u(e.components);return r.a.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},b=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),s=u(a),b=n,h=s["".concat(i,".").concat(b)]||s[b]||d[b]||o;return a?r.a.createElement(h,c(c({ref:t},l),{},{components:a})):r.a.createElement(h,c({ref:t},l))}));function h(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,i=new Array(o);i[0]=b;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var l=2;l<o;l++)i[l]=a[l];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,a)}b.displayName="MDXCreateElement"},384:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return i})),a.d(t,"metadata",(function(){return c})),a.d(t,"rightToc",(function(){return p})),a.d(t,"default",(function(){return u}));var n=a(2),r=a(7),o=(a(0),a(1008)),i={title:"Introducing Create React Native App",author:"Adam Perry",authorTitle:"Software Engineer at Expo",authorURL:"https://github.com/dikaiosune",authorImageURL:"https://avatars2.githubusercontent.com/u/6812281",authorTwitter:"dika10sune",tags:["engineering"],youtubeVideoId:"9baaVjGdBqs"},c={permalink:"/blog/2017/03/13/introducing-create-react-native-app",source:"@site/blog/2017-03-13-introducing-create-react-native-app.md",description:"Today we\u2019re announcing Create React Native App: a new tool that makes it significantly easier to get started with a React Native project! It\u2019s heavily inspired by the design of Create React App and is the product of a collaboration between Facebook and Expo (formerly Exponent).",date:"2017-03-13T00:00:00.000Z",tags:[{label:"engineering",permalink:"/blog/tags/engineering"}],title:"Introducing Create React Native App",readingTime:1.815,truncated:!1,prevItem:{title:"Better List Views in React Native",permalink:"/blog/2017/03/13/better-list-views"},nextItem:{title:"idx: The Existential Function",permalink:"/blog/2017/03/13/idx-the-existential-function"}},p=[{value:"What about native code?",id:"what-about-native-code",children:[]},{value:"Questions? Feedback?",id:"questions-feedback",children:[]}],l={rightToc:p};function u(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,a,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Today we\u2019re announcing ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/react-community/create-react-native-app"}),"Create React Native App"),": a new tool that makes it significantly easier to get started with a React Native project! It\u2019s heavily inspired by the design of ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/facebookincubator/create-react-app"}),"Create React App")," and is the product of a collaboration between ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://code.facebook.com"}),"Facebook")," and ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://expo.io"}),"Expo")," (formerly Exponent)."),Object(o.b)("p",null,"Many developers struggle with installing and configuring React Native\u2019s current native build dependencies, especially for Android. With Create React Native App, there\u2019s no need to use Xcode or Android Studio, and you can develop for your iOS device using Linux or Windows. This is accomplished using the Expo app, which loads and
Line truncated
|
||||
@@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[300],{1008:function(e,t,a){"use strict";a.d(t,"a",(function(){return s})),a.d(t,"b",(function(){return h}));var n=a(0),r=a.n(n);function o(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function i(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function c(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?i(Object(a),!0).forEach((function(t){o(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function p(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var u=r.a.createContext({}),l=function(e){var t=r.a.useContext(u),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},s=function(e){var t=l(e.components);return r.a.createElement(u.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},b=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),s=l(a),b=n,h=s["".concat(i,".").concat(b)]||s[b]||d[b]||o;return a?r.a.createElement(h,c(c({ref:t},u),{},{components:a})):r.a.createElement(h,c({ref:t},u))}));function h(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,i=new Array(o);i[0]=b;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:n,i[1]=c;for(var u=2;u<o;u++)i[u]=a[u];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,a)}b.displayName="MDXCreateElement"},384:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return i})),a.d(t,"metadata",(function(){return c})),a.d(t,"rightToc",(function(){return p})),a.d(t,"default",(function(){return l}));var n=a(2),r=a(7),o=(a(0),a(1008)),i={title:"Introducing Create React Native App",author:"Adam Perry",authorTitle:"Software Engineer at Expo",authorURL:"https://github.com/dikaiosune",authorImageURL:"https://avatars2.githubusercontent.com/u/6812281",authorTwitter:"dika10sune",tags:["engineering"],youtubeVideoId:"9baaVjGdBqs"},c={permalink:"/blog/2017/03/13/introducing-create-react-native-app",source:"@site/blog/2017-03-13-introducing-create-react-native-app.md",description:"Today we\u2019re announcing Create React Native App: a new tool that makes it significantly easier to get started with a React Native project! It\u2019s heavily inspired by the design of Create React App and is the product of a collaboration between Facebook and Expo (formerly Exponent).",date:"2017-03-13T00:00:00.000Z",tags:[{label:"engineering",permalink:"/blog/tags/engineering"}],title:"Introducing Create React Native App",readingTime:1.815,truncated:!1,prevItem:{title:"idx: The Existential Function",permalink:"/blog/2017/03/13/idx-the-existential-function"},nextItem:{title:"Using Native Driver for Animated",permalink:"/blog/2017/02/14/using-native-driver-for-animated"}},p=[{value:"What about native code?",id:"what-about-native-code",children:[]},{value:"Questions? Feedback?",id:"questions-feedback",children:[]}],u={rightToc:p};function l(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},u,a,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Today we\u2019re announcing ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/react-community/create-react-native-app"}),"Create React Native App"),": a new tool that makes it significantly easier to get started with a React Native project! It\u2019s heavily inspired by the design of ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/facebookincubator/create-react-app"}),"Create React App")," and is the product of a collaboration between ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://code.facebook.com"}),"Facebook")," and ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://expo.io"}),"Expo")," (formerly Exponent)."),Object(o.b)("p",null,"Many developers struggle with installing and configuring React Native\u2019s current native build dependencies, especially for Android. With Create React Native App, there\u2019s no need to use Xcode or Android Studio, and you can develop for your iOS device using Linux or Windows. This is accomplished using the Expo app, whLine truncated
|
||||
@@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[338],{1008:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return f}));var r=n(0),a=n.n(r);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),p=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},u=function(e){var t=p(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,o=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),u=p(n),d=r,f=u["".concat(o,".").concat(d)]||u[d]||b[d]||i;return n?a.a.createElement(f,s(s({ref:t},l),{},{components:n})):a.a.createElement(f,s({ref:t},l))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[0]=d;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s.mdxType="string"==typeof e?e:r,o[1]=s;for(var l=2;l<i;l++)o[l]=n[l];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},421:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return s})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return p}));var r=n(2),a=n(7),i=(n(0),n(1008)),o={title:"idx: The Existential Function",author:"Timothy Yung",authorTitle:"Engineering Manager at Facebook",authorURL:"https://github.com/yungsters",authorImageURL:"https://pbs.twimg.com/profile_images/1592444107/image.jpg",authorTwitter:"yungsters",tags:["engineering"]},s={permalink:"/blog/2017/03/13/idx-the-existential-function",source:"@site/blog/2017-03-13-idx-the-existential-function.md",description:"At Facebook, we often need to access deeply nested values in data structures fetched with GraphQL. On the way to accessing these deeply nested values, it is common for one or more intermediate fields to be nullable. These intermediate fields may be null for a variety of reasons, from failed privacy checks to the mere fact that null happens to be the most flexible way to represent non-fatal errors.",date:"2017-03-13T00:00:00.000Z",tags:[{label:"engineering",permalink:"/blog/tags/engineering"}],title:"idx: The Existential Function",readingTime:1.89,truncated:!1,prevItem:{title:"Better List Views in React Native",permalink:"/blog/2017/03/13/better-list-views"},nextItem:{title:"Introducing Create React Native App",permalink:"/blog/2017/03/13/introducing-create-react-native-app"}},c=[],l={rightToc:c};function p(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(r.a)({},l,n,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"At Facebook, we often need to access deeply nested values in data structures fetched with GraphQL. On the way to accessing these deeply nested values, it is common for one or more intermediate fields to be nullable. These intermediate fields may be null for a variety of reasons, from failed privacy checks to the mere fact that null happens to be the most flexible way to represent non-fatal errors."),Object(i.b)("p",null,"Unfortunately, accessing these deeply nested values is currently tedious and verbose."),Object(i.b)("pre",null,Object(i.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"props.user &&\n props.user.friends &&\n props.user.friends[0] &&\n props.user.friends[0].friends;\n")),Object(i.b)("p",null,"There is ",Object(i.b)("a",Object(r.a)({parentName:"p"},{href:"https://github.com/claudepache/es-optional-chaining"}),"an ECMAScript proposal to introduce the existential operator")," which will make this much more convenient. But until a time when that proposal is finalized, we want a solution that improves our quality of life, maintains existing language semantics,Line truncated
|
||||
@@ -1 +0,0 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[338],{1008:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return f}));var r=n(0),a=n.n(r);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),p=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},u=function(e){var t=p(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,o=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),u=p(n),d=r,f=u["".concat(o,".").concat(d)]||u[d]||b[d]||i;return n?a.a.createElement(f,s(s({ref:t},l),{},{components:n})):a.a.createElement(f,s({ref:t},l))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[0]=d;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s.mdxType="string"==typeof e?e:r,o[1]=s;for(var l=2;l<i;l++)o[l]=n[l];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},421:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return s})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return p}));var r=n(2),a=n(7),i=(n(0),n(1008)),o={title:"idx: The Existential Function",author:"Timothy Yung",authorTitle:"Engineering Manager at Facebook",authorURL:"https://github.com/yungsters",authorImageURL:"https://pbs.twimg.com/profile_images/1592444107/image.jpg",authorTwitter:"yungsters",tags:["engineering"]},s={permalink:"/blog/2017/03/13/idx-the-existential-function",source:"@site/blog/2017-03-13-idx-the-existential-function.md",description:"At Facebook, we often need to access deeply nested values in data structures fetched with GraphQL. On the way to accessing these deeply nested values, it is common for one or more intermediate fields to be nullable. These intermediate fields may be null for a variety of reasons, from failed privacy checks to the mere fact that null happens to be the most flexible way to represent non-fatal errors.",date:"2017-03-13T00:00:00.000Z",tags:[{label:"engineering",permalink:"/blog/tags/engineering"}],title:"idx: The Existential Function",readingTime:1.89,truncated:!1,prevItem:{title:"Introducing Create React Native App",permalink:"/blog/2017/03/13/introducing-create-react-native-app"},nextItem:{title:"Using Native Driver for Animated",permalink:"/blog/2017/02/14/using-native-driver-for-animated"}},c=[],l={rightToc:c};function p(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(r.a)({},l,n,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"At Facebook, we often need to access deeply nested values in data structures fetched with GraphQL. On the way to accessing these deeply nested values, it is common for one or more intermediate fields to be nullable. These intermediate fields may be null for a variety of reasons, from failed privacy checks to the mere fact that null happens to be the most flexible way to represent non-fatal errors."),Object(i.b)("p",null,"Unfortunately, accessing these deeply nested values is currently tedious and verbose."),Object(i.b)("pre",null,Object(i.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"props.user &&\n props.user.friends &&\n props.user.friends[0] &&\n props.user.friends[0].friends;\n")),Object(i.b)("p",null,"There is ",Object(i.b)("a",Object(r.a)({parentName:"p"},{href:"https://github.com/claudepache/es-optional-chaining"}),"an ECMAScript proposal to introduce the existential operator")," which will make this much more convenient. But until a time when that proposal is finalized, we want a solution that improves our quality of life, maintains existing languLine truncated
|
||||
@@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[407],{1008:function(e,t,a){"use strict";a.d(t,"a",(function(){return p})),a.d(t,"b",(function(){return h}));var n=a(0),i=a.n(n);function r(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function o(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function l(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?o(Object(a),!0).forEach((function(t){r(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):o(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function s(e,t){if(null==e)return{};var a,n,i=function(e,t){if(null==e)return{};var a,n,i={},r=Object.keys(e);for(n=0;n<r.length;n++)a=r[n],t.indexOf(a)>=0||(i[a]=e[a]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n<r.length;n++)a=r[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(i[a]=e[a])}return i}var c=i.a.createContext({}),d=function(e){var t=i.a.useContext(c),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},p=function(e){var t=d(e.components);return i.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},b=i.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,r=e.originalType,o=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=d(a),b=n,h=p["".concat(o,".").concat(b)]||p[b]||u[b]||r;return a?i.a.createElement(h,l(l({ref:t},c),{},{components:a})):i.a.createElement(h,l({ref:t},c))}));function h(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var r=a.length,o=new Array(r);o[0]=b;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l.mdxType="string"==typeof e?e:n,o[1]=l;for(var c=2;c<r;c++)o[c]=a[c];return i.a.createElement.apply(null,o)}return i.a.createElement.apply(null,a)}b.displayName="MDXCreateElement"},1108:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/images/animated-diagram-127161e299f43a8c0e677715d6be7881.png"},491:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return o})),a.d(t,"metadata",(function(){return l})),a.d(t,"rightToc",(function(){return s})),a.d(t,"default",(function(){return d}));var n=a(2),i=a(7),r=(a(0),a(1008)),o={title:"Using Native Driver for Animated",author:"Janic Duplessis",authorTitle:"Software Engineer at App & Flow",authorURL:"https://twitter.com/janicduplessis",authorImageURL:"https://secure.gravatar.com/avatar/8d6b6c0f5b228b0a8566a69de448b9dd?s=128",authorTwitter:"janicduplessis",tags:["engineering"]},l={permalink:"/blog/2017/02/14/using-native-driver-for-animated",source:"@site/blog/2017-02-14-using-native-driver-for-animated.md",description:"For the past year, we've been working on improving performance of animations that use the Animated library. Animations are very important to create a beautiful user experience but can also be hard to do right. We want to make it easy for developers to create performant animations without having to worry about some of their code causing it to lag.",date:"2017-02-14T00:00:00.000Z",tags:[{label:"engineering",permalink:"/blog/tags/engineering"}],title:"Using Native Driver for Animated",readingTime:6.09,truncated:!1,prevItem:{title:"Introducing Create React Native App",permalink:"/blog/2017/03/13/introducing-create-react-native-app"},nextItem:{title:"A Monthly Release Cadence: Releasing December and January RC",permalink:"/blog/2017/01/07/monthly-release-cadence"}},s=[{value:"What is this?",id:"what-is-this",children:[]},{value:"A bit of history...",id:"a-bit-of-history",children:[]},{value:"How does it work?",id:"how-does-it-work",children:[]},{value:"How do I use this in my app?",id:"how-do-i-use-this-in-my-app",children:[]},{value:"Caveats",id:"caveats",children:[]},{value:"Resources",id:"resources",children:[]}],c={rightToc:s};function d(e){var t=e.components,o=Object(i.a)(e,["components"]);return Object(r.b)("wrapper",Object(n.a)({},c,o,{components:t,mdxType:"MDXLayout"}),Object(r.b)("p",null,"For the past year, we've been working on improving performance of animations that use the Animated library. Animations are very important to create a beautiful user experience but can also be hard to do right. We want to make it easy for developers to create performant animations without having to worry about some of their code causing it to lag."),Object(r.b)("h2",{id:"what-is-this"},"What is this?"),Object(r.b)("p",null,"The Animated API was designed with a very important constraint in mind, it is serializable. This means we can send everything about the animation to native before it has even starteLine truncated
|
||||
@@ -1 +0,0 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[407],{1008:function(e,t,a){"use strict";a.d(t,"a",(function(){return u})),a.d(t,"b",(function(){return h}));var n=a(0),i=a.n(n);function r(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function o(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function l(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?o(Object(a),!0).forEach((function(t){r(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):o(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function s(e,t){if(null==e)return{};var a,n,i=function(e,t){if(null==e)return{};var a,n,i={},r=Object.keys(e);for(n=0;n<r.length;n++)a=r[n],t.indexOf(a)>=0||(i[a]=e[a]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n<r.length;n++)a=r[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(i[a]=e[a])}return i}var c=i.a.createContext({}),d=function(e){var t=i.a.useContext(c),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},u=function(e){var t=d(e.components);return i.a.createElement(c.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},b=i.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,r=e.originalType,o=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=d(a),b=n,h=u["".concat(o,".").concat(b)]||u[b]||p[b]||r;return a?i.a.createElement(h,l(l({ref:t},c),{},{components:a})):i.a.createElement(h,l({ref:t},c))}));function h(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var r=a.length,o=new Array(r);o[0]=b;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l.mdxType="string"==typeof e?e:n,o[1]=l;for(var c=2;c<r;c++)o[c]=a[c];return i.a.createElement.apply(null,o)}return i.a.createElement.apply(null,a)}b.displayName="MDXCreateElement"},1108:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/images/animated-diagram-127161e299f43a8c0e677715d6be7881.png"},491:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return o})),a.d(t,"metadata",(function(){return l})),a.d(t,"rightToc",(function(){return s})),a.d(t,"default",(function(){return d}));var n=a(2),i=a(7),r=(a(0),a(1008)),o={title:"Using Native Driver for Animated",author:"Janic Duplessis",authorTitle:"Software Engineer at App & Flow",authorURL:"https://twitter.com/janicduplessis",authorImageURL:"https://secure.gravatar.com/avatar/8d6b6c0f5b228b0a8566a69de448b9dd?s=128",authorTwitter:"janicduplessis",tags:["engineering"]},l={permalink:"/blog/2017/02/14/using-native-driver-for-animated",source:"@site/blog/2017-02-14-using-native-driver-for-animated.md",description:"For the past year, we've been working on improving performance of animations that use the Animated library. Animations are very important to create a beautiful user experience but can also be hard to do right. We want to make it easy for developers to create performant animations without having to worry about some of their code causing it to lag.",date:"2017-02-14T00:00:00.000Z",tags:[{label:"engineering",permalink:"/blog/tags/engineering"}],title:"Using Native Driver for Animated",readingTime:6.09,truncated:!1,prevItem:{title:"idx: The Existential Function",permalink:"/blog/2017/03/13/idx-the-existential-function"},nextItem:{title:"A Monthly Release Cadence: Releasing December and January RC",permalink:"/blog/2017/01/07/monthly-release-cadence"}},s=[{value:"What is this?",id:"what-is-this",children:[]},{value:"A bit of history...",id:"a-bit-of-history",children:[]},{value:"How does it work?",id:"how-does-it-work",children:[]},{value:"How do I use this in my app?",id:"how-do-i-use-this-in-my-app",children:[]},{value:"Caveats",id:"caveats",children:[]},{value:"Resources",id:"resources",children:[]}],c={rightToc:s};function d(e){var t=e.components,o=Object(i.a)(e,["components"]);return Object(r.b)("wrapper",Object(n.a)({},c,o,{components:t,mdxType:"MDXLayout"}),Object(r.b)("p",null,"For the past year, we've been working on improving performance of animations that use the Animated library. Animations are very important to create a beautiful user experience but can also be hard to do right. We want to make it easy for developers to create performant animations without having to worry about some of their code causing it to lag."),Object(r.b)("h2",{id:"what-is-this"},"What is this?"),Object(r.b)("p",null,"The Animated API was designed with a very important constraint in mind, it is serializable. This means we can send everything about the animation to native before it has even started and allows
Line truncated
|
||||
@@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[518],{1008:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return m}));var a=n(0),o=n.n(a);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,a,o=function(e,t){if(null==e)return{};var n,a,o={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var b=o.a.createContext({}),p=function(e){var t=o.a.useContext(b),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},s=function(e){var t=p(e.components);return o.a.createElement(b.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},u=o.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,i=e.parentName,b=c(e,["components","mdxType","originalType","parentName"]),s=p(n),u=a,m=s["".concat(i,".").concat(u)]||s[u]||d[u]||r;return n?o.a.createElement(m,l(l({ref:t},b),{},{components:n})):o.a.createElement(m,l({ref:t},b))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,i=new Array(r);i[0]=u;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:a,i[1]=l;for(var b=2;b<r;b++)i[b]=n[b];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},1016:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAZCAIAAABCYLJOAAACLUlEQVR4Ab2Vw6IfPxiG3zfJHPPP2rbdfW3rProsLqCr7rqsbVur2raPPb+Z5Du2+YyRJ87HtLQ0dAIKnYNBQ5BEI4hI271BEIjUNZAgqbUm2WovyRLpyVMnfd83xggq3ATDMHTOzZo1q3ev3iRbXV4RKZEuXLBQayPOAQSESjlnDx85nJ+fjwpa7zUlaHPj2CO/oLTUNnTR8Wb2kvGeZ9rVbwJxTuArm69haAMaqtJXgnZ5y1tVmxKsMoqgKS0p2z1+WdEgItWXjp4XJEiCHesVZ50LnbUOrcE0LQURk2BsYHU0ASmnuqUgrfaSEAcvWs9eMQbKGe0J0L17j8TERJICW+hnx0Ylk6o17SAVF6U1lL3/bld+UbrAzpgx9f///4sEeT/TH955srMwkk2wNeUlROCsiBNCicu7dH+zH5BUgChapThh0NrYqCRpbTsoxZiEKBu60EbSsr+m5Z7RaoiIJQkQkv3lz8De/8/0tJEWekmKdSXb9MUjRYK7L3bk+996/7PpT/Zr6yIko0xcSsK0r2n33/+4NLjnXNIA0nz7kizy/b379ly6ckGIb+kPUhP7zZu5zTN/B/ZzaL+lxPecN2O7YsKbL2edOLLF5f3/v/+zsrOSk1MAxEb1z8j5dezaVggTYiYDyCnIP359q4gENl4EDdJwfLPWAiCplAptABEHp2oMKSfljzTaa0W/GVPxXkQ8EwWw5gCs+VhCK7w1/25o0ZHOj8dd7C0GRnwgNA5r8rwAAAAASUVORK5CYII="},1030:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/GettingStartedAndroidStudioWelcomeWindows-b88d46e9a7fe5e050224a9a295148222.png"},1031:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAo0AAAClCAMAAAAOEzcNAAABwlBMVEVfosv///8AAADMzMz//7ZmAABmtv9mADqQ2///25A6ADq2ZgA6kNv/tmYAZrYFBwg6AGa2//9mAGY6AAA6kJCQ27b//9uQOgAAAGZmZjq2/7aQtpDbkDoAADoAOpDb//86OpDb/9uQOjoAOmZmOjrw8PB6enqrYAA2h87wq2AAYKvwzoc2ADaHzvDw8KtgADZgq/A6OmY6OgA6Ojo2AGCr8PBgAGAAZmbw8M6HNgBgYDYAAGCr8KuHq4c2AACHh2DOhzYANofO8PBgAADb/7Y2NofO8M6HNjYAADZmtrYANmBgNjaQOmYAeNczmf/MZgCg7v//7v9amf/B//9/mf+gq/9/3v//3v/hzv8zq//h//8zvP/BvP+gvP/h7v/B7v/h3v9azv/B3v+gzv9gNoc2NmBgNmClZgAAYGCtra3h4eHh4aBaAABaoOEzf8HhwX8zADN/weFaADPhoFrh4cF/MwAAWqAAM3/B4eEzAFqg4eEAADOgWgAzAAB/oOHBfzNaWjMAAFozWqBaoKAzMwB/MzN/f1ozMzMzM3+gWjN/oH/B4cFaAFpaM39/waB/M1qgwX9aWlozM1paMzMAM1q/v7+vTvonAAAKLUlEQVR4Aeyd17arNhBAo3EBAnZyesO39957r+n5/7/JDBouxrfiNLO89wNiNOPztJdG4jzouxUCIACsBtgI2AiAjYCNANgI/bYRABsBsBGwEUAGcRzIJ20cjkRkXL0lafZ9qi8e+GORvNDHZBpq/Dde7QPAJxn8MPDh0zYmLQHt+SUbXcR8HFpgYwfQ0R7/jI3ZjxthuLmBjcuCjibjF23MtmQ7SYfJzkhkOmfj7p7I2LL7G8PkYF8l3N0b2/qYW51NHWqlB0dbUtiPYn34JICOLuOn941m2mgcylmqJi2sjZNazUkxHBXBKIvYqK14FO3z4Nhx3UTqW6wP3QBsdJmyE8ft7WMbs62iWjhFpp7R2pOn1DaRyl4ragL1VIdYH7oCdOpP27irwlVbxFDKWEevjKmjE8d1SkvcxibQNh7jALDsKabdqY382PGQT4NSeo/2jPlZhEndlW3ag1Fh/noDB1jiC89IxOwS2Y4q5rHH2vFFhZzYrtJatXdqQ82z9OkztY11cCAy9lNMl04NfP0G4D+DAGtgI2AjADYCNgJgI2AjADYCNgJgI2DjWYDVABsBGwGwEbARABsBGwGwEbARABsBGwGwEbARABsBGwGwEQAbARsBsBGwEQAbARsB/jkbAbDxHKwpK2ljgLUEG/8+gI2AjdgI2AjYeP6CPi5e+hBfvnI1vly7ftWHf9PGeGfXcOQXbPp9Ss097hOPNzc8tXCDsVf4n1DKWeo/hr7Z6CKev9Gu+e9szG6eSU2rW+Noo/plXtk42d8Ik5ld3VWYjZ5asLGpSG5XUyO/grOPYOPlO3fPXrt39/+ysSzKwrTSyzRrG/3CQgvtPuwYq42eamxsVyQHha2l95P+2oiNDx7esPXxvMglNe/R4ydqnwdPn8mFysbLz+Tx3crM56JTc/kbL2wiFlx8+aqrjXbdaxY9zIvaRr/M1S7
Line truncated
|
||||
@@ -1 +0,0 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[518],{1008:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return m}));var a=n(0),o=n.n(a);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,a,o=function(e,t){if(null==e)return{};var n,a,o={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var b=o.a.createContext({}),p=function(e){var t=o.a.useContext(b),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},s=function(e){var t=p(e.components);return o.a.createElement(b.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},u=o.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,i=e.parentName,b=c(e,["components","mdxType","originalType","parentName"]),s=p(n),u=a,m=s["".concat(i,".").concat(u)]||s[u]||d[u]||r;return n?o.a.createElement(m,l(l({ref:t},b),{},{components:n})):o.a.createElement(m,l({ref:t},b))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,i=new Array(r);i[0]=u;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:a,i[1]=l;for(var b=2;b<r;b++)i[b]=n[b];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},1016:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAZCAIAAABCYLJOAAACLUlEQVR4Ab2Vw6IfPxiG3zfJHPPP2rbdfW3rProsLqCr7rqsbVur2raPPb+Z5Du2+YyRJ87HtLQ0dAIKnYNBQ5BEI4hI271BEIjUNZAgqbUm2WovyRLpyVMnfd83xggq3ATDMHTOzZo1q3ev3iRbXV4RKZEuXLBQayPOAQSESjlnDx85nJ+fjwpa7zUlaHPj2CO/oLTUNnTR8Wb2kvGeZ9rVbwJxTuArm69haAMaqtJXgnZ5y1tVmxKsMoqgKS0p2z1+WdEgItWXjp4XJEiCHesVZ50LnbUOrcE0LQURk2BsYHU0ASmnuqUgrfaSEAcvWs9eMQbKGe0J0L17j8TERJICW+hnx0Ylk6o17SAVF6U1lL3/bld+UbrAzpgx9f///4sEeT/TH955srMwkk2wNeUlROCsiBNCicu7dH+zH5BUgChapThh0NrYqCRpbTsoxZiEKBu60EbSsr+m5Z7RaoiIJQkQkv3lz8De/8/0tJEWekmKdSXb9MUjRYK7L3bk+996/7PpT/Zr6yIko0xcSsK0r2n33/+4NLjnXNIA0nz7kizy/b379ly6ckGIb+kPUhP7zZu5zTN/B/ZzaL+lxPecN2O7YsKbL2edOLLF5f3/v/+zsrOSk1MAxEb1z8j5dezaVggTYiYDyCnIP359q4gENl4EDdJwfLPWAiCplAptABEHp2oMKSfljzTaa0W/GVPxXkQ8EwWw5gCs+VhCK7w1/25o0ZHOj8dd7C0GRnwgNA5r8rwAAAAASUVORK5CYII="},1030:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/GettingStartedAndroidStudioWelcomeWindows-b88d46e9a7fe5e050224a9a295148222.png"},1031:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAo0AAAClCAMAAAAOEzcNAAABwlBMVEVfosv///8AAADMzMz//7ZmAABmtv9mADqQ2///25A6ADq2ZgA6kNv/tmYAZrYFBwg6AGa2//9mAGY6AAA6kJCQ27b//9uQOgAAAGZmZjq2/7aQtpDbkDoAADoAOpDb//86OpDb/9uQOjoAOmZmOjrw8PB6enqrYAA2h87wq2AAYKvwzoc2ADaHzvDw8KtgADZgq/A6OmY6OgA6Ojo2AGCr8PBgAGAAZmbw8M6HNgBgYDYAAGCr8KuHq4c2AACHh2DOhzYANofO8PBgAADb/7Y2NofO8M6HNjYAADZmtrYANmBgNjaQOmYAeNczmf/MZgCg7v//7v9amf/B//9/mf+gq/9/3v//3v/hzv8zq//h//8zvP/BvP+gvP/h7v/B7v/h3v9azv/B3v+gzv9gNoc2NmBgNmClZgAAYGCtra3h4eHh4aBaAABaoOEzf8HhwX8zADN/weFaADPhoFrh4cF/MwAAWqAAM3/B4eEzAFqg4eEAADOgWgAzAAB/oOHBfzNaWjMAAFozWqBaoKAzMwB/MzN/f1ozMzMzM3+gWjN/oH/B4cFaAFpaM39/waB/M1qgwX9aWlozM1paMzMAM1q/v7+vTvonAAAKLUlEQVR4Aeyd17arNhBAo3EBAnZyesO39957r+n5/7/JDBouxrfiNLO89wNiNOPztJdG4jzouxUCIACsBtgI2AiAjYCNANgI/bYRABsBsBGwEUAGcRzIJ20cjkRkXL0lafZ9qi8e+GORvNDHZBpq/Dde7QPAJxn8MPDh0zYmLQHt+SUbXcR8HFpgYwfQ0R7/jI3ZjxthuLmBjcuCjibjF23MtmQ7SYfJzkhkOmfj7p7I2LL7G8PkYF8l3N0b2/qYW51NHWqlB0dbUtiPYn34JICOLuOn941m2mgcylmqJi2sjZNazUkxHBXBKIvYqK14FO3z4Nhx3UTqW6wP3QBsdJmyE8ft7WMbs62iWjhFpp7R2pOn1DaRyl4ragL1VIdYH7oCdOpP27irwlVbxFDKWEevjKmjE8d1SkvcxibQNh7jALDsKabdqY382PGQT4NSeo/2jPlZhEndlW3ag1Fh/noDB1jiC89IxOwS2Y4q5rHH2vFFhZzYrtJatXdqQ82z9OkztY11cCAy9lNMl04NfP0G4D+DAGtgI2AjADYCNgJgI2AjADYCNgJgI2DjWYDVABsBGwGwEbARABsBGwGwEbARABsBGwGwEbARABsBGwGwEQAbARsBsBGwEQAbARsB/jkbAbDxHKwpK2ljgLUEG/8+gI2AjdgI2AjYeP6CPi5e+hBfvnI1vly7ftWHf9PGeGfXcOQXbPp9Ss097hOPNzc8tXCDsVf4n1DKWeo/hr7Z6CKev9Gu+e9szG6eSU2rW+Noo/plXtk42d8Ik5ld3VWYjZ5asLGpSG5XUyO/grOPYOPlO3fPXrt39/+ysSzKwrTSyzRrG/3CQgvtPuwYq42eamxsVyQHha2l95P+2oiNDx7esPXxvMglNe/R4ydqnwdPn8mFysbLz+Tx3crM56JTc/kbL2wiFlx8+aqrjXbdaxY9zIvaRr/M1S7
Line truncated
|
||||
@@ -1 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[525,52,158,518,744],{1008:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return m}));var a=n(0),o=n.n(a);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,a,o=function(e,t){if(null==e)return{};var n,a,o={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=o.a.createContext({}),b=function(e){var t=o.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=b(e.components);return o.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},d=o.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,r=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),p=b(n),d=a,m=p["".concat(r,".").concat(d)]||p[d]||u[d]||i;return n?o.a.createElement(m,l(l({ref:t},s),{},{components:n})):o.a.createElement(m,l({ref:t},s))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,r=new Array(i);r[0]=d;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:a,r[1]=l;for(var s=2;s<i;s++)r[s]=n[s];return o.a.createElement.apply(null,r)}return o.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},1009:function(e,t,n){"use strict";function a(e){var t,n,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(n=a(e[t]))&&(o&&(o+=" "),o+=n);else for(t in e)e[t]&&(o&&(o+=" "),o+=t);return o}t.a=function(){for(var e,t,n=0,o="";n<arguments.length;)(e=arguments[n++])&&(t=a(e))&&(o&&(o+=" "),o+=t);return o}},1010:function(e,t,n){"use strict";var a=n(0),o=n(1011);t.a=function(){var e=Object(a.useContext)(o.a);if(null==e)throw new Error("`useUserPreferencesContext` is used outside of `Layout` Component.");return e}},1011:function(e,t,n){"use strict";var a=n(0),o=Object(a.createContext)(void 0);t.a=o},1012:function(e,t,n){"use strict";var a=n(0),o=n.n(a),i=n(1010),r=n(1009),l=n(55),c=n.n(l),s=37,b=39;t.a=function(e){var t=e.block,n=e.children,l=e.defaultValue,p=e.values,u=e.groupId,d=e.className,m=Object(i.a)(),h=m.tabGroupChoices,O=m.setTabGroupChoices,j=Object(a.useState)(l),g=j[0],f=j[1],v=Object(a.useState)(!1),y=v[0],N=v[1];if(null!=u){var w=h[u];null!=w&&w!==g&&p.some((function(e){return e.value===w}))&&f(w)}var A=function(e){f(e),null!=u&&O(u,e)},x=[],k=function(e){e.metaKey||e.altKey||e.ctrlKey||N(!0)},S=function(){N(!1)};return Object(a.useEffect)((function(){return window.addEventListener("keydown",k),window.addEventListener("mousedown",S),function(){window.removeEventListener("keydown",k),window.removeEventListener("mousedown",S)}}),[]),o.a.createElement("div",null,o.a.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:Object(r.a)("tabs",{"tabs--block":t},d)},p.map((function(e){var t=e.value,n=e.label;return o.a.createElement("li",{role:"tab",tabIndex:0,"aria-selected":g===t,className:Object(r.a)("tabs__item",c.a.tabItem,{"tabs__item--active":g===t}),style:y?{}:{outline:"none"},key:t,ref:function(e){return x.push(e)},onKeyDown:function(e){!function(e,t,n){switch(n.keyCode){case b:!function(e,t){var n=e.indexOf(t)+1;e[n]?e[n].focus():e[0].focus()}(e,t);break;case s:!function(e,t){var n=e.indexOf(t)-1;e[n]?e[n].focus():e[e.length-1].focus()}(e,t)}}(x,e.target,e),k(e)},onFocus:function(){return A(t)},onClick:function(){A(t),N(!1)},onPointerDown:function(){return N(!1)}},n)}))),o.a.createElement("div",{role:"tabpanel",className:"margin-vert--md"},a.Children.toArray(n).filter((function(e){return e.props.value===g}))[0]))}},1013:function(e,t,n){"use strict";var a=n(0),o=n.n(a);t.a=function(e){return o.a.createElement("div",null,e.children)}},1014:function(e,t,n){"use strict";var a=n(6),o=!!a.a.canUseDOM&&navigator.platform.startsWith("Mac"),i=!!a.a.canUseDOM&&navigator.platform.startsWith("Win"),r=o?"ios":"android",l=o?"macos":i?"windows":"linux";t.a={defaultGuide:"quickstart",deLine truncated
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[525,52,158,518,744],{1008:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return m}));var a=n(0),o=n.n(a);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,a,o=function(e,t){if(null==e)return{};var n,a,o={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=o.a.createContext({}),b=function(e){var t=o.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=b(e.components);return o.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},d=o.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,r=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),p=b(n),d=a,m=p["".concat(r,".").concat(d)]||p[d]||u[d]||i;return n?o.a.createElement(m,l(l({ref:t},s),{},{components:n})):o.a.createElement(m,l({ref:t},s))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,r=new Array(i);r[0]=d;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:a,r[1]=l;for(var s=2;s<i;s++)r[s]=n[s];return o.a.createElement.apply(null,r)}return o.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},1009:function(e,t,n){"use strict";function a(e){var t,n,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(n=a(e[t]))&&(o&&(o+=" "),o+=n);else for(t in e)e[t]&&(o&&(o+=" "),o+=t);return o}t.a=function(){for(var e,t,n=0,o="";n<arguments.length;)(e=arguments[n++])&&(t=a(e))&&(o&&(o+=" "),o+=t);return o}},1010:function(e,t,n){"use strict";var a=n(0),o=n(1011);t.a=function(){var e=Object(a.useContext)(o.a);if(null==e)throw new Error("`useUserPreferencesContext` is used outside of `Layout` Component.");return e}},1011:function(e,t,n){"use strict";var a=n(0),o=Object(a.createContext)(void 0);t.a=o},1012:function(e,t,n){"use strict";var a=n(0),o=n.n(a),i=n(1010),r=n(1009),l=n(55),c=n.n(l),s=37,b=39;t.a=function(e){var t=e.block,n=e.children,l=e.defaultValue,p=e.values,u=e.groupId,d=e.className,m=Object(i.a)(),h=m.tabGroupChoices,O=m.setTabGroupChoices,j=Object(a.useState)(l),g=j[0],f=j[1],v=Object(a.useState)(!1),y=v[0],N=v[1];if(null!=u){var w=h[u];null!=w&&w!==g&&p.some((function(e){return e.value===w}))&&f(w)}var A=function(e){f(e),null!=u&&O(u,e)},x=[],k=function(e){e.metaKey||e.altKey||e.ctrlKey||N(!0)},S=function(){N(!1)};return Object(a.useEffect)((function(){return window.addEventListener("keydown",k),window.addEventListener("mousedown",S),function(){window.removeEventListener("keydown",k),window.removeEventListener("mousedown",S)}}),[]),o.a.createElement("div",null,o.a.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:Object(r.a)("tabs",{"tabs--block":t},d)},p.map((function(e){var t=e.value,n=e.label;return o.a.createElement("li",{role:"tab",tabIndex:0,"aria-selected":g===t,className:Object(r.a)("tabs__item",c.a.tabItem,{"tabs__item--active":g===t}),style:y?{}:{outline:"none"},key:t,ref:function(e){return x.push(e)},onKeyDown:function(e){!function(e,t,n){switch(n.keyCode){case b:!function(e,t){var n=e.indexOf(t)+1;e[n]?e[n].focus():e[0].focus()}(e,t);break;case s:!function(e,t){var n=e.indexOf(t)-1;e[n]?e[n].focus():e[e.length-1].focus()}(e,t)}}(x,e.target,e),k(e)},onFocus:function(){return A(t)},onClick:function(){A(t),N(!1)},onPointerDown:function(){return N(!1)}},n)}))),o.a.createElement("div",{role:"tabpanel",className:"margin-vert--md"},a.Children.toArray(n).filter((function(e){return e.props.value===g}))[0]))}},1013:function(e,t,n){"use strict";var a=n(0),o=n.n(a);t.a=function(e){return o.a.createElement("div",null,e.children)}},1014:function(e,t,n){"use strict";var a=n(6),o=!!a.a.canUseDOM&&navigator.platform.startsWith("Mac"),i=!!a.a.canUseDOM&&navigator.platform.startsWith("Win"),r=o?"ios":"android",l=o?"macos":i?"windows":"linux";t.a={defaultGuide:"quickstart",deLine truncated
|
||||
@@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[610],{1008:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return b}));var a=n(0),r=n.n(a);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c=r.a.createContext({}),d=function(e){var t=r.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},p=function(e){var t=d(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},u=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=d(n),u=a,b=p["".concat(o,".").concat(u)]||p[u]||m[u]||i;return n?r.a.createElement(b,s(s({ref:t},c),{},{components:n})):r.a.createElement(b,s({ref:t},c))}));function b(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=u;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s.mdxType="string"==typeof e?e:a,o[1]=s;for(var c=2;c<i;c++)o[c]=n[c];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},689:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return s})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return d}));var a=n(2),r=n(7),i=(n(0),n(1008)),o={title:"Better List Views in React Native",author:"Spencer Ahrens",authorTitle:"Software Engineer at Facebook",authorURL:"https://github.com/sahrens",authorImageURL:"https://avatars1.githubusercontent.com/u/1509831",authorTwitter:"sahrens2012",tags:["engineering"]},s={permalink:"/blog/2017/03/13/better-list-views",source:"@site/blog/2017-03-13-better-list-views.md",description:"Many of you have started playing with some of our new List components already after our teaser announcement in the community group, but we are officially announcing them today! No more ListViews or DataSources, stale rows, ignored bugs, or excessive memory consumption - with the latest React Native March 2017 release candidate (0.43-rc.1) you can pick from the new suite of components what best fits your use-case, with great perf and feature sets out of the box:",date:"2017-03-13T00:00:00.000Z",tags:[{label:"engineering",permalink:"/blog/tags/engineering"}],title:"Better List Views in React Native",readingTime:5.255,truncated:!1,prevItem:{title:"React Native Monthly #1",permalink:"/blog/2017/06/21/react-native-monthly-1"},nextItem:{title:"idx: The Existential Function",permalink:"/blog/2017/03/13/idx-the-existential-function"}},l=[{value:"<FlatList>",id:"flatlist",children:[]},{value:"<SectionList>",id:"sectionlist",children:[]},{value:"<VirtualizedList>",id:"virtualizedlist",children:[]},{value:"Features",id:"features",children:[{value:"Some Caveats",id:"some-caveats",children:[]}]},{value:"Performance",id:"performance",children:[]},{value:"Advanced Usage",id:"advanced-usage",children:[]},{value:"Future Work",id:"future-work",children:[]}],c={rightToc:l};function d(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(a.a)({},c,n,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Many of you have started playing with some of our new List components already after our ",Object(i.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.facebook.com/groups/react.native.community/permalink/921378591331053"}),"teaser announcement in the community group"),", but we are officially announcing them today! No more ",Object(i.b)("inlineCode",{parentName:"p"},"ListView"),"s or ",Object(i.b)("inlineCode",{parentName:"p"},"DataSource"),"s, stale rows, ignored bugs, or excessive memory consumption - with the latest React Native March 2017 release candidate (",Object(i.b)("inlineCode",{parentName:"p"},"0.43-rc.1"),") you can pick from the new suite of compoLine truncated
|
||||
@@ -1 +0,0 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[610],{1008:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return b}));var a=n(0),r=n.n(a);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c=r.a.createContext({}),p=function(e){var t=r.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},d=function(e){var t=p(e.components);return r.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},u=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),d=p(n),u=a,b=d["".concat(o,".").concat(u)]||d[u]||m[u]||i;return n?r.a.createElement(b,s(s({ref:t},c),{},{components:n})):r.a.createElement(b,s({ref:t},c))}));function b(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=u;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s.mdxType="string"==typeof e?e:a,o[1]=s;for(var c=2;c<i;c++)o[c]=n[c];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},689:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return s})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return p}));var a=n(2),r=n(7),i=(n(0),n(1008)),o={title:"Better List Views in React Native",author:"Spencer Ahrens",authorTitle:"Software Engineer at Facebook",authorURL:"https://github.com/sahrens",authorImageURL:"https://avatars1.githubusercontent.com/u/1509831",authorTwitter:"sahrens2012",tags:["engineering"]},s={permalink:"/blog/2017/03/13/better-list-views",source:"@site/blog/2017-03-13-better-list-views.md",description:"Many of you have started playing with some of our new List components already after our teaser announcement in the community group, but we are officially announcing them today! No more ListViews or DataSources, stale rows, ignored bugs, or excessive memory consumption - with the latest React Native March 2017 release candidate (0.43-rc.1) you can pick from the new suite of components what best fits your use-case, with great perf and feature sets out of the box:",date:"2017-03-13T00:00:00.000Z",tags:[{label:"engineering",permalink:"/blog/tags/engineering"}],title:"Better List Views in React Native",readingTime:5.255,truncated:!1,prevItem:{title:"React Native Monthly #1",permalink:"/blog/2017/06/21/react-native-monthly-1"},nextItem:{title:"Introducing Create React Native App",permalink:"/blog/2017/03/13/introducing-create-react-native-app"}},l=[{value:"<FlatList>",id:"flatlist",children:[]},{value:"<SectionList>",id:"sectionlist",children:[]},{value:"<VirtualizedList>",id:"virtualizedlist",children:[]},{value:"Features",id:"features",children:[{value:"Some Caveats",id:"some-caveats",children:[]}]},{value:"Performance",id:"performance",children:[]},{value:"Advanced Usage",id:"advanced-usage",children:[]},{value:"Future Work",id:"future-work",children:[]}],c={rightToc:l};function p(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(a.a)({},c,n,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Many of you have started playing with some of our new List components already after our ",Object(i.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.facebook.com/groups/react.native.community/permalink/921378591331053"}),"teaser announcement in the community group"),", but we are officially announcing them today! No more ",Object(i.b)("inlineCode",{parentName:"p"},"ListView"),"s or ",Object(i.b)("inlineCode",{parentName:"p"},"DataSource"),"s, stale rows, ignored bugs, or excessive memory consumption - with the latest React Native March 2017 release candidate (",Object(i.b)("inlineCode",{parentName:"p"},"0.43-rc.1"),") you can pick from the new sLine truncated
|
||||
@@ -1 +0,0 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[640],{1008:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return f}));var r=n(0),a=n.n(r);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),p=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},u=function(e){var t=p(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,o=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),u=p(n),d=r,f=u["".concat(o,".").concat(d)]||u[d]||b[d]||i;return n?a.a.createElement(f,s(s({ref:t},l),{},{components:n})):a.a.createElement(f,s({ref:t},l))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[0]=d;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s.mdxType="string"==typeof e?e:r,o[1]=s;for(var l=2;l<i;l++)o[l]=n[l];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},719:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return s})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return p}));var r=n(2),a=n(7),i=(n(0),n(1008)),o={title:"idx: The Existential Function",author:"Timothy Yung",authorTitle:"Engineering Manager at Facebook",authorURL:"https://github.com/yungsters",authorImageURL:"https://pbs.twimg.com/profile_images/1592444107/image.jpg",authorTwitter:"yungsters",tags:["engineering"]},s={permalink:"/blog/2017/03/13/idx-the-existential-function",source:"@site/blog/2017-03-13-idx-the-existential-function.md",description:"At Facebook, we often need to access deeply nested values in data structures fetched with GraphQL. On the way to accessing these deeply nested values, it is common for one or more intermediate fields to be nullable. These intermediate fields may be null for a variety of reasons, from failed privacy checks to the mere fact that null happens to be the most flexible way to represent non-fatal errors.",date:"2017-03-13T00:00:00.000Z",tags:[{label:"engineering",permalink:"/blog/tags/engineering"}],title:"idx: The Existential Function",readingTime:1.89,truncated:!1,prevItem:{title:"Introducing Create React Native App",permalink:"/blog/2017/03/13/introducing-create-react-native-app"},nextItem:{title:"Using Native Driver for Animated",permalink:"/blog/2017/02/14/using-native-driver-for-animated"}},c=[],l={rightToc:c};function p(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(r.a)({},l,n,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"At Facebook, we often need to access deeply nested values in data structures fetched with GraphQL. On the way to accessing these deeply nested values, it is common for one or more intermediate fields to be nullable. These intermediate fields may be null for a variety of reasons, from failed privacy checks to the mere fact that null happens to be the most flexible way to represent non-fatal errors."),Object(i.b)("p",null,"Unfortunately, accessing these deeply nested values is currently tedious and verbose."),Object(i.b)("pre",null,Object(i.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"props.user &&\n props.user.friends &&\n props.user.friends[0] &&\n props.user.friends[0].friends;\n")),Object(i.b)("p",null,"There is ",Object(i.b)("a",Object(r.a)({parentName:"p"},{href:"https://github.com/claudepache/es-optional-chaining"}),"an ECMAScript proposal to introduce the existential operator")," which will make this much more convenient. But until a time when that proposal is finalized, we want a solution that improves our quality of life, maintains existing languLine truncated
|
||||
@@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[640],{1008:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return f}));var r=n(0),a=n.n(r);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),p=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},u=function(e){var t=p(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,o=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),u=p(n),d=r,f=u["".concat(o,".").concat(d)]||u[d]||b[d]||i;return n?a.a.createElement(f,s(s({ref:t},l),{},{components:n})):a.a.createElement(f,s({ref:t},l))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[0]=d;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s.mdxType="string"==typeof e?e:r,o[1]=s;for(var l=2;l<i;l++)o[l]=n[l];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},719:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return s})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return p}));var r=n(2),a=n(7),i=(n(0),n(1008)),o={title:"idx: The Existential Function",author:"Timothy Yung",authorTitle:"Engineering Manager at Facebook",authorURL:"https://github.com/yungsters",authorImageURL:"https://pbs.twimg.com/profile_images/1592444107/image.jpg",authorTwitter:"yungsters",tags:["engineering"]},s={permalink:"/blog/2017/03/13/idx-the-existential-function",source:"@site/blog/2017-03-13-idx-the-existential-function.md",description:"At Facebook, we often need to access deeply nested values in data structures fetched with GraphQL. On the way to accessing these deeply nested values, it is common for one or more intermediate fields to be nullable. These intermediate fields may be null for a variety of reasons, from failed privacy checks to the mere fact that null happens to be the most flexible way to represent non-fatal errors.",date:"2017-03-13T00:00:00.000Z",tags:[{label:"engineering",permalink:"/blog/tags/engineering"}],title:"idx: The Existential Function",readingTime:1.89,truncated:!1,prevItem:{title:"Better List Views in React Native",permalink:"/blog/2017/03/13/better-list-views"},nextItem:{title:"Introducing Create React Native App",permalink:"/blog/2017/03/13/introducing-create-react-native-app"}},c=[],l={rightToc:c};function p(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(r.a)({},l,n,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"At Facebook, we often need to access deeply nested values in data structures fetched with GraphQL. On the way to accessing these deeply nested values, it is common for one or more intermediate fields to be nullable. These intermediate fields may be null for a variety of reasons, from failed privacy checks to the mere fact that null happens to be the most flexible way to represent non-fatal errors."),Object(i.b)("p",null,"Unfortunately, accessing these deeply nested values is currently tedious and verbose."),Object(i.b)("pre",null,Object(i.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"props.user &&\n props.user.friends &&\n props.user.friends[0] &&\n props.user.friends[0].friends;\n")),Object(i.b)("p",null,"There is ",Object(i.b)("a",Object(r.a)({parentName:"p"},{href:"https://github.com/claudepache/es-optional-chaining"}),"an ECMAScript proposal to introduce the existential operator")," which will make this much more convenient. But until a time when that proposal is finalized, we want a solution that improves our quality of life, maintains existing language semantics,Line truncated
|
||||
@@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[686],{1008:function(e,t,a){"use strict";a.d(t,"a",(function(){return p})),a.d(t,"b",(function(){return h}));var n=a(0),i=a.n(n);function r(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function o(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function l(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?o(Object(a),!0).forEach((function(t){r(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):o(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function s(e,t){if(null==e)return{};var a,n,i=function(e,t){if(null==e)return{};var a,n,i={},r=Object.keys(e);for(n=0;n<r.length;n++)a=r[n],t.indexOf(a)>=0||(i[a]=e[a]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n<r.length;n++)a=r[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(i[a]=e[a])}return i}var c=i.a.createContext({}),d=function(e){var t=i.a.useContext(c),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},p=function(e){var t=d(e.components);return i.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},b=i.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,r=e.originalType,o=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=d(a),b=n,h=p["".concat(o,".").concat(b)]||p[b]||u[b]||r;return a?i.a.createElement(h,l(l({ref:t},c),{},{components:a})):i.a.createElement(h,l({ref:t},c))}));function h(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var r=a.length,o=new Array(r);o[0]=b;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l.mdxType="string"==typeof e?e:n,o[1]=l;for(var c=2;c<r;c++)o[c]=a[c];return i.a.createElement.apply(null,o)}return i.a.createElement.apply(null,a)}b.displayName="MDXCreateElement"},1108:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/images/animated-diagram-127161e299f43a8c0e677715d6be7881.png"},763:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return o})),a.d(t,"metadata",(function(){return l})),a.d(t,"rightToc",(function(){return s})),a.d(t,"default",(function(){return d}));var n=a(2),i=a(7),r=(a(0),a(1008)),o={title:"Using Native Driver for Animated",author:"Janic Duplessis",authorTitle:"Software Engineer at App & Flow",authorURL:"https://twitter.com/janicduplessis",authorImageURL:"https://secure.gravatar.com/avatar/8d6b6c0f5b228b0a8566a69de448b9dd?s=128",authorTwitter:"janicduplessis",tags:["engineering"]},l={permalink:"/blog/2017/02/14/using-native-driver-for-animated",source:"@site/blog/2017-02-14-using-native-driver-for-animated.md",description:"For the past year, we've been working on improving performance of animations that use the Animated library. Animations are very important to create a beautiful user experience but can also be hard to do right. We want to make it easy for developers to create performant animations without having to worry about some of their code causing it to lag.",date:"2017-02-14T00:00:00.000Z",tags:[{label:"engineering",permalink:"/blog/tags/engineering"}],title:"Using Native Driver for Animated",readingTime:6.09,truncated:!1,prevItem:{title:"Introducing Create React Native App",permalink:"/blog/2017/03/13/introducing-create-react-native-app"},nextItem:{title:"A Monthly Release Cadence: Releasing December and January RC",permalink:"/blog/2017/01/07/monthly-release-cadence"}},s=[{value:"What is this?",id:"what-is-this",children:[]},{value:"A bit of history...",id:"a-bit-of-history",children:[]},{value:"How does it work?",id:"how-does-it-work",children:[]},{value:"How do I use this in my app?",id:"how-do-i-use-this-in-my-app",children:[]},{value:"Caveats",id:"caveats",children:[]},{value:"Resources",id:"resources",children:[]}],c={rightToc:s};function d(e){var t=e.components,o=Object(i.a)(e,["components"]);return Object(r.b)("wrapper",Object(n.a)({},c,o,{components:t,mdxType:"MDXLayout"}),Object(r.b)("p",null,"For the past year, we've been working on improving performance of animations that use the Animated library. Animations are very important to create a beautiful user experience but can also be hard to do right. We want to make it easy for developers to create performant animations without having to worry about some of their code causing it to lag."),Object(r.b)("h2",{id:"what-is-this"},"What is this?"),Object(r.b)("p",null,"The Animated API was designed with a very important constraint in mind, it is serializable. This means we can send everything about the animation to native before it has even starteLine truncated
|
||||
@@ -1 +0,0 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[686],{1008:function(e,t,a){"use strict";a.d(t,"a",(function(){return u})),a.d(t,"b",(function(){return h}));var n=a(0),i=a.n(n);function r(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function o(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function l(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?o(Object(a),!0).forEach((function(t){r(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):o(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function s(e,t){if(null==e)return{};var a,n,i=function(e,t){if(null==e)return{};var a,n,i={},r=Object.keys(e);for(n=0;n<r.length;n++)a=r[n],t.indexOf(a)>=0||(i[a]=e[a]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n<r.length;n++)a=r[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(i[a]=e[a])}return i}var c=i.a.createContext({}),d=function(e){var t=i.a.useContext(c),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},u=function(e){var t=d(e.components);return i.a.createElement(c.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},b=i.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,r=e.originalType,o=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=d(a),b=n,h=u["".concat(o,".").concat(b)]||u[b]||p[b]||r;return a?i.a.createElement(h,l(l({ref:t},c),{},{components:a})):i.a.createElement(h,l({ref:t},c))}));function h(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var r=a.length,o=new Array(r);o[0]=b;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l.mdxType="string"==typeof e?e:n,o[1]=l;for(var c=2;c<r;c++)o[c]=a[c];return i.a.createElement.apply(null,o)}return i.a.createElement.apply(null,a)}b.displayName="MDXCreateElement"},1108:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/images/animated-diagram-127161e299f43a8c0e677715d6be7881.png"},763:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return o})),a.d(t,"metadata",(function(){return l})),a.d(t,"rightToc",(function(){return s})),a.d(t,"default",(function(){return d}));var n=a(2),i=a(7),r=(a(0),a(1008)),o={title:"Using Native Driver for Animated",author:"Janic Duplessis",authorTitle:"Software Engineer at App & Flow",authorURL:"https://twitter.com/janicduplessis",authorImageURL:"https://secure.gravatar.com/avatar/8d6b6c0f5b228b0a8566a69de448b9dd?s=128",authorTwitter:"janicduplessis",tags:["engineering"]},l={permalink:"/blog/2017/02/14/using-native-driver-for-animated",source:"@site/blog/2017-02-14-using-native-driver-for-animated.md",description:"For the past year, we've been working on improving performance of animations that use the Animated library. Animations are very important to create a beautiful user experience but can also be hard to do right. We want to make it easy for developers to create performant animations without having to worry about some of their code causing it to lag.",date:"2017-02-14T00:00:00.000Z",tags:[{label:"engineering",permalink:"/blog/tags/engineering"}],title:"Using Native Driver for Animated",readingTime:6.09,truncated:!1,prevItem:{title:"idx: The Existential Function",permalink:"/blog/2017/03/13/idx-the-existential-function"},nextItem:{title:"A Monthly Release Cadence: Releasing December and January RC",permalink:"/blog/2017/01/07/monthly-release-cadence"}},s=[{value:"What is this?",id:"what-is-this",children:[]},{value:"A bit of history...",id:"a-bit-of-history",children:[]},{value:"How does it work?",id:"how-does-it-work",children:[]},{value:"How do I use this in my app?",id:"how-do-i-use-this-in-my-app",children:[]},{value:"Caveats",id:"caveats",children:[]},{value:"Resources",id:"resources",children:[]}],c={rightToc:s};function d(e){var t=e.components,o=Object(i.a)(e,["components"]);return Object(r.b)("wrapper",Object(n.a)({},c,o,{components:t,mdxType:"MDXLayout"}),Object(r.b)("p",null,"For the past year, we've been working on improving performance of animations that use the Animated library. Animations are very important to create a beautiful user experience but can also be hard to do right. We want to make it easy for developers to create performant animations without having to worry about some of their code causing it to lag."),Object(r.b)("h2",{id:"what-is-this"},"What is this?"),Object(r.b)("p",null,"The Animated API was designed with a very important constraint in mind, it is serializable. This means we can send everything about the animation to native before it has even started and allows
Line truncated
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Blog · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Blog · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,7 +32,7 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/1b94994a.f3d8d81e.js" as="script">
|
||||
<link rel="preload" href="/f80d3992.003ad03c.js" as="script">
|
||||
<link rel="preload" href="/8415f7e8.54a2f903.js" as="script">
|
||||
@@ -47,7 +47,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Pressable</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">onPress</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript punctuation" style="color:#657b83">)</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">=></span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> console</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript function" style="color:#79b6f2">log</span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript string" style="color:#8dc891">'pressed'</span><span class="token tag script language-javascript punctuation" style="color:#657b83">)</span><span class="token tag script language-javascript punctuation" style="color:#657b83">;</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript parameter punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript parameter" style="color:#fc929e"> pressed </span><span class="token tag script language-javascript parameter punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">)</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">=></span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> backgroundColor</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> pressed </span><span class="token tag script language-javascript operator" style="color:#fc929e">?</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript string" style="color:#8dc891">'lightskyblue'</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript string" style="color:#8dc891">'white'</span><span class="token tag script language-javascript" style="color:#fc9Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e"> color</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript function" style="color:#79b6f2">PlatformColor</span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript string" style="color:#8dc891">'labelColor'</span><span class="token tag script language-javascript punctuation" style="color:#657b83">)</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> This is a label</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p class="snippet-caption">Sets the color of the Text component to labelColor as defined by iOS.</p><p>Android, on the other hand, <a href="https://developer.android.com/reference/android/R.attr#colorButtonNormal" target="_blank" rel="noopener noreferrer">provides colors like colorButtonNormal</a>. You can use this color in React Native with:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> View</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> Text</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> PlatformColor </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'react-native'</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> backgroundColor</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript function" style="color:#79b6f2">PlatformColor</span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript string" style="color:#8dc891">'?attr/colorButtonNormal'</span><span class="token tag script language-javascript punctuation" style="color:#657b83">)</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain">This is colored like a button</span><span class="token operator" style="color:#fc929e">!</span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p class="snippet-caption">Sets the background color of the View component to colorButtonNormal as defined by Android.</p><p>You can learn more about <code>PlatformColor</code> from <a href="https://reactnative.dev/docs/platformcolor" target="_blank" rel="noopener noreferrer">the documentation</a>. You can also check the actual <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js" target="_blank" rel="noopener noreferrer">code examples present in the RNTester</a>.</p><p><code>DynamicColorIOS</code> is an iOS only API that lets you define which color to use in light and dark mode. Similar to <code>PlatformColor</code>, this can be used anywhere you can use colors. <code>DynamicColorIOS</code> uses iOS’s <code>colorWithDynamicProvider</code> under the hood.</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> Text</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> DynamicColorIOS </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'react-Line truncated
|
||||
@@ -55,8 +55,8 @@
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e"> color</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> customDynamicTextColor </span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> This color changes automatically based on the system theme</span><span class="token operator" style="color:#fc929e">!</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p class="snippet-caption">Changes the text color based on the system theme</p><p>You can learn more about <code>DynamicColorIOS</code> from <a href="https://reactnative.dev/docs/dynamiccolorios" target="_blank" rel="noopener noreferrer">the documentation</a>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="dropping-ios-9-and-nodejs-8-support"></a>Dropping iOS 9 and Node.js 8 support<a aria-hidden="true" tabindex="-1" class="hash-link" href="#dropping-ios-9-and-nodejs-8-support" title="Direct link to heading">#</a></h2><p>After over four years from its release, we are dropping support for iOS 9. This change will allow us to move faster by being able to reduce the number of compatibility checks that need to be placed in the native code to detect whether a given feature was supported on a certain iOS version. With its <a href="https://david-smith.org/iosversionstats/" target="_blank" rel="noopener noreferrer">market share of 1%</a>, it shouldn’t have much negative impact on your customers.</p><p>At the same time, we are dropping support for Node 8. <a href="https://nodejs.org/fr/blog/release/v8.9.0/" target="_blank" rel="noopener noreferrer">Its LTS maintenance cycle expired in December 2019</a>. The current LTS is Node 10 and it is now the version that we are targeting. If you are still using Node 8 for the development of React Native applications, we encourage you to upgrade in order to receive all the latest security fixes and updates.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="other-notable-improvements"></a>Other notable improvements<a aria-hidden="true" tabindex="-1" class="hash-link" href="#other-notable-improvements" title="Direct link to heading">#</a></h2><ul><li><strong>Support rendering <code><View /></code> in <code><Text /></code> without explicit size</strong>: You can now render any <code><View /></code> inside any <code><Text /></code> component without setting its width and height explicitly, which wasn’t always possible. On previous releases of React Native, this would result in a RedBox.</li><li><strong>Changed iOS LaunchScreen from <code>xib</code> to <code>storyboard</code></strong>: Starting April 30, 2020, all apps submitted to the App Store must use an Xcode storyboard to provide the app’s launch screen and all iPhone apps must support all iPhone screens. This commit adjusts the default React Native template to be compatible with this requirement.</li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="thanks"></a>Thanks<a aria-hidden="true" tabindex="-1" class="hash-link" href="#thanks" title="Direct link to heading">#</a></h2><p>Thank you to the hundreds of contributors that helped make 0.63 possible!</p><blockquote><p>Special thanks to <a href="https://twitter.com/rickhanlonii" target="_blank" rel="noopener noreferrer">Rick Hanlon</a> for authoring the section on <code>LogBox</code> and <a href="https://twitter.com/Eli_White" target="_blank" rel="noopener noreferrer">Eli White</a> for auLine truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#79b6f2">MyComponent</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> colorScheme </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">useColorScheme</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token function" style="color:#79b6f2">useColorScheme</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain">colorScheme</span><span class="token punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>See the docs for <a href="/docs/appearance">Appearance</a> and <a href="/docs/usecolorscheme">useColorScheme</a> for more information.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="moving-apple-tv-to-react-native-tvos"></a>Moving Apple TV to react-native-tvos<a aria-hidden="true" tabindex="-1" class="hash-link" href="#moving-apple-tv-to-react-native-tvos" title="Direct link to heading">#</a></h2><p>As part of our <a href="/blog/#lean-core">Lean Core effort</a> and to bring Apple TV in line with other platforms like React Native Windows and React Native macOS, we’ve started to remove Apple TV specific code from core.</p><p>Going forward, Apple TV support for React Native will be maintained in <a href="https://github.com/react-native-community/react-native-tvos" target="_blank" rel="noopener noreferrer">react-native-community/react-native-tvos</a> along with the corresponding <code>react-native-tvos</code> NPM package. This is a full fork of the main repository, with only the changes needed to support Apple TV.</p><p>Releases of <code>react-native-tvos</code> will be based on the public release of React Native. For this 0.62 release of <code>react-native</code> please upgrade Apple TV projects to use <code>react-native-tvos</code> 0.62.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="more-upgrade-support"></a>More upgrade support<a aria-hidden="true" tabindex="-1" class="hash-link" href="#more-upgrade-support" title="Direct link to heading">#</a></h2><p>When 0.61 was released, the community introduced a new <a href="https://react-native-community.github.io/upgrade-helper/" target="_blank" rel="noopener noreferrer">upgrade helper</a> tool to support developers upgrading to new versions of React Native. The upgrade helper provides a diff of changes from the version you're on to the version you're targeting, allowing you to see the changes that need to be made for your specific upgrade.</p><p>Even with this tool, issues come up when upgrading. Today we're introducing more dedicated upgrading support by announcing <a href="https://github.com/react-native-community/upgrade-support"Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -69,7 +69,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/1b94994a.f3d8d81e.js"></script>
|
||||
<script src="/f80d3992.003ad03c.js"></script>
|
||||
<script src="/8415f7e8.54a2f903.js"></script>
|
||||
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native: Bringing modern web techniques to mobile · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native: Bringing modern web techniques to mobile · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/c5f92c9d.aa77c7eb.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/c5f92c9d.aa77c7eb.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native: Bringing modern web techniques to mobile · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native: Bringing modern web techniques to mobile · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/c5f92c9d.aa77c7eb.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/c5f92c9d.aa77c7eb.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native for Android: How we built the first cross-platform React Native app · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native for Android: How we built the first cross-platform React Native app · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/fccc6009.0295fd6b.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/fccc6009.0295fd6b.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native for Android: How we built the first cross-platform React Native app · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native for Android: How we built the first cross-platform React Native app · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/fccc6009.0295fd6b.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/fccc6009.0295fd6b.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Making React Native apps accessible · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Making React Native apps accessible · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/d0b5637a.397371e0.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/d0b5637a.397371e0.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Making React Native apps accessible · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Making React Native apps accessible · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/d0b5637a.397371e0.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/d0b5637a.397371e0.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Introducing Hot Reloading · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Introducing Hot Reloading · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,12 +32,12 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/8551c45d.288d1de4.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">module</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">exports </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> log</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token comment" style="color:#93a1a1">// time.js</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">function</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">time</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">new</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Date</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">getTime</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">module</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">exports </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> time</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>The module <code>log</code>, prints out the provided message including the current date provided by the module <code>time</code>.</p><p>When the app is bundled, React Native registers each module on the module system using the <code>__d</code> function. For this app, among many <code>__d</code> definitions, there will one for <code>log</code>:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token function" style="color:#79b6f2">__d</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'log'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">function</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token operator" style="color:#fc929e">...</span><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// module's code</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>This invocation wraps each module's code into an anonymous function which we generally refer to as the factory function. The module system runtime keeps track of each module's factory function, whether it has already been executed, and the result of such execution (exports). When a module is required, the module system either provides the already cached exports or executes the module's factory function for the first time and saves the result.</p><p>So say you start your app and require <code>log</code>. At this point, neither <code>log</code> nor <code>time</code>'s factory functions have been executed so no exports have been cached. Then, the user modifies <code>time</code> to return the date in <code>MM/DD</code>:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token comment" style="color:#93a1a1">// time.js</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">function</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">bar</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">var</span><span class="token plain"> date </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">new</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Date</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token teLine truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">module</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">exports </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> bar</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>The Packager will send time's new code to the runtime (step 1), and when <code>log</code> gets eventually required the exported function gets executed it will do so with <code>time</code>'s changes (step 2):</p><p><img src="/assets/images/hmr-step-9d2dd4297f792827ffabc55bb1154b8a.png"></p><p>Now say the code of <code>log</code> requires <code>time</code> as a top level require:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> time </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">require</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'./time'</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// top level require</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
@@ -49,8 +49,8 @@
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">module</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">hot</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> module</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">hot</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">accept</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> nextRootReducer </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">require</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'../reducers/index'</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">default</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> store</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">replaceReducer</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">nextRootReducer</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> store</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>When you change a reducer, the code to accept that reducer will be sent to the client. Then the client will realize that the reducer doesn't know how to accept itself, so it will look for all the modules that refer it and try to accept them. Eventually, the flow will get to the single store, the <code>configureStore</code> module, which will accept the HMR update.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="conclusion"></a>Conclusion<a aria-hidden="true" tabindex="-1" class="hash-link" href="#conclusion" title="Direct link to heading">#</a></h2><p>If you are interested in helping making hot reloading better, I encourage you to read <a href="https://medium.com/@dan_abramov/hot-reloading-in-react-1140438583bf#.jmivpvmz4" target="_blank" rel="noopener noreferrer">Dan Abramov's post around the future of hot reloading</a> and to contribute. For example, Johny Days is going to <a href="https://github.com/facebook/react-native/pull/6179" target="_blank" rel="noopener noreferrer">make it work with multiple connected clients</a>. We're relying on you all to maintain and improve this feature.</p><p>With React Native, we have the opportunity to rethink the way we build apps in order to make it a great developer experience. Hot reloading is only one piece of the puzzle, what other crazy hacks can we do to make it better?</p></section><footer class="row margin-vert--lg"><div class="col"><strong>Tags:</strong><a class="margin-horiz--sm" href="/blog/tags/engineering">engineering</a></div></footer></article><div></div><div class="margin-vert--xl"><nav class="pagination-nav" aria-label="Blog post page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/blog/2016/03/28/dive-into-react-native-performance"><div class="pagination-nav__sublabel">Newer Post</div><div class="pagination-nav__label">« Dive into React Native Performance</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/blog/2015/11/23/making-react-native-apps-accessible"><div class="pagination-nav__sublabel">Older Post</div><div class="pagination-nav__label">Making React Native apps accessible »</div></a></div></nav></div></div><div class="col col--2"><div class="tableOfContents_3iuQ"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#hot-reloading" class="table-of-contents__link">Hot Reloading</a></li><li><a href="#implementation-in-a-nutshell" class="table-of-contents__link">Implementation in a nutshell</a></li><li><a href="#hmr-api" class="table-of-contents__link">HMR API</a></li><li><a href="#hmr-runtime" class="table-of-contents__link">HMR Runtime</a></li><li><a href="#react-components" class="table-of-contents__link">React Components</a></li><li><a href="#redux-stores" class="table-of-contents__link">Redux Stores</a></li><li><a href="#conclusion" class="table-of-contents__link">Conclusion</a></li></ul></div></div></div></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/tutorial">Tutorial</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/components-and-apis">Components and APIs</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/more-resources">More Resources</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/help">The React Native Community</a></li><li class="footer__item"><a class="footer__link-item" href="/showcase">Who's using React Native?</a></li><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">Ask Questions on Stack Overflow</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" class="footer__link-item">Contributor Guide</a></li><li class="footer__item"><a href="https://dev.to/t/reactnative" target="_blank" rel="noopener noreferrer" clLine truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -63,7 +63,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/8551c45d.288d1de4.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Introducing Hot Reloading · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Introducing Hot Reloading · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,12 +32,12 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/8551c45d.288d1de4.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">module</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">exports </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> log</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token comment" style="color:#93a1a1">// time.js</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">function</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">time</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">new</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Date</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">getTime</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">module</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">exports </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> time</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>The module <code>log</code>, prints out the provided message including the current date provided by the module <code>time</code>.</p><p>When the app is bundled, React Native registers each module on the module system using the <code>__d</code> function. For this app, among many <code>__d</code> definitions, there will one for <code>log</code>:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token function" style="color:#79b6f2">__d</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'log'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">function</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token operator" style="color:#fc929e">...</span><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// module's code</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>This invocation wraps each module's code into an anonymous function which we generally refer to as the factory function. The module system runtime keeps track of each module's factory function, whether it has already been executed, and the result of such execution (exports). When a module is required, the module system either provides the already cached exports or executes the module's factory function for the first time and saves the result.</p><p>So say you start your app and require <code>log</code>. At this point, neither <code>log</code> nor <code>time</code>'s factory functions have been executed so no exports have been cached. Then, the user modifies <code>time</code> to return the date in <code>MM/DD</code>:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token comment" style="color:#93a1a1">// time.js</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">function</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">bar</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">var</span><span class="token plain"> date </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">new</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Date</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token teLine truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">module</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">exports </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> bar</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>The Packager will send time's new code to the runtime (step 1), and when <code>log</code> gets eventually required the exported function gets executed it will do so with <code>time</code>'s changes (step 2):</p><p><img src="/assets/images/hmr-step-9d2dd4297f792827ffabc55bb1154b8a.png"></p><p>Now say the code of <code>log</code> requires <code>time</code> as a top level require:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> time </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">require</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'./time'</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// top level require</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
@@ -49,8 +49,8 @@
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">module</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">hot</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> module</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">hot</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">accept</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> nextRootReducer </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">require</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'../reducers/index'</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">default</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> store</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">replaceReducer</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">nextRootReducer</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> store</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>When you change a reducer, the code to accept that reducer will be sent to the client. Then the client will realize that the reducer doesn't know how to accept itself, so it will look for all the modules that refer it and try to accept them. Eventually, the flow will get to the single store, the <code>configureStore</code> module, which will accept the HMR update.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="conclusion"></a>Conclusion<a aria-hidden="true" tabindex="-1" class="hash-link" href="#conclusion" title="Direct link to heading">#</a></h2><p>If you are interested in helping making hot reloading better, I encourage you to read <a href="https://medium.com/@dan_abramov/hot-reloading-in-react-1140438583bf#.jmivpvmz4" target="_blank" rel="noopener noreferrer">Dan Abramov's post around the future of hot reloading</a> and to contribute. For example, Johny Days is going to <a href="https://github.com/facebook/react-native/pull/6179" target="_blank" rel="noopener noreferrer">make it work with multiple connected clients</a>. We're relying on you all to maintain and improve this feature.</p><p>With React Native, we have the opportunity to rethink the way we build apps in order to make it a great developer experience. Hot reloading is only one piece of the puzzle, what other crazy hacks can we do to make it better?</p></section><footer class="row margin-vert--lg"><div class="col"><strong>Tags:</strong><a class="margin-horiz--sm" href="/blog/tags/engineering">engineering</a></div></footer></article><div></div><div class="margin-vert--xl"><nav class="pagination-nav" aria-label="Blog post page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/blog/2016/03/28/dive-into-react-native-performance"><div class="pagination-nav__sublabel">Newer Post</div><div class="pagination-nav__label">« Dive into React Native Performance</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/blog/2015/11/23/making-react-native-apps-accessible"><div class="pagination-nav__sublabel">Older Post</div><div class="pagination-nav__label">Making React Native apps accessible »</div></a></div></nav></div></div><div class="col col--2"><div class="tableOfContents_3iuQ"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#hot-reloading" class="table-of-contents__link">Hot Reloading</a></li><li><a href="#implementation-in-a-nutshell" class="table-of-contents__link">Implementation in a nutshell</a></li><li><a href="#hmr-api" class="table-of-contents__link">HMR API</a></li><li><a href="#hmr-runtime" class="table-of-contents__link">HMR Runtime</a></li><li><a href="#react-components" class="table-of-contents__link">React Components</a></li><li><a href="#redux-stores" class="table-of-contents__link">Redux Stores</a></li><li><a href="#conclusion" class="table-of-contents__link">Conclusion</a></li></ul></div></div></div></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/tutorial">Tutorial</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/components-and-apis">Components and APIs</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/more-resources">More Resources</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/help">The React Native Community</a></li><li class="footer__item"><a class="footer__link-item" href="/showcase">Who's using React Native?</a></li><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">Ask Questions on Stack Overflow</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" class="footer__link-item">Contributor Guide</a></li><li class="footer__item"><a href="https://dev.to/t/reactnative" target="_blank" rel="noopener noreferrer" clLine truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -63,7 +63,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/8551c45d.288d1de4.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Dive into React Native Performance · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Dive into React Native Performance · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/14dcd83a.163c43e6.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/14dcd83a.163c43e6.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Dive into React Native Performance · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Dive into React Native Performance · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/14dcd83a.163c43e6.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/14dcd83a.163c43e6.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native: A year in review · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native: A year in review · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/58c2ea8e.8aa8ef51.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/58c2ea8e.8aa8ef51.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native: A year in review · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native: A year in review · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/58c2ea8e.8aa8ef51.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/58c2ea8e.8aa8ef51.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Toward Better Documentation · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Toward Better Documentation · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,17 +32,17 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/2d24a4bd.b064a7df.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">class ScratchPad extends Component {</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> render() {</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> return (</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> <View style={{flex: 1}}></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> <Text style={{fontSize: 30, flex: 1, textAlign: 'center'}}></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> Isn't this cool?</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </Text></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> <Text style={{fontSize: 100, flex: 1, textAlign: 'center'}}></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> 👍</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </Text></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </View></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> );</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> }</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">}</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">AppRegistry.registerComponent('ScratchPad', () => ScratchPad);</span></div></div></div></div></div><p>We think these inline examples, using the <a href="https://github.com/dabbott/react-native-web-player" target="_blank" rel="noopener noreferrer"><code>react-native-web-player</code></a> module with help from <a href="https://twitter.com/devinaabbott" target="_blank" rel="noopener noreferrer">Devin Abbott</a>, are a great way to learn the basics of React Native, and we have updated our <a href="/docs/tutorial">tutorial for new React Native developers</a> to use these wherever possible. Check it out - if you have ever been curious to see what would happen if you modified just one little bit of sample code, this is a really nice way to poke around. Also, if you're building developer tools and you want to show a live React Native sample on your own site, <a href="https://github.com/dabbott/react-native-web-player" target="_blank" rel="noopener noreferrer"><code>react-native-web-player</code></a> can make that straightforward.</p><p>The core simulation engine is provided by <a href="https://twitter.com/necolas" target="_blank" rel="noopener noreferrer">Nicolas Gallagher</a>'s <a href="https://github.com/necolas/react-native-web" target="_blank" rel="noopener noreferrer"><code>react-native-web</code></a> project, which provides a way to display React Native components like <code>Text</code> and <code>View</code> on the web. Check out <a href="https://github.com/necolas/react-native-web" target="_blank" rel="noopener noreferrer"><code>react-native-web</code></a> if you're interested in building mobile and web experiences that share a large chunk of the codebase.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="better-guides"></a>Better Guides<a aria-hidden="true" tabindex="-1" class="hash-link" href="#better-guides" title="Direct link to heading">#</a></h2><p>In some parts of React Native, there are multiple ways to do things, and we've heard feedback that we could provide better guidance.</p><p>We have a new <a href="/docs/navigation">guide to Navigation</a> that compares the different approaches and advises on what you should use - <code>Navigator</code>, <code>NavigatorIOS</code>, <code>NavigationExperimental</code>. In the medium term, we're working towards improving and consolidating those interfaces. In the short term, we hope that a better guide will make your life easier.</p><p>We also have a new <a href="/docs/handling-touches">guide to handling touches</a> that explains some of the basics of making button-like interfaces, and a brief summary of the different ways to handle touch events.</p><p>Another area we worked on is Flexbox. This includes tutorials on how to <a href="/docs/flexbox">handle layout with Flexbox</a> and how to control <a href="/docs/height-and-width">the size of components</a>. It also includes an unsexy but hopefully-useful <a href="/docs/layout-props">list of all the props that control layout in React Native</a>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="getting-started"></a>Getting Started<a aria-hidden="true" tabindex="-1" class="hash-link" href="#getting-started" title="Direct link to heading">#</a></h2><p>When you start getting a React Native development environment set up on your machine, you do have to do a bunch of installing and configuring things. It's hard to make installation a really fun and exciting experience, but we can at least make it as quick and painless as possible.</p><p>We built a <a href="/docs/next/getting-started">new Getting Started workflow</a> that lets you select your development operating system and your mobile operating system up front, to provide one concise place with all the setup instructions. We also went through the installation process to make sure everything worked and to make sure that every decision point had a clear recommendation. After testing it out on our innocent coworkers, we're pretty sure this is an improvement.</p><p>We also worked on the <a href="/docs/integration-with-existing-apps">guide to integrating React Native into an existing app</a>. Many of the largest apps that use React Native, like the Facebook app itself, actually build part of the app in React Native, and part of it using regular development tools. We hope this guide makes it easier for more people to build apps this way.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="we-need-your-help"></a>We Need Your Help<a aria-hidden="true" tabindex="-1" class="hash-link" href="#we-need-your-help" title="Direct link to heading">#</a></h2><p>Your feedback lets us know what we should prioritize. I know some people will read this blog post and think "Better docs? Pffft. The documentation for X is still garbage!". ThatLine truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -55,7 +55,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/2d24a4bd.b064a7df.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Toward Better Documentation · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Toward Better Documentation · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,17 +32,17 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/2d24a4bd.b064a7df.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">class ScratchPad extends Component {</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> render() {</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> return (</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> <View style={{flex: 1}}></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> <Text style={{fontSize: 30, flex: 1, textAlign: 'center'}}></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> Isn't this cool?</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </Text></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> <Text style={{fontSize: 100, flex: 1, textAlign: 'center'}}></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> 👍</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </Text></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </View></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> );</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> }</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">}</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">AppRegistry.registerComponent('ScratchPad', () => ScratchPad);</span></div></div></div></div></div><p>We think these inline examples, using the <a href="https://github.com/dabbott/react-native-web-player" target="_blank" rel="noopener noreferrer"><code>react-native-web-player</code></a> module with help from <a href="https://twitter.com/devinaabbott" target="_blank" rel="noopener noreferrer">Devin Abbott</a>, are a great way to learn the basics of React Native, and we have updated our <a href="/docs/tutorial">tutorial for new React Native developers</a> to use these wherever possible. Check it out - if you have ever been curious to see what would happen if you modified just one little bit of sample code, this is a really nice way to poke around. Also, if you're building developer tools and you want to show a live React Native sample on your own site, <a href="https://github.com/dabbott/react-native-web-player" target="_blank" rel="noopener noreferrer"><code>react-native-web-player</code></a> can make that straightforward.</p><p>The core simulation engine is provided by <a href="https://twitter.com/necolas" target="_blank" rel="noopener noreferrer">Nicolas Gallagher</a>'s <a href="https://github.com/necolas/react-native-web" target="_blank" rel="noopener noreferrer"><code>react-native-web</code></a> project, which provides a way to display React Native components like <code>Text</code> and <code>View</code> on the web. Check out <a href="https://github.com/necolas/react-native-web" target="_blank" rel="noopener noreferrer"><code>react-native-web</code></a> if you're interested in building mobile and web experiences that share a large chunk of the codebase.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="better-guides"></a>Better Guides<a aria-hidden="true" tabindex="-1" class="hash-link" href="#better-guides" title="Direct link to heading">#</a></h2><p>In some parts of React Native, there are multiple ways to do things, and we've heard feedback that we could provide better guidance.</p><p>We have a new <a href="/docs/navigation">guide to Navigation</a> that compares the different approaches and advises on what you should use - <code>Navigator</code>, <code>NavigatorIOS</code>, <code>NavigationExperimental</code>. In the medium term, we're working towards improving and consolidating those interfaces. In the short term, we hope that a better guide will make your life easier.</p><p>We also have a new <a href="/docs/handling-touches">guide to handling touches</a> that explains some of the basics of making button-like interfaces, and a brief summary of the different ways to handle touch events.</p><p>Another area we worked on is Flexbox. This includes tutorials on how to <a href="/docs/flexbox">handle layout with Flexbox</a> and how to control <a href="/docs/height-and-width">the size of components</a>. It also includes an unsexy but hopefully-useful <a href="/docs/layout-props">list of all the props that control layout in React Native</a>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="getting-started"></a>Getting Started<a aria-hidden="true" tabindex="-1" class="hash-link" href="#getting-started" title="Direct link to heading">#</a></h2><p>When you start getting a React Native development environment set up on your machine, you do have to do a bunch of installing and configuring things. It's hard to make installation a really fun and exciting experience, but we can at least make it as quick and painless as possible.</p><p>We built a <a href="/docs/next/getting-started">new Getting Started workflow</a> that lets you select your development operating system and your mobile operating system up front, to provide one concise place with all the setup instructions. We also went through the installation process to make sure everything worked and to make sure that every decision point had a clear recommendation. After testing it out on our innocent coworkers, we're pretty sure this is an improvement.</p><p>We also worked on the <a href="/docs/integration-with-existing-apps">guide to integrating React Native into an existing app</a>. Many of the largest apps that use React Native, like the Facebook app itself, actually build part of the app in React Native, and part of it using regular development tools. We hope this guide makes it easier for more people to build apps this way.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="we-need-your-help"></a>We Need Your Help<a aria-hidden="true" tabindex="-1" class="hash-link" href="#we-need-your-help" title="Direct link to heading">#</a></h2><p>Your feedback lets us know what we should prioritize. I know some people will read this blog post and think "Better docs? Pffft. The documentation for X is still garbage!". ThatLine truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -55,7 +55,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/2d24a4bd.b064a7df.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">San Francisco Meetup Recap · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for San Francisco Meetup Recap · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/8d2a3815.a4ac93d9.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/8d2a3815.a4ac93d9.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">San Francisco Meetup Recap · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for San Francisco Meetup Recap · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/8d2a3815.a4ac93d9.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/8d2a3815.a4ac93d9.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Right-to-Left Layout Support For React Native Apps · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Right-to-Left Layout Support For React Native Apps · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,16 +32,16 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/7389a049.a7692335.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token function-variable function" style="color:#79b6f2">_onDirectionChange</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token maybe-class-name">I18nManager</span><span class="token punctuation" style="color:#657b83">.</span><span class="token method function property-access" style="color:#79b6f2">forceRTL</span><span class="token punctuation" style="color:#657b83">(</span><span class="token operator" style="color:#fc929e">!</span><span class="token keyword" style="color:#c5a5c5">this</span><span class="token punctuation" style="color:#657b83">.</span><span class="token property-access">state</span><span class="token punctuation" style="color:#657b83">.</span><span class="token property-access">isRTL</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">this</span><span class="token punctuation" style="color:#657b83">.</span><span class="token method function property-access" style="color:#79b6f2">setState</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> isRTL</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">!</span><span class="token keyword" style="color:#c5a5c5">this</span><span class="token punctuation" style="color:#657b83">.</span><span class="token property-access">state</span><span class="token punctuation" style="color:#657b83">.</span><span class="token property-access">isRTL</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token maybe-class-name">Alert</span><span class="token punctuation" style="color:#657b83">.</span><span class="token method function property-access" style="color:#79b6f2">alert</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">'Reload this page'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">'Please reload this page to change the UI direction! '</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">'All examples in this app will be affected. '</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">'Check them out to see what they look like in RTL layout.'</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>When working on a new feature, you can easily toggle this button and reload the app to see RTLine truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -54,7 +54,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/7389a049.a7692335.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Right-to-Left Layout Support For React Native Apps · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Right-to-Left Layout Support For React Native Apps · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,16 +32,16 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/7389a049.a7692335.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token function-variable function" style="color:#79b6f2">_onDirectionChange</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token maybe-class-name">I18nManager</span><span class="token punctuation" style="color:#657b83">.</span><span class="token method function property-access" style="color:#79b6f2">forceRTL</span><span class="token punctuation" style="color:#657b83">(</span><span class="token operator" style="color:#fc929e">!</span><span class="token keyword" style="color:#c5a5c5">this</span><span class="token punctuation" style="color:#657b83">.</span><span class="token property-access">state</span><span class="token punctuation" style="color:#657b83">.</span><span class="token property-access">isRTL</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">this</span><span class="token punctuation" style="color:#657b83">.</span><span class="token method function property-access" style="color:#79b6f2">setState</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> isRTL</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">!</span><span class="token keyword" style="color:#c5a5c5">this</span><span class="token punctuation" style="color:#657b83">.</span><span class="token property-access">state</span><span class="token punctuation" style="color:#657b83">.</span><span class="token property-access">isRTL</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token maybe-class-name">Alert</span><span class="token punctuation" style="color:#657b83">.</span><span class="token method function property-access" style="color:#79b6f2">alert</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">'Reload this page'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">'Please reload this page to change the UI direction! '</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">'All examples in this app will be affected. '</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">'Check them out to see what they look like in RTL layout.'</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>When working on a new feature, you can easily toggle this button and reload the app to see RTLine truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -54,7 +54,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/7389a049.a7692335.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Expo Talks: Adam on Unraveling Navigation · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Expo Talks: Adam on Unraveling Navigation · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/599c3eae.9f84491e.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/599c3eae.9f84491e.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Expo Talks: Adam on Unraveling Navigation · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Expo Talks: Adam on Unraveling Navigation · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/599c3eae.9f84491e.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/599c3eae.9f84491e.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">0.36: Headless JS, the Keyboard API, & more · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for 0.36: Headless JS, the Keyboard API, & more · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,17 +32,17 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/705161da.fe841086.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token comment" style="color:#93a1a1">// Hide that keyboard!</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token maybe-class-name">Keyboard</span><span class="token punctuation" style="color:#657b83">.</span><span class="token method function property-access" style="color:#79b6f2">dismiss</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="animated-division"></a>Animated Division<a aria-hidden="true" tabindex="-1" class="hash-link" href="#animated-division" title="Direct link to heading">#</a></h2><p>Combining two animated values via addition, multiplication, and modulo are already supported by React Native. With version 0.36, combining two <a href="/docs/animated#divide">animated values via division</a> is now possible. There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> a </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> Animated</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">Value</span><span class="token punctuation" style="color:#657b83">(</span><span class="token number" style="color:#5a9bcf">1</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> b </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> Animated</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">divide</span><span class="token punctuation" style="color:#657b83">(</span><span class="token number" style="color:#5a9bcf">1</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> a</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Animated</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">spring</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">a</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> toValue</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">2</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">start</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p><code>b</code> will then follow <code>a</code>'s spring animation and produce the value of <code>1 / a</code>.</p><p>The basic usage is like this:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Animated.View</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">transform</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">[</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">scale</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> a</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">]</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Animated.Image</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">transform</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">[</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">scale</span><span class="token tag script language-javascript punctuatLine truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -55,7 +55,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/705161da.fe841086.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">0.36: Headless JS, the Keyboard API, & more · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for 0.36: Headless JS, the Keyboard API, & more · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,17 +32,17 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/705161da.fe841086.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token comment" style="color:#93a1a1">// Hide that keyboard!</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token maybe-class-name">Keyboard</span><span class="token punctuation" style="color:#657b83">.</span><span class="token method function property-access" style="color:#79b6f2">dismiss</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="animated-division"></a>Animated Division<a aria-hidden="true" tabindex="-1" class="hash-link" href="#animated-division" title="Direct link to heading">#</a></h2><p>Combining two animated values via addition, multiplication, and modulo are already supported by React Native. With version 0.36, combining two <a href="/docs/animated#divide">animated values via division</a> is now possible. There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> a </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> Animated</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">Value</span><span class="token punctuation" style="color:#657b83">(</span><span class="token number" style="color:#5a9bcf">1</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> b </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> Animated</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">divide</span><span class="token punctuation" style="color:#657b83">(</span><span class="token number" style="color:#5a9bcf">1</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> a</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Animated</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">spring</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">a</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> toValue</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">2</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">start</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p><code>b</code> will then follow <code>a</code>'s spring animation and produce the value of <code>1 / a</code>.</p><p>The basic usage is like this:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Animated.View</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">transform</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">[</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">scale</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> a</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">]</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Animated.Image</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">transform</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">[</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">scale</span><span class="token tag script language-javascript punctuatLine truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -55,7 +55,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/705161da.fe841086.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Introducing Button, Faster Installs with Yarn, and a Public Roadmap · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Introducing Button, Faster Installs with Yarn, and a Public Roadmap · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/ea850b32.edd8d13b.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/ea850b32.edd8d13b.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Introducing Button, Faster Installs with Yarn, and a Public Roadmap · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Introducing Button, Faster Installs with Yarn, and a Public Roadmap · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/ea850b32.edd8d13b.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/ea850b32.edd8d13b.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Easier Upgrades Thanks to Git · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Easier Upgrades Thanks to Git · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,16 +32,16 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/0e1c8cbf.7b838cde.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">diff </span><span class="token operator" style="color:#fc929e">--</span><span class="token plain">git a</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">ios</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">MyAwesomeApp</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">Info</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">plist b</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">ios</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">MyAwesomeApp</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">Info</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">plist</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">index e98ebb0</span><span class="token punctuation" style="color:#657b83">.</span><span class="token number" style="color:#5a9bcf">.2</span><span class="token plain">fb6a11 </span><span class="token number" style="color:#5a9bcf">100644</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token operator" style="color:#fc929e">--</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain"> a</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">ios</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">MyAwesomeApp</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">Info</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">plist</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token operator" style="color:#fc929e">++</span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"> b</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">ios</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">MyAwesomeApp</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">Info</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">plist</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">@@ </span><span class="token operator" style="color:#fc929e">-</span><span class="token number" style="color:#5a9bcf">45</span><span class="token punctuation" style="color:#657b83">,</span><span class="token number" style="color:#5a9bcf">7</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">+</span><span class="token number" style="color:#5a9bcf">45</span><span class="token punctuation" style="color:#657b83">,</span><span class="token number" style="color:#5a9bcf">7</span><span class="token plain"> @@</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag" style="color:#fc929e">dict</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag" style="color:#fc929e">key</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain">localhost</span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag" style="color:#fc929e">key</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag" style="color:#fc929e">dict</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token operator" style="color:#fc929e">-</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag" style="color:#fc929e">key</span><span class="token tag punctuation" style="color:#657b83">></spLine truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -54,7 +54,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/0e1c8cbf.7b838cde.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Easier Upgrades Thanks to Git · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Easier Upgrades Thanks to Git · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,16 +32,16 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/0e1c8cbf.7b838cde.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">diff </span><span class="token operator" style="color:#fc929e">--</span><span class="token plain">git a</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">ios</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">MyAwesomeApp</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">Info</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">plist b</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">ios</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">MyAwesomeApp</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">Info</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">plist</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">index e98ebb0</span><span class="token punctuation" style="color:#657b83">.</span><span class="token number" style="color:#5a9bcf">.2</span><span class="token plain">fb6a11 </span><span class="token number" style="color:#5a9bcf">100644</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token operator" style="color:#fc929e">--</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain"> a</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">ios</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">MyAwesomeApp</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">Info</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">plist</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token operator" style="color:#fc929e">++</span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"> b</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">ios</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">MyAwesomeApp</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">Info</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">plist</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">@@ </span><span class="token operator" style="color:#fc929e">-</span><span class="token number" style="color:#5a9bcf">45</span><span class="token punctuation" style="color:#657b83">,</span><span class="token number" style="color:#5a9bcf">7</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">+</span><span class="token number" style="color:#5a9bcf">45</span><span class="token punctuation" style="color:#657b83">,</span><span class="token number" style="color:#5a9bcf">7</span><span class="token plain"> @@</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag" style="color:#fc929e">dict</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag" style="color:#fc929e">key</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain">localhost</span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag" style="color:#fc929e">key</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag" style="color:#fc929e">dict</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token operator" style="color:#fc929e">-</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag" style="color:#fc929e">key</span><span class="token tag punctuation" style="color:#657b83">></spLine truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -54,7 +54,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/0e1c8cbf.7b838cde.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">A Monthly Release Cadence: Releasing December and January RC · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for A Monthly Release Cadence: Releasing December and January RC · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/06dbeeca.51b3c7de.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/06dbeeca.51b3c7de.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">A Monthly Release Cadence: Releasing December and January RC · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for A Monthly Release Cadence: Releasing December and January RC · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/06dbeeca.51b3c7de.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/06dbeeca.51b3c7de.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Using Native Driver for Animated · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Using Native Driver for Animated · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/bc0a67c5.ca4e1ee1.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/bc0a67c5.69e3e6d7.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/bc0a67c5.ca4e1ee1.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/bc0a67c5.69e3e6d7.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Using Native Driver for Animated · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Using Native Driver for Animated · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/bc0a67c5.ca4e1ee1.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/bc0a67c5.69e3e6d7.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/bc0a67c5.ca4e1ee1.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/bc0a67c5.69e3e6d7.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Better List Views in React Native · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Better List Views in React Native · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,16 +32,16 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/2e429d93.6fb87edb.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/2e429d93.2d8b5061.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">SectionList</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">sections</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">[</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript comment" style="color:#93a1a1">// heterogeneous rendering between sections</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">data</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">[</span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">]</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> key</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> renderItem</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">data</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">[</span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">]</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> key</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> renderItem</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">SectionList</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">sections</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">[</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript comment" style="color:#93a1a1">// heterogeneous rendering between sections</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">data</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">[</span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">]</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> key</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> renderItem</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">data</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">[</span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">]</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> key</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> renderItem</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -54,7 +54,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/2e429d93.6fb87edb.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/2e429d93.2d8b5061.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Better List Views in React Native · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Better List Views in React Native · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,16 +32,16 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/2e429d93.6fb87edb.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/2e429d93.2d8b5061.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">SectionList</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">sections</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">[</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript comment" style="color:#93a1a1">// heterogeneous rendering between sections</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">data</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">[</span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">]</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> key</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> renderItem</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">data</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">[</span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">]</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> key</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> renderItem</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">SectionList</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">sections</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">[</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript comment" style="color:#93a1a1">// heterogeneous rendering between sections</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">data</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">[</span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">]</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> key</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> renderItem</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">data</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">[</span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">]</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> key</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"> renderItem</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">...</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">,</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -54,7 +54,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/2e429d93.6fb87edb.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/2e429d93.2d8b5061.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">idx: The Existential Function · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for idx: The Existential Function · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/58714218.f21324dd.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/58714218.73dee04a.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/58714218.f21324dd.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/58714218.73dee04a.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">idx: The Existential Function · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for idx: The Existential Function · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/58714218.f21324dd.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/58714218.73dee04a.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/58714218.f21324dd.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/58714218.73dee04a.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Introducing Create React Native App · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Introducing Create React Native App · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/1d122a8c.fa6e47b9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/1d122a8c.f34fc843.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/1d122a8c.fa6e47b9.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/1d122a8c.f34fc843.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Introducing Create React Native App · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Introducing Create React Native App · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/1d122a8c.fa6e47b9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/1d122a8c.f34fc843.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/1d122a8c.fa6e47b9.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/1d122a8c.f34fc843.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native Monthly #1 · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native Monthly #1 · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/02a2ec6a.d965b926.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/02a2ec6a.d965b926.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native Monthly #1 · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native Monthly #1 · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/02a2ec6a.d965b926.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/02a2ec6a.d965b926.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native Monthly #2 · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native Monthly #2 · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/cc804fb8.15376aa1.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/cc804fb8.15376aa1.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native Monthly #2 · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native Monthly #2 · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/cc804fb8.15376aa1.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/cc804fb8.15376aa1.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native Performance in Marketplace · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native Performance in Marketplace · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/96127592.d0bcc752.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/96127592.d0bcc752.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native Performance in Marketplace · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native Performance in Marketplace · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/96127592.d0bcc752.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/96127592.d0bcc752.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native Monthly #3 · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native Monthly #3 · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/d4a41a82.643c6961.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/d4a41a82.643c6961.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native Monthly #3 · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native Monthly #3 · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/d4a41a82.643c6961.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/d4a41a82.643c6961.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native Monthly #4 · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native Monthly #4 · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/16a87f3b.6a9f30d0.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/16a87f3b.6a9f30d0.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native Monthly #4 · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native Monthly #4 · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/16a87f3b.6a9f30d0.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/16a87f3b.6a9f30d0.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native Monthly #5 · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native Monthly #5 · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/d84426ff.8e22e920.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/d84426ff.8e22e920.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native Monthly #5 · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native Monthly #5 · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/d84426ff.8e22e920.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/d84426ff.8e22e920.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native Monthly #6 · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native Monthly #6 · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/56a1ca5f.85b18a9b.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/56a1ca5f.85b18a9b.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native Monthly #6 · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native Monthly #6 · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/56a1ca5f.85b18a9b.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/56a1ca5f.85b18a9b.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Implementing Twitter’s App Loading Animation in React Native · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Implementing Twitter’s App Loading Animation in React Native · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,20 +32,20 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/36156fac.c1f532b6.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">MaskedViewIOS</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">maskElement</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript tag punctuation" style="color:#657b83"><</span><span class="token tag script language-javascript tag class-name" style="color:#fac863">Text</span><span class="token tag script language-javascript tag punctuation" style="color:#657b83">></span><span class="token tag script language-javascript" style="color:#fc929e">Basic Mask</span><span class="token tag script language-javascript tag punctuation" style="color:#657b83"></</span><span class="token tag script language-javascript tag class-name" style="color:#fac863">Text</span><span class="token tag script language-javascript tag punctuation" style="color:#657b83">></span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e"> backgroundColor</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript string" style="color:#8dc891">'blue'</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag punctuation" style="color:#657b83">/></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">MaskedViewIOS</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p><code>MaskedViewIOS</code> takes props <code>maskElement</code> and <code>children</code>. The children are masked by the <code>maskElement</code>. Note that the mask doesn’t need to be an image, it can be any arbitrary view. The behavior of the above example would be to render the blue view, but for it to be visible only where the words “Basic Mask” are from the <code>maskElement</code>. We just made complicated blue text.</p><p>What we want to do is render our blue layer, and then on top render our masked app and white layers with the Twitter logo.</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> fullScreenBlueLayer</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-namLine truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> opacityClearToVisible </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> opacity</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> loadingProgress</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">interpolate</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> inputRange</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token number" style="color:#5a9bcf">0</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">15</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">30</span><span class="token punctuation" style="color:#657b83">]</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> outputRange</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token number" style="color:#5a9bcf">0</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">0</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">1</span><span class="token punctuation" style="color:#657b83">]</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> extrapolate</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'clamp'</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// clamp means when the input is 30-100, output should stay at 1</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> imageScale </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> transform</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> scale</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> loadingProgress</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">interpolate</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> inputRange</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token number" style="color:#5a9bcf">0</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">10</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">100</span><span class="token punctuation" style="color:#657b83">]</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> outputRange</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token number" style="color:#5a9bcf">1</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">0.8</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">70</span><span class="token punctuation" style="color:#657b83">]</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">]</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> appScale </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> transform</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> scale</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> loadingProgress</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">interpolate</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> inputRange</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token number" style="color:#5a9bcf">0</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">100</span><span class="token punctuation" style="color:#657b83">]</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> outputRange</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token number" style="color:#5a9bcf">1.1</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">1</span><span class="token punctuation" style="color:#657b83">]</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">]</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>Now that we have these style objects, we can use them when rendering the snippet of the view from earlier in the post. Note that only <code>Animated.View</code>, <code>Animated.Text</code>, and <code>Animated.Image</code> are able to use style objects that use <code>Animated.Value</code>.</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> fullScreenBlueLayer </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuaLine truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">styles</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript" style="color:#fc929e">fullScreen</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain">fullScreenBlueLayer</span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">MaskedViewIOS</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e"> flex</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript number" style="color:#5a9bcf">1</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">maskElement</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript tag punctuation" style="color:#657b83"><</span><span class="token tag script language-javascript tag class-name" style="color:#fac863">View</span><span class="token tag script language-javascript tag" style="color:#fc929e"> </span><span class="token tag script language-javascript tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript tag script language-javascript" style="color:#fc929e">styles</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript tag script language-javascript" style="color:#fc929e">centeredFullScreen</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript tag punctuation" style="color:#65Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -58,7 +58,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/36156fac.c1f532b6.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+7
-7
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Implementing Twitter’s App Loading Animation in React Native · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Implementing Twitter’s App Loading Animation in React Native · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,20 +32,20 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/36156fac.c1f532b6.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">MaskedViewIOS</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">maskElement</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript tag punctuation" style="color:#657b83"><</span><span class="token tag script language-javascript tag class-name" style="color:#fac863">Text</span><span class="token tag script language-javascript tag punctuation" style="color:#657b83">></span><span class="token tag script language-javascript" style="color:#fc929e">Basic Mask</span><span class="token tag script language-javascript tag punctuation" style="color:#657b83"></</span><span class="token tag script language-javascript tag class-name" style="color:#fac863">Text</span><span class="token tag script language-javascript tag punctuation" style="color:#657b83">></span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e"> backgroundColor</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript string" style="color:#8dc891">'blue'</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag punctuation" style="color:#657b83">/></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">MaskedViewIOS</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p><code>MaskedViewIOS</code> takes props <code>maskElement</code> and <code>children</code>. The children are masked by the <code>maskElement</code>. Note that the mask doesn’t need to be an image, it can be any arbitrary view. The behavior of the above example would be to render the blue view, but for it to be visible only where the words “Basic Mask” are from the <code>maskElement</code>. We just made complicated blue text.</p><p>What we want to do is render our blue layer, and then on top render our masked app and white layers with the Twitter logo.</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> fullScreenBlueLayer</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-namLine truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> opacityClearToVisible </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> opacity</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> loadingProgress</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">interpolate</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> inputRange</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token number" style="color:#5a9bcf">0</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">15</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">30</span><span class="token punctuation" style="color:#657b83">]</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> outputRange</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token number" style="color:#5a9bcf">0</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">0</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">1</span><span class="token punctuation" style="color:#657b83">]</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> extrapolate</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'clamp'</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// clamp means when the input is 30-100, output should stay at 1</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> imageScale </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> transform</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> scale</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> loadingProgress</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">interpolate</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> inputRange</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token number" style="color:#5a9bcf">0</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">10</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">100</span><span class="token punctuation" style="color:#657b83">]</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> outputRange</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token number" style="color:#5a9bcf">1</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">0.8</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">70</span><span class="token punctuation" style="color:#657b83">]</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">]</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> appScale </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> transform</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> scale</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> loadingProgress</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">interpolate</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> inputRange</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token number" style="color:#5a9bcf">0</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">100</span><span class="token punctuation" style="color:#657b83">]</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> outputRange</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token number" style="color:#5a9bcf">1.1</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">1</span><span class="token punctuation" style="color:#657b83">]</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">]</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>Now that we have these style objects, we can use them when rendering the snippet of the view from earlier in the post. Note that only <code>Animated.View</code>, <code>Animated.Text</code>, and <code>Animated.Image</code> are able to use style objects that use <code>Animated.Value</code>.</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> fullScreenBlueLayer </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuaLine truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">styles</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript" style="color:#fc929e">fullScreen</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain">fullScreenBlueLayer</span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">MaskedViewIOS</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e"> flex</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript number" style="color:#5a9bcf">1</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">maskElement</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript tag punctuation" style="color:#657b83"><</span><span class="token tag script language-javascript tag class-name" style="color:#fac863">View</span><span class="token tag script language-javascript tag" style="color:#fc929e"> </span><span class="token tag script language-javascript tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript tag script language-javascript" style="color:#fc929e">styles</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript tag script language-javascript" style="color:#fc929e">centeredFullScreen</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript tag punctuation" style="color:#65Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -58,7 +58,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/36156fac.c1f532b6.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Using AWS with React Native · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Using AWS with React Native · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,12 +32,12 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/ca7fc1c2.708df2a5.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Auth</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">signIn</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">username</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> password</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">then</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">user</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">log</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">user</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">catch</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">err</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">log</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">err</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Auth</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">confirmSignIn</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">user</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> code</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">then</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">data</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">log</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">data</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">catch</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">err</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">log</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">err</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>In the code above, you can see an example of some of the common tasks that Amplify helps you with, such as using multi-factor authentication (MFA) codes with either email or SMS. The supported categories today are:</p><ul><li><strong>Auth</strong>: Provides credential automation. Out-of-the-box implementation uses AWS credentials for signing, and OIDC JWT tokens from <a href="https://aws.amazon.com/cognito/" target="_blank" rel="noopener noreferrer">Amazon Cognito</a>. Common functionality, such as MFA features, is supported.</li><li><strong>Analytics</strong>: With a single line of code, get tracking for authenticated or unauthenticated users in <a href="https://aws.amazon.com/pinpoint/" target="_blank" rel="noopener noreferrer">Amazon Pinpoint</a>. Extend this for custom metrics or attributes, as you prefer.</li><li><strong>API</strong>: Provides interaction with RESTful APIs in a secure manner, leveraging <a href="https://docs.aws.amazon.com/general/latest/gr/signature-version-4.html" target="_blank" rel="noopener noreferrer">AWS Signature Version 4</a>. The API module is great on serverless infrastructures with <a href="https://aws.amazon.com/api-gateway/" target="_blank" rel="noopener noreferrer">Amazon API Gateway</a>.</li><li><strong>Storage</strong>: Simplified commands to upload, download, and list content in <a href="https://aws.amazon.com/s3/" target="_blank" rel="noopener noreferrer">Amazon S3</a>. You can also easily group data into public or private content on a per-user basis.</li><li><strong>Caching</strong>: An LRU cache interface across web apps and React Native that uses implementation-specific persistence.</li><li><strong>i18n and Logging</strong>: Provides internationalization and localization capabilities, as well as debugging and logging capabilities.</li></ul><p>One of the nice things about Amplify is that it encodes "best practices" in the design for your specific programming environment. For example, one thing we found working with customers and React Native developers is that shortcuts taken during development to get things working quickly would make it through to production stacks. These can compromise either scalability or security, and force infrastructure rearchitecture and code refactoring.</p><p>One example of how we help developers avoid this is the <a href="https://www.allthingsdistributed.com/2016/06/aws-lambda-serverless-reference-architectures.html" target="_blank" rel="noopener noreferrer">Serverless Reference Architectures with AWS Lambda</a>. These show you best practices around using Amazon API Gateway and AWS Lambda together when building your backend. This pattern is encoded into the <code>ALine truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Amplify</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">configure</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">aws_exports</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
@@ -45,8 +45,8 @@
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">export</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">default</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">withAuthenticator</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">App</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>The underlying component is also provided as <code><Authenticator /></code>, which gives you full control to customize the UI. It also gives you some properties around managing the state of the user, such as if they've signed in or are waiting for MFA confirmation, and callbacks that you can fire when state changes.</p><p>Similarly, you'll find general React components that you can use for different use cases. You can customize these to your needs, for example, to show all private images from Amazon S3 in the <code>Storage</code> module:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">S3Album</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">level</span><span class="token tag attr-value punctuation" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag attr-value" style="color:#8dc891">private</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">path</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">path</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">filter</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript parameter" style="color:#fc929e">item</span><span class="token tag script language-javascript punctuation" style="color:#657b83">)</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">=></span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript regex" style="color:#8dc891">/jpg/i</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript function" style="color:#79b6f2">test</span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript" style="color:#fc929e">item</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript" style="color:#fc929e">path</span><span class="token tag script language-javascript punctuation" style="color:#657b83">)</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">/></span></div></div></div></div></div><p>You can control many of the component features via props, as shown earlier, with public or private storage options. There are even capabilities to automatically gather analytics when users interact Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> client </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">new</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">AWSAppSyncClient</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> url</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> awsconfig</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">graphqlEndpoint</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> region</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> awsconfig</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">region</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> auth</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain">type</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token constant" style="color:#5a9bcf">AUTH_TYPE</span><span class="token punctuation" style="color:#657b83">.</span><span class="token constant" style="color:#5a9bcf">API_KEY</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> apiKey</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> awsconfig</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">apiKey</span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>The AppSync console provides a configuration file for download, which contains your GraphQL endpoint, AWS Region, and API key. You can then use the client with <a href="https://github.com/apollographql/react-apollo" target="_blank" rel="noopener noreferrer">React Apollo</a>:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#79b6f2">WithProvider</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">ApolloProvider</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">client</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">client</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FLine truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -59,7 +59,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/ca7fc1c2.708df2a5.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Using AWS with React Native · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Using AWS with React Native · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,12 +32,12 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/ca7fc1c2.708df2a5.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Auth</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">signIn</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">username</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> password</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">then</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">user</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">log</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">user</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">catch</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">err</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">log</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">err</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Auth</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">confirmSignIn</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">user</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> code</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">then</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">data</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">log</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">data</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">catch</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">err</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">log</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">err</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>In the code above, you can see an example of some of the common tasks that Amplify helps you with, such as using multi-factor authentication (MFA) codes with either email or SMS. The supported categories today are:</p><ul><li><strong>Auth</strong>: Provides credential automation. Out-of-the-box implementation uses AWS credentials for signing, and OIDC JWT tokens from <a href="https://aws.amazon.com/cognito/" target="_blank" rel="noopener noreferrer">Amazon Cognito</a>. Common functionality, such as MFA features, is supported.</li><li><strong>Analytics</strong>: With a single line of code, get tracking for authenticated or unauthenticated users in <a href="https://aws.amazon.com/pinpoint/" target="_blank" rel="noopener noreferrer">Amazon Pinpoint</a>. Extend this for custom metrics or attributes, as you prefer.</li><li><strong>API</strong>: Provides interaction with RESTful APIs in a secure manner, leveraging <a href="https://docs.aws.amazon.com/general/latest/gr/signature-version-4.html" target="_blank" rel="noopener noreferrer">AWS Signature Version 4</a>. The API module is great on serverless infrastructures with <a href="https://aws.amazon.com/api-gateway/" target="_blank" rel="noopener noreferrer">Amazon API Gateway</a>.</li><li><strong>Storage</strong>: Simplified commands to upload, download, and list content in <a href="https://aws.amazon.com/s3/" target="_blank" rel="noopener noreferrer">Amazon S3</a>. You can also easily group data into public or private content on a per-user basis.</li><li><strong>Caching</strong>: An LRU cache interface across web apps and React Native that uses implementation-specific persistence.</li><li><strong>i18n and Logging</strong>: Provides internationalization and localization capabilities, as well as debugging and logging capabilities.</li></ul><p>One of the nice things about Amplify is that it encodes "best practices" in the design for your specific programming environment. For example, one thing we found working with customers and React Native developers is that shortcuts taken during development to get things working quickly would make it through to production stacks. These can compromise either scalability or security, and force infrastructure rearchitecture and code refactoring.</p><p>One example of how we help developers avoid this is the <a href="https://www.allthingsdistributed.com/2016/06/aws-lambda-serverless-reference-architectures.html" target="_blank" rel="noopener noreferrer">Serverless Reference Architectures with AWS Lambda</a>. These show you best practices around using Amazon API Gateway and AWS Lambda together when building your backend. This pattern is encoded into the <code>ALine truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Amplify</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">configure</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">aws_exports</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
@@ -45,8 +45,8 @@
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">export</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">default</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">withAuthenticator</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">App</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>The underlying component is also provided as <code><Authenticator /></code>, which gives you full control to customize the UI. It also gives you some properties around managing the state of the user, such as if they've signed in or are waiting for MFA confirmation, and callbacks that you can fire when state changes.</p><p>Similarly, you'll find general React components that you can use for different use cases. You can customize these to your needs, for example, to show all private images from Amazon S3 in the <code>Storage</code> module:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">S3Album</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">level</span><span class="token tag attr-value punctuation" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag attr-value" style="color:#8dc891">private</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">path</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">path</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">filter</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript parameter" style="color:#fc929e">item</span><span class="token tag script language-javascript punctuation" style="color:#657b83">)</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">=></span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript regex" style="color:#8dc891">/jpg/i</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript function" style="color:#79b6f2">test</span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript" style="color:#fc929e">item</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript" style="color:#fc929e">path</span><span class="token tag script language-javascript punctuation" style="color:#657b83">)</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">/></span></div></div></div></div></div><p>You can control many of the component features via props, as shown earlier, with public or private storage options. There are even capabilities to automatically gather analytics when users interact Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> client </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">new</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">AWSAppSyncClient</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> url</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> awsconfig</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">graphqlEndpoint</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> region</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> awsconfig</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">region</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> auth</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain">type</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token constant" style="color:#5a9bcf">AUTH_TYPE</span><span class="token punctuation" style="color:#657b83">.</span><span class="token constant" style="color:#5a9bcf">API_KEY</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> apiKey</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> awsconfig</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">apiKey</span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>The AppSync console provides a configuration file for download, which contains your GraphQL endpoint, AWS Region, and API key. You can then use the client with <a href="https://github.com/apollographql/react-apollo" target="_blank" rel="noopener noreferrer">React Apollo</a>:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#79b6f2">WithProvider</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">ApolloProvider</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">client</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">client</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FLine truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -59,7 +59,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/ca7fc1c2.708df2a5.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Building <InputAccessoryView> For React Native · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Building <InputAccessoryView> For React Native · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,16 +32,16 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/dcb7c7d4.d00fd76c.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token function" style="color:#79b6f2">render</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> inputAccessoryViewID </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'inputAccessoryView1'</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">TextInput</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">styles</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript" style="color:#fc929e">default</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">inputAccessoryViewID</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">inputAccessoryViewID</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">onChangeText</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript parameter" style="color:#fc929e">text</span><span class="token tag script language-javascript punctuation" style="color:#657b83">)</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">=></span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript keyword" style="color:#c5a5c5">this</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript function" style="color:#79b6f2">setState</span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e"> text </span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag scriptLine truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -54,7 +54,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/dcb7c7d4.d00fd76c.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Building <InputAccessoryView> For React Native · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Building <InputAccessoryView> For React Native · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,16 +32,16 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/dcb7c7d4.d00fd76c.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token function" style="color:#79b6f2">render</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> inputAccessoryViewID </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'inputAccessoryView1'</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">TextInput</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">styles</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript" style="color:#fc929e">default</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">inputAccessoryViewID</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">inputAccessoryViewID</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">onChangeText</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript parameter" style="color:#fc929e">text</span><span class="token tag script language-javascript punctuation" style="color:#657b83">)</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript operator" style="color:#fc929e">=></span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript keyword" style="color:#c5a5c5">this</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript function" style="color:#79b6f2">setState</span><span class="token tag script language-javascript punctuation" style="color:#657b83">(</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e"> text </span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag scriptLine truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -54,7 +54,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/dcb7c7d4.d00fd76c.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Built with React Native - The Build.com app · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Built with React Native - The Build.com app · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/7d610914.fe9e9075.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/7d610914.fe9e9075.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Built with React Native - The Build.com app · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Built with React Native - The Build.com app · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/7d610914.fe9e9075.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/7d610914.fe9e9075.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Using TypeScript with React Native · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Using TypeScript with React Native · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,12 +32,12 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/851d21db.0e349462.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">export</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">interface</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Props</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> name</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token builtin" style="color:#2aa198">string</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> enthusiasmLevel</span><span class="token operator" style="color:#fc929e">?</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token builtin" style="color:#2aa198">number</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">interface</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">State</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> enthusiasmLevel</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token builtin" style="color:#2aa198">number</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">export</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">class</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Hello</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">extends</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">React</span><span class="token class-name punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">Component</span><span class="token operator" style="color:#fc929e"><</span><span class="token maybe-class-name">Props</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token maybe-class-name">State</span><span class="token operator" style="color:#fc929e">></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">constructor</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">props</span><span class="token parameter punctuation" style="color:#657b83">:</span><span class="token parameter"> Props</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">super</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">props</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
@@ -51,8 +51,8 @@
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> </span><span class="token maybe-class-name">Hello</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'../Hello'</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token function" style="color:#79b6f2">it</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'renders correctly with defaults'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> button </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> renderer</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">.</span><span class="token method function property-access" style="color:#79b6f2">create</span><span class="token punctuation" style="color:#657b83">(</span><span class="token operator" style="color:#fc929e"><</span><span class="token maybe-class-name">Hello</span><span class="token plain"> name</span><span class="token operator" style="color:#fc929e">=</span><span class="token string" style="color:#8dc891">"World"</span><span class="token plain"> enthusiasmLevel</span><span class="token operator" style="color:#fc929e">=</span><span class="token punctuation" style="color:#657b83">{</span><span class="token number" style="color:#5a9bcf">1</span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">/</span><span class="token operator" style="color:#fc929e">></span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">.</span><span class="token method function property-access" style="color:#79b6f2">toJSON</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token function" style="color:#79b6f2">expect</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">button</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">.</span><span class="token method function property-access" style="color:#79b6f2">toMatchSnapshot</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>The first time the test is run, it will create a snapshot of the rendered component and store it in the <code>components/__tests__/__snapshots__/Hello.tsx.snap</code> file. When you modify your component, you'll need to update the snapshots and review the update for inadvertent changes. You can read more about testing React Native components <a href="https://facebook.github.io/jest/docs/en/tutorial-react-native.html" target="_blank" rel="noopener noreferrer">here</a>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="next-steps"></a>Next Steps<a aria-hidden="true" tabindex="-1" class="hash-link" href="#next-steps" title="Direct link to heading">#</a></h2><p>Check out the official <a href="https://reactjs.org/tutorial/tutorial.html" target="_blank" rel="noopener noreferrer">React tutorial</a> and state-management library <a href="http://redux.js.org" target="_blank" rel="noopener noreferrer">Redux</a>. These resources can be helpful when writing React Native apps. Additionally, you may want to look at <a href="https://microsoft.github.io/reactxp/" target="_blank" rel="noopener noreferrer">ReactXP</a>, a component library written entirely in TypeScript that supports both React on the web as well as ReacLine truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -65,7 +65,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/851d21db.0e349462.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Using TypeScript with React Native · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Using TypeScript with React Native · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,12 +32,12 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/851d21db.0e349462.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">export</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">interface</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Props</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> name</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token builtin" style="color:#2aa198">string</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> enthusiasmLevel</span><span class="token operator" style="color:#fc929e">?</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token builtin" style="color:#2aa198">number</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">interface</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">State</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> enthusiasmLevel</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token builtin" style="color:#2aa198">number</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">export</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">class</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Hello</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">extends</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">React</span><span class="token class-name punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">Component</span><span class="token operator" style="color:#fc929e"><</span><span class="token maybe-class-name">Props</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token maybe-class-name">State</span><span class="token operator" style="color:#fc929e">></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">constructor</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">props</span><span class="token parameter punctuation" style="color:#657b83">:</span><span class="token parameter"> Props</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">super</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">props</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
@@ -51,8 +51,8 @@
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> </span><span class="token maybe-class-name">Hello</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'../Hello'</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token function" style="color:#79b6f2">it</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'renders correctly with defaults'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> button </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> renderer</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">.</span><span class="token method function property-access" style="color:#79b6f2">create</span><span class="token punctuation" style="color:#657b83">(</span><span class="token operator" style="color:#fc929e"><</span><span class="token maybe-class-name">Hello</span><span class="token plain"> name</span><span class="token operator" style="color:#fc929e">=</span><span class="token string" style="color:#8dc891">"World"</span><span class="token plain"> enthusiasmLevel</span><span class="token operator" style="color:#fc929e">=</span><span class="token punctuation" style="color:#657b83">{</span><span class="token number" style="color:#5a9bcf">1</span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">/</span><span class="token operator" style="color:#fc929e">></span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">.</span><span class="token method function property-access" style="color:#79b6f2">toJSON</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token function" style="color:#79b6f2">expect</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">button</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">.</span><span class="token method function property-access" style="color:#79b6f2">toMatchSnapshot</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>The first time the test is run, it will create a snapshot of the rendered component and store it in the <code>components/__tests__/__snapshots__/Hello.tsx.snap</code> file. When you modify your component, you'll need to update the snapshots and review the update for inadvertent changes. You can read more about testing React Native components <a href="https://facebook.github.io/jest/docs/en/tutorial-react-native.html" target="_blank" rel="noopener noreferrer">here</a>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="next-steps"></a>Next Steps<a aria-hidden="true" tabindex="-1" class="hash-link" href="#next-steps" title="Direct link to heading">#</a></h2><p>Check out the official <a href="https://reactjs.org/tutorial/tutorial.html" target="_blank" rel="noopener noreferrer">React tutorial</a> and state-management library <a href="http://redux.js.org" target="_blank" rel="noopener noreferrer">Redux</a>. These resources can be helpful when writing React Native apps. Additionally, you may want to look at <a href="https://microsoft.github.io/reactxp/" target="_blank" rel="noopener noreferrer">ReactXP</a>, a component library written entirely in TypeScript that supports both React on the web as well as ReacLine truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -65,7 +65,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/851d21db.0e349462.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">State of React Native 2018 · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for State of React Native 2018 · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/c6529506.6dd9d974.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/c6529506.6dd9d974.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">State of React Native 2018 · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for State of React Native 2018 · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/c6529506.6dd9d974.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/c6529506.6dd9d974.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Releasing 0.56 · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Releasing 0.56 · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/819c19cf.ea4ee4bc.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/819c19cf.ea4ee4bc.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Releasing 0.56 · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Releasing 0.56 · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/819c19cf.ea4ee4bc.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/819c19cf.ea4ee4bc.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Accessibility API Updates · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Accessibility API Updates · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/a94ff3e6.62de1b92.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/a94ff3e6.62de1b92.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Accessibility API Updates · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Accessibility API Updates · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/a94ff3e6.62de1b92.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/a94ff3e6.62de1b92.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Introducing new iOS WebViews · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Introducing new iOS WebViews · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/9420bffc.ed2796f9.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/9420bffc.ed2796f9.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Introducing new iOS WebViews · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Introducing new iOS WebViews · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/9420bffc.ed2796f9.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/9420bffc.ed2796f9.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Open Source Roadmap · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Open Source Roadmap · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/d8261dc7.e5818a64.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/d8261dc7.e5818a64.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Open Source Roadmap · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Open Source Roadmap · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/d8261dc7.e5818a64.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/d8261dc7.e5818a64.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">The State of the React Native Community in 2018 · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for The State of the React Native Community in 2018 · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/5ea7d713.7bc9a7ed.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/5ea7d713.7bc9a7ed.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">The State of the React Native Community in 2018 · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for The State of the React Native Community in 2018 · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/5ea7d713.7bc9a7ed.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/5ea7d713.7bc9a7ed.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native Open Source Update March 2019 · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native Open Source Update March 2019 · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/79606415.f9ae2037.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/79606415.f9ae2037.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native Open Source Update March 2019 · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native Open Source Update March 2019 · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/79606415.f9ae2037.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/79606415.f9ae2037.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Releasing React Native 0.59 · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Releasing React Native 0.59 · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/c99f9fa0.0f816792.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/c99f9fa0.0f816792.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Releasing React Native 0.59 · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Releasing React Native 0.59 · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/c99f9fa0.0f816792.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/c99f9fa0.0f816792.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,8 +18,8 @@
|
||||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Native at F8 and Open Source Podcast · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native at F8 and Open Source Podcast · React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:title" content="React Native"><meta data-react-helmet="true" property="og:description" content="A framework for building native apps using React"><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/styles.fccefeba.css">
|
||||
<link rel="stylesheet" href="/main.b5a87951.css">
|
||||
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.e2076f62.js" as="script">
|
||||
<link rel="preload" href="/main.de9ab764.js" as="script">
|
||||
<link rel="preload" href="/runtime~main.84a81b37.js" as="script">
|
||||
<link rel="preload" href="/main.00cf4c49.js" as="script">
|
||||
<link rel="preload" href="/1.844dff91.js" as="script">
|
||||
<link rel="preload" href="/2.e0509fa8.js" as="script">
|
||||
<link rel="preload" href="/3.f2b0ab2f.js" as="script">
|
||||
@@ -32,15 +32,15 @@
|
||||
<link rel="preload" href="/c4f5d8e4.2818d57a.js" as="script">
|
||||
<link rel="preload" href="/ccc49370.5b12bd3d.js" as="script">
|
||||
<link rel="preload" href="/944.c805f1f9.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.eda7271f.js" as="script">
|
||||
<link rel="preload" href="/e4eeaf16.519439c2.js" as="script">
|
||||
<link rel="preload" href="/2cbf21ba.6c710ceb.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/getting-started">Next</a></li><li><a class="dropdown__link" href="/docs/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/blog">Blog</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/getting-started">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--2"><div class="sidebar_2ewA"><h3 class="sidebarItemTitle_LeXb">All Blog Posts</h3><ul class="sidebarItemList_eLFE"><li class="sidebarItem_Line truncated
|
||||
<script src="/styles.25dfd8ab.js"></script>
|
||||
<script src="/runtime~main.e2076f62.js"></script>
|
||||
<script src="/main.de9ab764.js"></script>
|
||||
<script src="/runtime~main.84a81b37.js"></script>
|
||||
<script src="/main.00cf4c49.js"></script>
|
||||
<script src="/1.844dff91.js"></script>
|
||||
<script src="/2.e0509fa8.js"></script>
|
||||
<script src="/3.f2b0ab2f.js"></script>
|
||||
@@ -53,7 +53,7 @@
|
||||
<script src="/c4f5d8e4.2818d57a.js"></script>
|
||||
<script src="/ccc49370.5b12bd3d.js"></script>
|
||||
<script src="/944.c805f1f9.js"></script>
|
||||
<script src="/e4eeaf16.eda7271f.js"></script>
|
||||
<script src="/e4eeaf16.519439c2.js"></script>
|
||||
<script src="/2cbf21ba.6c710ceb.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loaded 100 of 1774 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user