react-native/index.html at gh-pages · devagul93/react-native · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html><html lang=""><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>React Native · A framework for building native apps using React</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A framework for building native apps using React"/><meta property="og:title" content="React Native · A framework for building native apps using React"/><meta property="og:type" content="website"/><meta property="og:url" content="https://reactnative.dev/"/><meta property="og:description" content="A framework for building native apps using React"/><meta property="og:image" content="https://reactnative.dev/img/logo-og.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://reactnative.dev/img/logo-og.png"/><link rel="shortcut icon" href="/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://reactnative.dev/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://reactnative.dev/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
              (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
              (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
              m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
              })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

              ga('create', 'UA-41298772-2', 'auto');
              ga('send', 'pageview');
            </script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/focus-visible@5.0.2/dist/focus-visible.min.js"></script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="/js/codeblocks.js"></script><script type="text/javascript" src="/js/tabs.js"></script><script type="text/javascript" src="/js/docs-rating.js"></script><script type="text/javascript" src="/js/announcement.js"></script><script src="https://unpkg.com/vanilla-back-to-top@7.1.14/dist/vanilla-back-to-top.min.js"></script><script>
        document.addEventListener('DOMContentLoaded', function() {
          addBackToTop(
            {"zIndex":100}
          )
        });
        </script><script src="/js/scrollSpy.js"></script><link rel="stylesheet" href="/css/prism.css"/><link rel="stylesheet" href="/css/main.css"/><script src="/js/codetabs.js"></script></head><body><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><img class="logo" src="/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/versions"><h3>0.62</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/docs/getting-started" target="_self">Docs</a></li><li class=""><a href="/docs/components-and-apis" target="_self">Components</a></li><li class=""><a href="/docs/accessibilityinfo" target="_self">API</a></li><li class=""><a href="/help" target="_self">Community</a></li><li class=""><a href="/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><main class="HomePage"><script src="/js/dissectionAnimation.js"></script><script src="/js/headerAnimation.js"></script><section class="Section HeaderHero dark"><div class="socialLinks"><a href="https://twitter.com/reactnative?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-show-count="false">Follow @reactnative</a><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-size="large" aria-label="Star facebook/react-native on GitHub">Star</a></div><div class="TwoColumns reverse"><div class="column first right"><svg class="LogoAnimation init" width="350" height="350" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"><title>React Logo</title><clipPath id="screen"><rect class="screen undefined" rx="3%" width="180" height="300" x="-90" y="-150" fill="none" stroke="gray"></rect></clipPath><rect x="-25" y="120" width="50" height="25" rx="2" fill="white" stroke="none" class="stand"></rect><polygon points="-125,90 125,90 160,145 -160,145" fill="white" stroke="white" stroke-width="5" stroke-linejoin="round" class="base"></polygon><rect class="screen background" rx="3%" width="180" height="300" x="-90" y="-150" stroke="none"></rect><g clip-path="url(#screen)" class="logo"><g class="logoInner"><circle cx="0" cy="0" r="30" fill="#61dafb"></circle><g stroke="#61dafb" stroke-width="15" fill="none" id="logo"><ellipse rx="165" ry="64"></ellipse><ellipse rx="165" ry="64" transform="rotate(60)"></ellipse><ellipse rx="165" ry="64" transform="rotate(120)"></ellipse></g></g><line x1="-30" x2="30" y1="130" y2="130" stroke="white" stroke-width="8" stroke-linecap="round" class="speaker"></line></g><rect class="screen undefined" rx="3%" width="180" height="300" x="-90" y="-150" fill="none" stroke="white"></rect></svg></div><div class="column last left"><h1 class="title">React Native</h1><p class="tagline">Learn once, write anywhere.</p><div class="buttons"><div><a class="ActionButton primary" href="/docs/getting-started" target="_self">Get started</a><a class="ActionButton secondary" href="/docs/tutorial" target="_self">Learn basics</a></div></div></div></div></section><section class="Section NativeApps light"><div class="TwoColumns reverse"><div class="column first right"><h2 class="Heading">Create native apps for Android and iOS using React</h2><div><span><p>React Native combines the best parts of native development with React,
