kitten.sh / rn-llms-txt-gen
this repo has no description
fork atom
rn-llms-txt-gen / .cache / fetch / reactnative.dev / docs_getting-started-without-a-framework.html
at main 40 kB view raw
1<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-0.79 docs-doc-page docs-doc-id-getting-started-without-a-framework" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>Get Started Without a Framework · React Native</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"><meta data-rh=true property=og:url content=https://reactnative.dev/docs/getting-started-without-a-framework><meta data-rh=true property=og:locale content=en><meta data-rh=true name=docusaurus_locale content=en><meta data-rh=true name=docsearch:language content=en><meta data-rh=true property=og:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:card content=summary_large_image><meta data-rh=true name=twitter:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:site content=@reactnative><meta data-rh=true name=docusaurus_version content=0.79><meta data-rh=true name=docusaurus_tag content=docs-default-0.79><meta data-rh=true name=docsearch:version content=0.79><meta data-rh=true name=docsearch:docusaurus_tag content=docs-default-0.79><meta data-rh=true property=og:title content="Get Started Without a Framework · React Native"><meta data-rh=true name=description content="If you have constraints that are not served well by a Framework, or you prefer to write your own Framework, you can create a React Native app without using a Framework."><meta data-rh=true property=og:description content="If you have constraints that are not served well by a Framework, or you prefer to write your own Framework, you can create a React Native app without using a Framework."><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/getting-started-without-a-framework><link data-rh=true rel=alternate href=https://reactnative.dev/docs/getting-started-without-a-framework hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/getting-started-without-a-framework hreflang=x-default><link data-rh=true rel=preconnect href=https://8TDSE0OHGQ-dsn.algolia.net crossorigin=anonymous><link rel=alternate type=application/rss+xml href=/blog/rss.xml title="React Native RSS Feed"><link rel=alternate type=application/atom+xml href=/blog/atom.xml title="React Native Atom Feed"><link rel=alternate type=application/json href=/blog/feed.json title="React Native JSON Feed"><link rel=preconnect href=https://www.google-analytics.com><script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41298772-2","auto"),ga("send","pageview")</script><script async src=https://www.google-analytics.com/analytics.js></script><link rel=preconnect href=https://www.google-analytics.com><link rel=preconnect href=https://www.googletagmanager.com><script async src="https://www.googletagmanager.com/gtag/js?id=G-58L13S6BDP"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-58L13S6BDP",{})</script><link rel=search type=application/opensearchdescription+xml title="React Native" href=/opensearch.xml><link rel=icon href=/img/pwa/manifest-icon-512.png><link rel=manifest href=/manifest.json><meta name=theme-color content=#20232a><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=#20232a><link rel=apple-touch-icon href=/img/pwa/manifest-icon-512.png><link rel=mask-icon href=/img/pwa/manifest-icon-512.png color=#06bcee><meta name=msapplication-TileImage href=/img/pwa/manifest-icon-512.png><meta name=msapplication-TileColor content=#20232a><script src=https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js defer></script><script src=https://widget.surveymonkey.com/collect/website/js/tRaiETqnLgj758hTBazgd8ryO5qrZo8Exadq9qmt1wtm4_2FdZGEAKHDFEt_2BBlwwM4.js defer></script><script src=https://snack.expo.dev/embed.js defer></script><script src=https://platform.twitter.com/widgets.js async></script><link rel=stylesheet href=/assets/css/styles.883cb042.css><script src=/assets/js/runtime~main.8ac1e6f0.js defer></script><script src=/assets/js/main.341783f5.js defer></script><body class=navigation-with-keyboard><svg xmlns=http://www.w3.org/2000/svg style="display: none;"><defs> 2<symbol id=theme-svg-external-link viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol> 3</defs></svg> 4<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id=__docusaurus><div role=region aria-label="Skip to main content"><a class=skipToContent_oPtH href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><div class="theme-announcement-bar announcementBar_zJRd" style=background-color:#20232a;color:#fff role=banner><div class="content_bSb_ announcementBarContent_t7IR">Join us for React Conf on Oct 7-8. <a target=_blank rel="noopener noreferrer" href=https://conf.react.dev>Learn more</a>.</div></div><nav aria-label=Main class="theme-layout-navbar navbar navbar--fixed-top navbar--dark"><div class=navbar__inner><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/><div class=navbar__logo><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--light_hHel"><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--dark_yETr"></div><b class="navbar__title text--truncate">React Native</b></a><div class="navbar__item dropdown dropdown--hoverable"><a class=navbar__link aria-haspopup=true aria-expanded=false role=button href=/docs/getting-started-without-a-framework>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/getting-started-without-a-framework>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/getting-started-without-a-framework>0.79</a><li><a class=dropdown__link href=/docs/0.78/getting-started-without-a-framework>0.78</a><li><a class=dropdown__link href=/docs/0.77/getting-started-without-a-framework>0.77</a><li><a class=dropdown__link href=/docs/0.76/getting-started-without-a-framework>0.76</a><li><a class=dropdown__link href=/docs/0.75/getting-started-without-a-framework>0.75</a><li><a class=dropdown__link href=/docs/0.74/getting-started-without-a-framework>0.74</a><li><a class=dropdown__link href=/docs/0.73/getting-started>0.73</a><li><a class=dropdown__link href=/docs/0.72/getting-started>0.72</a><li><a class=dropdown__link href=/docs/0.71/getting-started>0.71</a><li><a class=dropdown__link href=/docs/0.70/getting-started>0.70</a><li><a class=dropdown__link href=/versions>All versions</a></ul></div></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href=# aria-haspopup=true aria-expanded=false role=button class=navbar__link>Development</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/getting-started>Guides</a><li><a class=dropdown__link href=/docs/components-and-apis>Components</a><li><a class=dropdown__link href=/docs/accessibilityinfo>APIs</a><li><a class=dropdown__link href=/architecture/overview>Architecture</a></ul></div><a class="navbar__item navbar__link" href=/contributing/overview>Contributing</a><a class="navbar__item navbar__link" href=/community/overview>Community</a><a class="navbar__item navbar__link" href=/showcase>Showcase</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="toggle_ki11 colorModeToggle_Hewu"><button class="clean-btn toggleButton_MMFG toggleButtonDisabled_Uw7m darkNavbarColorModeToggle_m8pZ" type=button disabled title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ lightToggleIcon_lgto"><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ darkToggleIcon_U96C"><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ systemToggleIcon_E5c0"><path fill=currentColor d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"/></svg></button></div><div class=navbarSearchContainer_bzqh><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 20 20" aria-hidden=true><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 /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="theme-layout-main main-wrapper mainWrapper_MB5r"><div class=docsWrapper__sE8><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_iEvu" type=button></button><div class=docRoot_DfVB><main class="docMainContainer_a9sJ docMainContainerEnhanced_grEJ"><div class="container padding-top--md padding-bottom--lg"><div class=row><div class=col><div class=docItemContainer_tjFy><article><div class="theme-doc-markdown markdown"><header><h1>Get Started Without a Framework</h1></header><div class=container_cnSc><strong>Platform support</strong><div class=badgeContainer_Eo6G><div class=container_QTyX><svg width=18 height=19 viewBox="0 0 18 19" fill=none xmlns=http://www.w3.org/2000/svg><g clip-path=url(#clip0_367_366)><path d="M12.7971 11.8045C12.4182 11.8045 12.11 11.4951 12.11 11.115C12.11 10.7349 12.4182 10.4258 12.7971 10.4258C13.1759 10.4258 13.4841 10.7349 13.4841 11.115C13.4841 11.4951 13.1759 11.8045 12.7971 11.8045ZM5.2029 11.8045C4.82403 11.8045 4.51587 11.4951 4.51587 11.115C4.51587 10.7349 4.82403 10.4258 5.2029 10.4258C5.58176 10.4258 5.88993 10.7349 5.88993 11.115C5.88993 11.4951 5.58176 11.8045 5.2029 11.8045ZM13.0435 7.65252L14.4167 5.26672C14.4954 5.12959 14.4485 4.95443 14.3121 4.87524C14.1756 4.79627 14.0008 4.84325 13.9218 4.98016L12.5315 7.39616C11.4683 6.90938 10.2742 6.63825 8.99998 6.63825C7.72581 6.63825 6.5317 6.90938 5.46848 7.39616L4.07814 4.98016C3.9992 4.84325 3.82437 4.79627 3.6879 4.87524C3.55143 4.95443 3.50438 5.12959 3.58332 5.26672L4.95649 7.65252C2.59859 8.93905 0.985921 11.3338 0.75 14.163H17.25C17.0138 11.3338 15.4012 8.93905 13.0435 7.65252Z" fill=currentColor /></g><defs><clipPath id=clip0_367_366><rect width=18 height=18 fill=white transform="translate(0 0.5)"/></clipPath></defs></svg>Android</div><div class=container_QTyX><svg width=18 height=19 viewBox="0 0 18 19" fill=none xmlns=http://www.w3.org/2000/svg><path d="M15.3355 13.5153C15.098 14.0639 14.817 14.5689 14.4913 15.0331C14.0474 15.666 13.6839 16.1041 13.4038 16.3474C12.9696 16.7467 12.5044 16.9512 12.0062 16.9628C11.6486 16.9628 11.2173 16.8611 10.7152 16.6546C10.2115 16.4491 9.74862 16.3474 9.32537 16.3474C8.88146 16.3474 8.40538 16.4491 7.89615 16.6546C7.38615 16.8611 6.9753 16.9686 6.66117 16.9793C6.18344 16.9997 5.70727 16.7893 5.23196 16.3474C4.9286 16.0828 4.54915 15.6292 4.09458 14.9866C3.60687 14.3004 3.2059 13.5046 2.89178 12.5975C2.55536 11.6176 2.38672 10.6687 2.38672 9.75008C2.38672 8.6978 2.6141 7.79022 3.06953 7.02968C3.42747 6.41878 3.90365 5.93688 4.49962 5.58312C5.09559 5.22935 5.73954 5.04907 6.43302 5.03754C6.81247 5.03754 7.31007 5.15491 7.92843 5.38559C8.54505 5.61704 8.94097 5.73441 9.11456 5.73441C9.24434 5.73441 9.68417 5.59717 10.4298 5.32356C11.1349 5.06982 11.73 4.96475 12.2175 5.00614C13.5386 5.11275 14.531 5.63351 15.1911 6.57172C14.0096 7.28759 13.4252 8.29024 13.4368 9.5765C13.4475 10.5784 13.8109 11.4121 14.5252 12.0741C14.849 12.3813 15.2105 12.6188 15.6127 12.7874C15.5255 13.0404 15.4334 13.2827 15.3355 13.5153ZM12.3057 1.59293C12.3057 2.3782 12.0188 3.11141 11.447 3.79006C10.7569 4.59684 9.92221 5.06303 9.01706 4.98947C9.00552 4.89526 8.99884 4.79611 8.99884 4.69192C8.99884 3.93806 9.32701 3.13128 9.90981 2.47163C10.2008 2.13763 10.5708 1.85992 11.0196 1.63839C11.4673 1.42016 11.8909 1.29947 12.2892 1.27881C12.3009 1.38378 12.3057 1.48877 12.3057 1.59292V1.59293Z" fill=currentColor /></svg>iOS</div><div class=container_QTyX><svg width=18 height=19 viewBox="0 0 18 19" fill=none xmlns=http://www.w3.org/2000/svg><path d="M15.3355 13.5153C15.098 14.0639 14.817 14.5689 14.4913 15.0331C14.0474 15.666 13.6839 16.1041 13.4038 16.3474C12.9696 16.7467 12.5044 16.9512 12.0062 16.9628C11.6486 16.9628 11.2173 16.8611 10.7152 16.6546C10.2115 16.4491 9.74862 16.3474 9.32537 16.3474C8.88146 16.3474 8.40538 16.4491 7.89615 16.6546C7.38615 16.8611 6.9753 16.9686 6.66117 16.9793C6.18344 16.9997 5.70727 16.7893 5.23196 16.3474C4.9286 16.0828 4.54915 15.6292 4.09458 14.9866C3.60687 14.3004 3.2059 13.5046 2.89178 12.5975C2.55536 11.6176 2.38672 10.6687 2.38672 9.75008C2.38672 8.6978 2.6141 7.79022 3.06953 7.02968C3.42747 6.41878 3.90365 5.93688 4.49962 5.58312C5.09559 5.22935 5.73954 5.04907 6.43302 5.03754C6.81247 5.03754 7.31007 5.15491 7.92843 5.38559C8.54505 5.61704 8.94097 5.73441 9.11456 5.73441C9.24434 5.73441 9.68417 5.59717 10.4298 5.32356C11.1349 5.06982 11.73 4.96475 12.2175 5.00614C13.5386 5.11275 14.531 5.63351 15.1911 6.57172C14.0096 7.28759 13.4252 8.29024 13.4368 9.5765C13.4475 10.5784 13.8109 11.4121 14.5252 12.0741C14.849 12.3813 15.2105 12.6188 15.6127 12.7874C15.5255 13.0404 15.4334 13.2827 15.3355 13.5153ZM12.3057 1.59293C12.3057 2.3782 12.0188 3.11141 11.447 3.79006C10.7569 4.59684 9.92221 5.06303 9.01706 4.98947C9.00552 4.89526 8.99884 4.79611 8.99884 4.69192C8.99884 3.93806 9.32701 3.13128 9.90981 2.47163C10.2008 2.13763 10.5708 1.85992 11.0196 1.63839C11.4673 1.42016 11.8909 1.29947 12.2892 1.27881C12.3009 1.38378 12.3057 1.48877 12.3057 1.59292V1.59293Z" fill=currentColor /></svg>macOS</div><div class=container_QTyX><svg width=18 height=19 viewBox="0 0 18 19" fill=none xmlns=http://www.w3.org/2000/svg><g clip-path=url(#clip0_367_389)><path d="M12.75 2.75L9 5.75L5.25 2.75M5.1 16.25H12.9C14.1601 16.25 14.7902 16.25 15.2715 16.0048C15.6948 15.789 16.039 15.4448 16.2548 15.0215C16.5 14.5402 16.5 13.9101 16.5 12.65V9.35C16.5 8.08988 16.5 7.45982 16.2548 6.97852C16.039 6.55516 15.6948 6.21095 15.2715 5.99524C14.7902 5.75 14.1601 5.75 12.9 5.75H5.1C3.83988 5.75 3.20982 5.75 2.72852 5.99524C2.30516 6.21095 1.96095 6.55516 1.74524 6.97852C1.5 7.45982 1.5 8.08988 1.5 9.35V12.65C1.5 13.9101 1.5 14.5402 1.74524 15.0215C1.96095 15.4448 2.30516 15.789 2.72852 16.0048C3.20982 16.25 3.83988 16.25 5.1 16.25Z" stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round /></g><defs><clipPath id=clip0_367_389><rect width=18 height=18 fill=white transform="translate(0 0.5)"/></clipPath></defs></svg>TV</div><div class=container_QTyX><svg width=18 height=19 viewBox="0 0 18 19" fill=none xmlns=http://www.w3.org/2000/svg><path d="M15.3355 13.5153C15.098 14.0639 14.817 14.5689 14.4913 15.0331C14.0474 15.666 13.6839 16.1041 13.4038 16.3474C12.9696 16.7467 12.5044 16.9512 12.0062 16.9628C11.6486 16.9628 11.2173 16.8611 10.7152 16.6546C10.2115 16.4491 9.74862 16.3474 9.32537 16.3474C8.88146 16.3474 8.40538 16.4491 7.89615 16.6546C7.38615 16.8611 6.9753 16.9686 6.66117 16.9793C6.18344 16.9997 5.70727 16.7893 5.23196 16.3474C4.9286 16.0828 4.54915 15.6292 4.09458 14.9866C3.60687 14.3004 3.2059 13.5046 2.89178 12.5975C2.55536 11.6176 2.38672 10.6687 2.38672 9.75008C2.38672 8.6978 2.6141 7.79022 3.06953 7.02968C3.42747 6.41878 3.90365 5.93688 4.49962 5.58312C5.09559 5.22935 5.73954 5.04907 6.43302 5.03754C6.81247 5.03754 7.31007 5.15491 7.92843 5.38559C8.54505 5.61704 8.94097 5.73441 9.11456 5.73441C9.24434 5.73441 9.68417 5.59717 10.4298 5.32356C11.1349 5.06982 11.73 4.96475 12.2175 5.00614C13.5386 5.11275 14.531 5.63351 15.1911 6.57172C14.0096 7.28759 13.4252 8.29024 13.4368 9.5765C13.4475 10.5784 13.8109 11.4121 14.5252 12.0741C14.849 12.3813 15.2105 12.6188 15.6127 12.7874C15.5255 13.0404 15.4334 13.2827 15.3355 13.5153ZM12.3057 1.59293C12.3057 2.3782 12.0188 3.11141 11.447 3.79006C10.7569 4.59684 9.92221 5.06303 9.01706 4.98947C9.00552 4.89526 8.99884 4.79611 8.99884 4.69192C8.99884 3.93806 9.32701 3.13128 9.90981 2.47163C10.2008 2.13763 10.5708 1.85992 11.0196 1.63839C11.4673 1.42016 11.8909 1.29947 12.2892 1.27881C12.3009 1.38378 12.3057 1.48877 12.3057 1.59292V1.59293Z" fill=currentColor /></svg>watchOS</div><div class=container_QTyX><svg width=18 height=19 viewBox="0 0 18 19" fill=none xmlns=http://www.w3.org/2000/svg><g clip-path=url(#clip0_367_381)><path d="M9 2C10.876 4.05376 11.9421 6.71903 12 9.5C11.9421 12.281 10.876 14.9462 9 17M9 2C7.12404 4.05376 6.05794 6.71903 6 9.5C6.05794 12.281 7.12404 14.9462 9 17M9 2C4.85786 2 1.5 5.35786 1.5 9.5C1.5 13.6421 4.85786 17 9 17M9 2C13.1421 2 16.5 5.35786 16.5 9.5C16.5 13.6421 13.1421 17 9 17M1.87501 7.25H16.125M1.875 11.75H16.125" stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round /></g><defs><clipPath id=clip0_367_381><rect width=18 height=18 fill=white transform="translate(0 0.5)"/></clipPath></defs></svg>Web</div><div class=container_QTyX><svg width=18 height=18 xmlns=http://www.w3.org/2000/svg viewBox="0 0 448 512"><path d="M0 32h214.6v214.6H0V32zm233.4 0H448v214.6H233.4V32zM0 265.4h214.6V480H0V265.4zm233.4 0H448V480H233.4V265.4z" fill=currentColor /></svg>Windows</div><div class=container_QTyX><svg width=18 height=19 viewBox="0 0 66 41" fill=none xmlns=http://www.w3.org/2000/svg><path d="M55.7833 4.43334C48.5833 0.833335 37.2667 0.833336 33 0.833336C28.7333 0.833336 18.2167 0.833335 11.0167 4.06667C10.3667 3 9.01666 2.53334 7.84999 3.06667C6.44999 3.7 5.44999 4.78334 5.24999 4.98334C4.36666 5.96667 4.43332 7.41667 5.33332 8.35C0.949991 13.55 -0.866675 21.5 0.566658 27.25C2.63332 35.4833 8.81666 40.8167 16.3333 40.8167C21.9 40.8167 24.65 38.7333 26.85 37.0667C27.65 36.45 28.35 35.9333 29.1167 35.55C31.7333 34.25 34.2667 34.25 36.8833 35.55C37.65 35.9333 38.35 36.45 39.15 37.0667C41.3667 38.7333 44.1 40.8167 49.6667 40.8167C57.1833 40.8167 63.3667 35.5 65.4333 27.25C67.3167 19.6833 63.6 8.31667 55.8 4.4L55.7833 4.43334ZM60.5667 26.0667C59.0833 32 54.8 35.8333 49.6667 35.8333C45.7833 35.8333 44.1 34.5667 42.1667 33.1C41.25 32.4 40.3 31.6833 39.1167 31.1C37.0833 30.0833 35.05 29.5833 33 29.5833C30.95 29.5833 28.9167 30.0833 26.8833 31.1C25.7 31.6833 24.75 32.4 23.8333 33.1C21.8833 34.5667 20.2167 35.8333 16.3333 35.8333C11.1833 35.8333 6.91666 32 5.43332 26.0667C4.06666 20.5667 6.88333 11.7 12.4667 8.91667C18.6 5.85 29.0667 5.85 33.0167 5.85C36.9667 5.85 47.4333 5.85 53.5667 8.91667C59.1333 11.7 61.9667 20.5833 60.6 26.0667H60.5667Z" fill=currentColor /></svg>visionOS</div></div></div> 5<p>If you have constraints that are not served well by a <a href=/architecture/glossary#react-native-framework>Framework</a>, or you prefer to write your own Framework, you can create a React Native app without using a Framework.</p> 6<p>To do so, you'll first need to <a href=/docs/set-up-your-environment>set up your environment</a>. Once you're set up, continue with the steps below to create an application and start developing.</p> 7<h3 class="anchor anchorWithStickyNavbar_JmGV" id=step-1-creating-a-new-application>Step 1: Creating a new application<a href=#step-1-creating-a-new-application class=hash-link aria-label="Direct link to Step 1: Creating a new application" title="Direct link to Step 1: Creating a new application">​</a></h3> 8<blockquote> 9<p>If you previously installed a global <code>react-native-cli</code> package, please remove it as it may cause unexpected issues:</p> 10<div class="language-shell codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>shell</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-shell codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>npm</span><span class="token plain"> uninstall </span><span class="token parameter variable" style=color:#cb4b16>-g</span><span class="token plain"> react-native-cli @react-native-community/cli</span><br></span></code></pre></div></div> 11</blockquote> 12<p>You can use <a href=https://github.com/react-native-community/cli target=_blank rel="noopener noreferrer">React Native Community CLI</a> to generate a new project. Let's create a new React Native project called "AwesomeProject":</p> 13<div class="language-shell codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>shell</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-shell codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">npx @react-native-community/cli@latest init AwesomeProject</span><br></span></code></pre></div></div> 14<p>This is not necessary if you are integrating React Native into an existing application, or if you've installed <a href=https://docs.expo.dev/bare/installing-expo-modules/ target=_blank rel="noopener noreferrer">Expo</a> in your project, or if you're adding Android support to an existing React Native project (see <a href=/docs/integration-with-existing-apps>Integration with Existing Apps</a>). You can also use a third-party CLI to set up your React Native app, such as <a href=https://github.com/infinitered/ignite target=_blank rel="noopener noreferrer">Ignite CLI</a>.</p> 15<div class="theme-admonition theme-admonition-info admonition_WCGJ alert alert--info"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg></span>info</div><div class=admonitionContent_pbrs><p>If you are having trouble with iOS, try to reinstall the dependencies by running:<ol> 16<li><code>cd ios</code> to navigate to the <code>ios</code> folder.</li> 17<li><code>bundle install</code> to install <a href=https://bundler.io/ target=_blank rel="noopener noreferrer">Bundler</a></li> 18<li><code>bundle exec pod install</code> to install the iOS dependencies managed by CocoaPods.</li> 19</ol></div></div> 20<h4 class="anchor anchorWithStickyNavbar_JmGV" id=optional-using-a-specific-version-or-template>[Optional] Using a specific version or template<a href=#optional-using-a-specific-version-or-template class=hash-link aria-label="Direct link to [Optional] Using a specific version or template" title="Direct link to [Optional] Using a specific version or template">​</a></h4> 21<p>If you want to start a new project with a specific React Native version, you can use the <code>--version</code> argument:</p> 22<div class="language-shell codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>shell</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-shell codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">npx @react-native-community/cli@X.XX.X init AwesomeProject </span><span class="token parameter variable" style=color:#cb4b16>--version</span><span class="token plain"> X.XX.X</span><br></span></code></pre></div></div> 23<p>You can also start a project with a custom React Native template with the <code>--template</code> argument, read more <a href=https://github.com/react-native-community/cli/blob/main/docs/init.md#initializing-project-with-custom-template target=_blank rel="noopener noreferrer">here</a>.</p> 24<h3 class="anchor anchorWithStickyNavbar_JmGV" id=step-2-start-metro>Step 2: Start Metro<a href=#step-2-start-metro class=hash-link aria-label="Direct link to Step 2: Start Metro" title="Direct link to Step 2: Start Metro">​</a></h3> 25<p><a href=https://metrobundler.dev/ target=_blank rel="noopener noreferrer"><strong>Metro</strong></a> is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder:</p> 26<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">npm<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">Yarn</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb><div class="language-shell codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>shell</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-shell codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>npm</span><span class="token plain"> start</span><br></span></code></pre></div></div></div><div role=tabpanel class=tabItem_wHwb hidden><div class="language-shell codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>shell</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-shell codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>yarn</span><span class="token plain"> start</span><br></span></code></pre></div></div></div></div></div> 27<div class="theme-admonition theme-admonition-note admonition_WCGJ alert alert--secondary"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"/></svg></span>note</div><div class=admonitionContent_pbrs><p>If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses <a href=https://babel.dev/ target=_blank rel="noopener noreferrer">Babel</a> to transform syntax such as JSX into executable JavaScript.</div></div> 28<h3 class="anchor anchorWithStickyNavbar_JmGV" id=step-3-start-your-application>Step 3: Start your application<a href=#step-3-start-your-application class=hash-link aria-label="Direct link to Step 3: Start your application" title="Direct link to Step 3: Start your application">​</a></h3> 29<p>Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:</p> 30<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">npm<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">Yarn</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb><div class="language-shell codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>shell</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-shell codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>npm</span><span class="token plain"> run android</span><br></span></code></pre></div></div></div><div role=tabpanel class=tabItem_wHwb hidden><div class="language-shell codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>shell</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-shell codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>yarn</span><span class="token plain"> android</span><br></span></code></pre></div></div></div></div></div> 31<p>If everything is set up correctly, you should see your new app running in your Android emulator shortly.</p> 32<p>This is one way to run your app - you can also run it directly from within Android Studio.</p> 33<blockquote> 34<p>If you can't get this to work, see the <a href=/docs/troubleshooting>Troubleshooting</a> page.</p> 35</blockquote> 36<h3 class="anchor anchorWithStickyNavbar_JmGV" id=step-4-modifying-your-app>Step 4: Modifying your app<a href=#step-4-modifying-your-app class=hash-link aria-label="Direct link to Step 4: Modifying your app" title="Direct link to Step 4: Modifying your app">​</a></h3> 37<p>Now that you have successfully run the app, let's modify it.</p> 38<ul> 39<li>Open <code>App.tsx</code> in your text editor of choice and edit some lines.</li> 40<li>Press the <kbd>R</kbd> key twice or select <code>Reload</code> from the Dev Menu (<kbd>Ctrl</kbd> + <kbd>M</kbd>) to see your changes!</li> 41</ul> 42<h3 class="anchor anchorWithStickyNavbar_JmGV" id=thats-it>That's it!<a href=#thats-it class=hash-link aria-label="Direct link to That's it!" title="Direct link to That's it!">​</a></h3> 43<p>Congratulations! You've successfully run and modified your first barebone React Native app.</p> 44<center><img src=/docs/assets/GettingStartedCongratulations.png width=150></center> 45<h3 class="anchor anchorWithStickyNavbar_JmGV" id=now-what>Now what?<a href=#now-what class=hash-link aria-label="Direct link to Now what?" title="Direct link to Now what?">​</a></h3> 46<ul> 47<li>If you want to add this new React Native code to an existing application, check out the <a href=/docs/integration-with-existing-apps>Integration guide</a>.</li> 48<li>If you're curious to learn more about React Native, check out the <a href=/docs/getting-started>Introduction to React Native</a>.</li> 49</ul></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class=editButtons_t0bR><a href=https://github.com/facebook/react-native-website/edit/main/docs/get-started-without-a-framework.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit page for next release</a><a href=https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.79/get-started-without-a-framework.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit page for current release</a></div><div class=lastUpdated_VsjB><span class=theme-last-updated>Last updated<!-- --> on <b><time datetime=2025-04-14T14:14:17.000Z itemprop=dateModified>Apr 14, 2025</time></b></span></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"></nav></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Develop</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/getting-started>Guides</a><li class=footer__item><a class=footer__link-item href=/docs/components-and-apis>Components</a><li class=footer__item><a class=footer__link-item href=/docs/accessibilityinfo>APIs</a><li class=footer__item><a class=footer__link-item href=/architecture/overview>Architecture</a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Participate</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/showcase>Showcase</a><li class=footer__item><a class=footer__link-item href=/contributing/overview>Contributing</a><li class=footer__item><a class=footer__link-item href=/community/overview>Community</a><li class=footer__item><a href=https://reactnative.directory/ target=_blank rel="noopener noreferrer" class=footer__link-item>Directory<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://stackoverflow.com/questions/tagged/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>Stack Overflow<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Find us</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/blog>Blog</a><li class=footer__item><a href=https://x.com/reactnative target=_blank rel="noopener noreferrer" class=footer__link-item>X<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://bsky.app/profile/reactnative.dev target=_blank rel="noopener noreferrer" class=footer__link-item>Bluesky<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://github.com/facebook/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Explore More</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://react.dev/ target=_blank rel="noopener noreferrer" class=footer__link-item>ReactJS<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/privacy/ target=_blank rel="noopener noreferrer" class=footer__link-item>Privacy Policy<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/terms/ target=_blank rel="noopener noreferrer" class=footer__link-item>Terms of Service<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div></div><div class="footer__bottom text--center"><div class=margin-bottom--sm><a href=https://opensource.fb.com/ rel="noopener noreferrer" class=footerLogoLink_tutC><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--light_hHel"><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--dark_yETr"></a></div><div class=footer__copyright>Copyright © 2025 Meta Platforms, Inc.</div></div></div></footer></div>