a best-in-class JavaScript library for building user interfaces.</p>
<p><strong>Use a little—or a lot</strong>. You can use React Native today in your existing
Android and iOS projects or you can create a whole new app from scratch.</p>
</span></div></div><div class="column last left"><img alt="" src="/img/homepage/phones.png"/></div></div></section><section class="Section NativeCode tint"><div class="TwoColumns "><div class="column first left"><h2 class="Heading">Written in JavaScript—rendered with native code</h2><div><span><p>React primitives render to native platform UI, meaning your app uses the
same native platform APIs other apps do.</p>
<p><strong>Many platforms</strong>, one React. Create platform-specific versions of components
so a single codebase can share code across platforms. With React Native,
one team can maintain two platforms and share a common technology—React.</p>
</span></div></div><div class="column last right"><div><span><pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>Text<span class="token punctuation">,</span> View<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>Header<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./Header'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>heading<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./Typography'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">WelcomeScreen</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Header</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Welcome to React Native<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>heading<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Step One</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
      Edit App.js to change this screen and turn it
      into your app.
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>heading<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">See Your Changes</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
      Press Cmd + R inside the simulator to reload
      your app’s code.
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>heading<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Debug</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
      Press Cmd + M or Shake your device to open the
      React Native Debug Menu.
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>heading<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Learn</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
      Read the docs to discover what to do next:
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
   </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
</code></pre>
</span></div></div></div></section><section class="Section NativeDevelopment light"><div class="TwoColumns reverse"><div class="column first right"><h2 class="Heading">Native Development For Everyone</h2><div><span><p>React Native lets you create truly native apps and doesn't compromise on your users' experience.
It provides a core set of platform agnostic native components like <code>View</code>, <code>Text</code>, and <code>Image</code>
that map directly to the platform’s native UI building blocks.</p>
</span></div></div><div class="column last left"><div class="dissection"><img alt="" src="/img/homepage/dissection/0.png"/><img alt="" src="/img/homepage/dissection/1.png"/><img alt="" src="/img/homepage/dissection/2.png"/><img alt="" src="/img/homepage/dissection/3.png"/></div></div></div></section><section class="Section CrossPlatform tint"><div class="TwoColumns "><div class="column first left"><h2 class="Heading">Seamless Cross-Platform</h2><div><span><p>React components wrap existing native code and interact with native APIs via
React’s declarative UI paradigm and JavaScript. This enables native app development
for whole new teams of developers, and can let existing native teams work much faster.</p>
</span></div></div><div class="column last right"><img alt="" src="/img/homepage/cross-platform.svg"/></div></div></section><section class="Section FastRefresh light"><div class="TwoColumns reverse"><div class="column first right"><h2 class="Heading">Fast Refresh</h2><div><span><p><strong>See your changes as soon as you save.</strong> With the power of JavaScript,
React Native lets you iterate at lightning speed. No more waiting for native builds to finish.
Save, see, repeat.</p>
</span></div></div><div class="column last left"><video muted="" autoplay="" loop="" playsinline="" src="/img/homepage/ReactRefresh.mp4"></video></div></div></section><section class="Section Talks tint"><div class="TwoColumns "><div class="column first left"><h2 class="Heading">Talks</h2><div><span><p>Members of the React Native team frequently speak at various
conferences.</p>
<p>You can follow the latest news from the React Native team on
Twitter</p>
</span></div><a href="https://twitter.com/reactnative?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-show-count="false">Follow @reactnative</a></div><div class="column last right"><div class="vidWrapper"><iframe src="https://www.youtube.com/embed/NCAY0HIfrwc" title="Mobile Innovation with React Native, ComponentKit, and Litho" frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div></div></div></section><section class="Section Community light"><div class="content"><h2 class="Heading">Facebook Supported, Community Driven</h2><div class="TwoColumns "><div class="column first left"><p class="firstP"><img src="/img/homepage/fb-logo.svg" alt=""/><span>Facebook released React Native in 2015 and has been maintaining it ever since.</span></p><div><span><p>In 2018, React Native had the <a href="https://octoverse.github.com/2018/projects.html#repositories">2nd highest</a> number of contributors for any repository in GitHub.
Today, React Native is supported by contributions from individuals and companies around the world
including <a href="https://callstack.com/">Callstack</a>, <a href="https://expo.io/">Expo</a>, <a href="https://infinite.red/">Infinite Red</a>, <a href="https://www.microsoft.com/en-gb/">Microsoft</a>, and <a href="https://swmansion.com/">Software Mansion</a>.</p>
<p>Our community is always shipping exciting new projects and exploring platforms beyond Android and iOS
with repos like React Native Windows and React Native Web.</p>
</span></div></div><div class="column last right"><p>React Native is being used in thousands of apps, but it&#x27;s likely you&#x27;ve already used it in one of these apps:</p><ul class="AppList"><li class="item"><a href="https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/"><img src="/img/showcase/facebook.png" alt="Facebook"/></a></li><li class="item"><a href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/"><img src="/img/showcase/adsmanager.png" alt="Facebook Ads Manager"/></a></li><li class="item"><a href="https://analytics.facebook.com/blog"><img src="/img/showcase/fba.png" alt="Facebook Analytics"/></a></li><li class="item"><a href="https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7#.3h4wir4zr"><img src="/img/showcase/instagram.png" alt="Instagram"/></a></li><li class="item"><a href=""><img src="/img/showcase/oculus.png" alt="Oculus"/></a></li><li class="item"><a href="https://dev.skype.com/react"><img src="/img/showcase/skype.png" alt="Skype"/></a></li><li class="item"><a href="https://blog.discord.com/how-discord-achieves-native-ios-performance-with-react-native-390c84dcd502"><img src="/img/showcase/discord.png" alt="Discord"/></a></li><li class="item"><a href="https://www.techatbloomberg.com/blog/bloomberg-used-react-native-develop-new-consumer-app/"><img src="/img/showcase/bloomberg.png" alt="Bloomberg"/></a></li><li class="item"><a href="https://medium.com/@Pinterest_Engineering/supporting-react-native-at-pinterest-f8c2233f90e6"><img src="/img/showcase/pinterest.png" alt="Pinterest"/></a></li><li class="item"><a href="https://www.tesla.com/blog"><img src="/img/showcase/tesla.png" alt="Tesla"/></a></li><li class="item"><a href="https://eng.uber.com/ubereats-react-native/"><img src="/img/showcase/ubereats.png" alt="Uber Eats"/></a></li><li class="item"><a href=" https://medium.com/walmartlabs/react-native-at-walmartlabs-cdd140589560#.ueonqqloc"><img src="/img/showcase/walmart.png" alt="Walmart"/></a></li><li class="item"><a href="https://www.wix.com/wix-lp/wix-app"><img src="/img/showcase/wix.png" alt="Wix.com"/></a></li><li class="item"><a href="https://www.salesforce.com/products/einstein/einstein-voice/"><img src="/img/showcase/salesforce.png" alt="Salesforce"/></a></li><li class="item"><a href="https://artsy.github.io/series/react-native-at-artsy/"><img src="https://raw.githubusercontent.com/artsy/eigen/master/Artsy/Resources/Images.xcassets/AppIcon.appiconset/AppIcon167.png" alt="Artsy"/></a></li><li class="item"><a href="https://www.tencent.com/en-us/system.html"><img src="/img/showcase/qq.png" alt="Tencent QQ"/></a></li></ul><p>and <a href="/showcase">many more</a>.</p></div></div></div></section><section class="Section GetStarted dark"><div class="content"><h2 class="Heading">Give it a try</h2><ol class="steps"><li><p>Run this</p><div class="terminal"><code>npx react-native init MyTestApp</code></div></li><li><p>Read these</p><div><a class="ActionButton primary" href="/docs/getting-started" target="_self">Get started</a><a class="ActionButton secondary" href="/docs/tutorial" target="_self">Learn basics</a></div></li></ol></div></section></main><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who&#x27;s using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
                </script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
                document.addEventListener('keyup', function(e) {
                  if (e.target !== document.body) {
                    return;
                  }
                  // keyCode for '/' (slash)
                  if (e.keyCode === 191) {
                    const search = document.getElementById('search_input_react');
                    search && search.focus();
                  }
                });
              </script><script>
              var search = docsearch({

                apiKey: '2c98749b4a1e588efec53b2acec13025',
                indexName: 'react-native-versions',
                inputSelector: '#search_input_react',
                algoliaOptions: {"facetFilters":["tags:0.62"],"hitsPerPage":5}
              });
            </script></body></html>