{"id":25518361,"date":"2022-03-31T12:00:36","date_gmt":"2022-03-31T06:30:36","guid":{"rendered":"https:\/\/entri.app\/blog\/?p=25518361"},"modified":"2022-03-31T18:56:23","modified_gmt":"2022-03-31T13:26:23","slug":"react-native-core-components-and-examples","status":"publish","type":"post","link":"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/","title":{"rendered":"React Native Core Components and Examples"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_79_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69e840967f3fd\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69e840967f3fd\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/#What_is_React_Native\" >What is React Native?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/#React_vs_React_Native\" >React vs React Native<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/#The_Working_of_React_Native\" >The Working of React Native<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/#Benefits_of_React_Native\" >Benefits of React Native<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/#React_Native_Core_Components\" >React Native Core Components<\/a><\/li><\/ul><\/nav><\/div>\n<p>React Native is an open-source framework for constructing android and iOS apps using react-native. You can use JavaScript to access your platform\u2019s API and have used behaviors of UI using react components. In this article, I have explained about core components of react-native and examples that understand quickly. Before we enter into the react-native core components, we should know something detailed about what is meant by react-native and their uses. Here, we firstly going to discuss this particular topic. Let&#8217;s keep reading to know more.<\/p>\n<p><a href=\"https:\/\/forms.gle\/mfUsQCrATdxEgzK57\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-25515918 size-full\" src=\"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/03\/Android-Development-Square-3.png\" alt=\"\" width=\"345\" height=\"345\" srcset=\"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/03\/Android-Development-Square-3.png 345w, https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/03\/Android-Development-Square-3-300x300.png 300w, https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/03\/Android-Development-Square-3-150x150.png 150w, https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/03\/Android-Development-Square-3-24x24.png 24w, https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/03\/Android-Development-Square-3-48x48.png 48w, https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/03\/Android-Development-Square-3-96x96.png 96w, https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/03\/Android-Development-Square-3-75x75.png 75w\" sizes=\"auto, (max-width: 345px) 100vw, 345px\" \/><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"What_is_React_Native\"><\/span><strong><span data-preserver-spaces=\"true\">What is React Native?<\/span><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span data-preserver-spaces=\"true\">React Native is an open-source JavaScript framework, developed for constructing apps on multiple platforms like iOS, Android, and also web applications,\u00a0<strong>utilizing the very same code base<\/strong>. It is based on React, and it obtains all its glory in mobile app development.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Both frameworks: ReactJS (web) and React Native was carried live by Facebook. React Native was a Hackathon project seeking at solving the company\u2019s biggest pain point &#8211; holding two code bases for their app. The problem with holding two code bases for such a big app? Work duplication and, at times, solving the same problem in two various ways. React Native is a clear answer to these problems.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">React Native uses JavaScript to collect the app\u2019s user interface but uses native-OS views. For more complex features, it permits code execution in OS-native languages (Swift and Objective-C for iOS, and Java and Kotlin for Android).<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"React_vs_React_Native\"><\/span><strong><span data-preserver-spaces=\"true\">React vs React Native<\/span><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span data-preserver-spaces=\"true\">React is an open-source JavaScript library used on the front to create quick and reliable User Interfaces for web applications. It\u2019s very much based on reusable elements.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">React was also obtained to life by Facebook in 2011 as a direct answer to their scalability issues. It was a time when Facebook ads were increasing immensely, and the constant updates to their UI slowed down the platform immensely. React solved this problem, and in 2012, when Instagram was developed by Facebook, it was also used on the app\u2019s timeline.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\"><a href=\"https:\/\/webapp.entri.app\/home\/?track=103\"><strong>React Native<\/strong><\/a>, powered by React and created by Facebook, was a natural result of React. It is a mobile framework permitting the building of near-native apps using JavaScript.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Both frameworks are closely connected, but they serve a completely different purposes. React is employed for web development, and React Native (which does not use HTML) is used for mobile development.<\/span><\/p>\n<p style=\"text-align: center\"><a href=\"https:\/\/forms.gle\/mfUsQCrATdxEgzK57\" target=\"_blank\" rel=\"noopener\"><strong>Find More Detailed Notes on Java Here!<\/strong><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"The_Working_of_React_Native\"><\/span><strong><span data-preserver-spaces=\"true\">The Working of React Native<\/span><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>As mentioned earlier<span data-preserver-spaces=\"true\">\u00a0React Native employs JavaScript to create the app&#8217;s interface. Unlike its competitors (e.g. Ionic),\u00a0<strong>React Native does not depend on web views<\/strong>, but on the actual real materials supplied by native platforms. It has built-in access to the native views and components and can operate native-written code and allow the API access to OS-specific features inside the app.\u00a0<\/span><\/p>\n<p><strong><span data-preserver-spaces=\"true\">React Native employs the concept of \u201cbridge\u201d<\/span><\/strong><span data-preserver-spaces=\"true\">, which permits asynchronous communication between the JavaScript and Native elements &#8211; the bridge concept fibs at the very heart of React Native\u2019s flexibility. Native and JavaScript components are completely distinct technologies, but they can communicate.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">This type of architecture shows\u00a0<strong>the benefit of using a lot of OS-native features<\/strong>, but also comes with significant challenges; e.g. constant use of bridges inside the app may seriously slow down its performance. If you\u2019re creating an app that involves many events, a lot of data, etc. React Native might not be the best option.\u00a0<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Benefits_of_React_Native\"><\/span><strong>Benefits of React Native<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The fact that React Native effects using its host platform\u2019s standard rendering APIs allows it to stand out from most existing forms of cross-platform application development, like Cordova or Ionic. Existing forms of writing mobile applications using combinations of JavaScript, HTML, and CSS typically render using web views. While this process can work, it also comes with drawbacks, especially around performance. Also, they do not usually have access to the host platform\u2019s set of native UI elements. When these frameworks do attempt to imitate native UI elements, the results usually \u201cfeel\u201d just a little off; reverse-engineering all the fine details of things like animations takes an immense amount of effort, and they can fast become out of date.<\/p>\n<p>Indifference, React Native solves your markup to real, native UI elements, leveraging existing means of rendering views on whatever platform you are working with. Besides, React works separately from the main UI thread, so your application can sustain high performance without sacrificing capability. The update cycle in React Native is exact as in React: when props or states change, React Native re-renders the views. The main distinction between React Native and React in the browser is that <a href=\"https:\/\/webapp.entri.app\/home\/?track=103\"><strong>React Native<\/strong> <\/a>does this by leveraging the UI libraries of its host platform, rather than employing HTML and CSS markup.<\/p>\n<p>For developers conditioned to working on the Web with React, this means you can write mobile apps with the performance and look and feel of a native application while using ordinary tools. React Native also means an advancement over normal mobile development in two other areas: the developer experience and cross-platform development potential.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"React_Native_Core_Components\"><\/span><strong>React Native Core Components<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>React Native reduces the number of built-in core components that makes it easier for anyone who wants to dive into React Native App development. Not only this, you can get various other components for performing specific tasks through npm. We have ordered these components according to their roles in the application. You can get begun by using these components after you have finished your installation. Let\u2019s get a brief idea of each component and learn how to use these components in your native application.<\/p>\n<p style=\"text-align: center\"><a href=\"https:\/\/forms.gle\/mfUsQCrATdxEgzK57\" target=\"_blank\" rel=\"noopener\"><strong>Click Here to Join the Best Coding Courses!<\/strong><\/a><\/p>\n<h3><strong>Basic Components<\/strong><\/h3>\n<p>You need to understand clearly these basic components which you would use frequently in your app if you are new to react native application development.<\/p>\n<h4><strong>View<\/strong><\/h4>\n<p>The view is the most essential component that supports layout with flexbox, style, some touch handling, and accessibility controls. View maps the native equal views whatever device you are running the application. Views can be used in nested form like we perform nesting for div in the web.<\/p>\n<h4><strong>Text<\/strong><\/h4>\n<p>Text is another essential component to display text in your native application. Text supports style, nesting, and touch handling. Also, keep in mind that you cannot write any text inside View without using the Text component.<\/p>\n<h4><strong>Button And Alert<\/strong><\/h4>\n<p>The &lt;Button \/&gt; component is the first component that had significant differences from its sibling (the HTML &lt;button&gt; element). The React Native &lt;Button \/&gt; has an onPress() prop, as opposed to anything click-related. It also includes a title prop for the text which goes inside it. Finally, it doesn\u2019t hold a style prop, but only a color prop.<\/p>\n<p>That last point is a pretty big distinction. Now you can (and would) cover it in a View and style it with that wrapper. That is an ordinary way to deal with some limitations on React Native components and you will likely find yourself using View to wrap other components all the time.<\/p>\n<p>What is also interesting about this basic Button component is that on the iOS platform, it only displays up as the text in the title &#8211; with no background. Therefore, the color prop will only modify the text color, though on Android it will alter the background color of the button<\/p>\n<h4><strong>Image and ImageBackground<\/strong><\/h4>\n<p><span data-preserver-spaces=\"true\">The &lt;Image \/&gt; component is pretty identical to a HTML img tag. However, there are a few distinctions, such as modifying the src prop to the source. Also, the source itself works differently: for local images, you import them with require, like this &lt;Image source={require(&#8216;path\/to\/local\/image)} \/&gt;.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Also, in the source prop, you can operate the URI like this: &lt;Image source={{uri: &#8216;https:\/\/imagesite.com\/path\/to\/image&#8217;}} style={{height: 100, width: 100, resize mode: contain}}. Notice the uri is an object, so it requires another set of curly braces, just like inline styles. There are a bunch of other props to check out here, but a common one to use is resize mode. This defines how to resize your image and fit your image within a parent View component.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">The ImageBackground component is equal to the &lt;Image \/&gt; component as it accepts the same props, but the main distinction here is that it can have child elements. The &lt;Image \/&gt; component is self-closing and the thing about ImageBackground is, is that it\u2019s pretty basic and a better solution to set a background image might be to either build your component or simply set an Image as complete with lower opacity and behind everything.<\/span><\/p>\n<h4><strong>The Touchables<\/strong><\/h4>\n<p><span data-preserver-spaces=\"true\">One thing you\u2019ll witness in React Native is that many of the components we have covered do not have all the props you would typically implement in a web app. The &lt;Image \/&gt; component does not include an onPress prop and the &lt;Button \/&gt; component doesn\u2019t hold a style prop. Any Touchable component can aid here.<\/span><\/p>\n<p style=\"text-align: center\"><a href=\"https:\/\/webapp.entri.app\/home\/?track=103\"><strong>To Know More About React Native, Download the ENTRI Learning App!<\/strong><\/a><\/p>\n<h4><strong>ScrollView and SafeAreaView\u00a0<\/strong><\/h4>\n<p><span data-preserver-spaces=\"true\">So far we\u2019ve examined all the basic building blocks of a React Native app. However, there are plenty more, and one thing you will fast find is that a phone screen won\u2019t automatically scroll if the content height or width overreaches the screen size. This may surprise you, when you have everything covered in a View component, the overflow will be hidden.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">That\u2019s where the simple performance of ScrollView comes in. The ScrollView component is the essential component to allow scrolling. However, FlatList also allows scrolling, but it has a much greater capacity than ScrollView.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Now, the primary setup of ScrollView is giving boundaries to the scrollable view, which would most likely be the screen height and width. Like an image, you can cover ScrollView to give it these boundaries. Generally, you can use a normal View component for this, but if you have an iPhone X, you may discover that your View goes up behind the rounded corners or sensor cluster. The SafeAreaView will take care of this, providing sufficient padding so the whole screen will be visible. Either way, to stretch the whole screen, you can simply set the style of the parent view to flex: 1.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">This setup with ScrollView will perform when the height of all your elements is specified locally &#8211; as in, the height of your page will always be set the same. If there is data coming in that involves the dimensions of the content, it may be challenging to determine the dimensions of the ScrollView. There are ways to recompense for that, but an even bigger limitation to ScrollView is that it will render everything all at once. Suppose your Facebook account renders every story at once &#8211; it would never load!<\/span><\/p>\n<h4><strong>FlatList<\/strong><\/h4>\n<p><span data-preserver-spaces=\"true\">FlatList is equal to ScrollView, but it uses lazy-loading so that only the items which are presently on the screen will render. Of course, FlatList needs data to be passed to it. More precisely, it needs an array of data to be passed. Then, FlatList loops over that array and renders each one when on screen. If an item goes off the screen, when the user scrolls away, FlatList leaves that item and recreates it the next time it appears on the screen (state is lost). ScrollView, on the other hand, doesn\u2019t leave and reload but renders them all at once at the origin.<\/span><\/p>\n<p style=\"text-align: center\"><a href=\"https:\/\/entri.sng.link\/Bcofz\/wi9fw\/gqyf\" target=\"_blank\" rel=\"noopener\"><strong>Want to Know More About React Native Core Components? Download the ENTRI Learning App!<\/strong><\/a><\/p>\n<p><span data-preserver-spaces=\"true\">React Native is an exciting framework that allows web developers to create robust mobile applications using their existing JavaScript knowledge. It shows faster mobile development and more efficient code sharing across iOS, Android, and the Web, without renouncing the end user\u2019s experience or application quality. The tradeoff is that it\u2019s new, and still a work in improvement. If your team can tolerate the uncertainty that comes with working with new technology, and wants to design mobile applications for more than just one platform, you should be looking at React Native. These are all about React Native and its core components. You can access more detailed notes regarding Java, Android, Web development, etc through our <a href=\"https:\/\/entri.sng.link\/Bcofz\/wi9fw\/gqyf\" target=\"_blank\" rel=\"noopener\"><strong>ENTRI Learning App<\/strong><\/a>. Keep visiting our page to learn more anytime.\u00a0<\/span><\/p>\n<p><a href=\"https:\/\/forms.gle\/mfUsQCrATdxEgzK57\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-25515914 size-full\" src=\"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/03\/Android-Development-Rectangle-3.png\" alt=\"\" width=\"970\" height=\"250\" srcset=\"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/03\/Android-Development-Rectangle-3.png 970w, https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/03\/Android-Development-Rectangle-3-300x77.png 300w, https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/03\/Android-Development-Rectangle-3-768x198.png 768w, https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/03\/Android-Development-Rectangle-3-750x193.png 750w\" sizes=\"auto, (max-width: 970px) 100vw, 970px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>React Native is an open-source framework for constructing android and iOS apps using react-native. You can use JavaScript to access your platform\u2019s API and have used behaviors of UI using react components. In this article, I have explained about core components of react-native and examples that understand quickly. Before we enter into the react-native core [&hellip;]<\/p>\n","protected":false},"author":89,"featured_media":25518363,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[802,1926,1883,1881],"tags":[],"class_list":["post-25518361","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","category-full-stack-web-development","category-react-native","category-web-android-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Native Core Components and Examples - Entri Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Native Core Components and Examples - Entri Blog\" \/>\n<meta property=\"og:description\" content=\"React Native is an open-source framework for constructing android and iOS apps using react-native. You can use JavaScript to access your platform\u2019s API and have used behaviors of UI using react components. In this article, I have explained about core components of react-native and examples that understand quickly. Before we enter into the react-native core [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"Entri Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/entri.me\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-31T06:30:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-31T13:26:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/03\/react-native-png.png\" \/>\n\t<meta property=\"og:image:width\" content=\"820\" \/>\n\t<meta property=\"og:image:height\" content=\"615\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ashifa Ali\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@entri_app\" \/>\n<meta name=\"twitter:site\" content=\"@entri_app\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ashifa Ali\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/\"},\"author\":{\"name\":\"Ashifa Ali\",\"@id\":\"https:\/\/entri.app\/blog\/#\/schema\/person\/b241d12c98b2da672c5a146bc59767c7\"},\"headline\":\"React Native Core Components and Examples\",\"datePublished\":\"2022-03-31T06:30:36+00:00\",\"dateModified\":\"2022-03-31T13:26:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/\"},\"wordCount\":2056,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/entri.app\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/03\/react-native-png.png\",\"articleSection\":[\"Articles\",\"Full Stack Web Development\",\"React Native\",\"Web and Android Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/\",\"url\":\"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/\",\"name\":\"React Native Core Components and Examples - Entri Blog\",\"isPartOf\":{\"@id\":\"https:\/\/entri.app\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/03\/react-native-png.png\",\"datePublished\":\"2022-03-31T06:30:36+00:00\",\"dateModified\":\"2022-03-31T13:26:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/#primaryimage\",\"url\":\"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/03\/react-native-png.png\",\"contentUrl\":\"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/03\/react-native-png.png\",\"width\":820,\"height\":615},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/entri.app\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Full Stack Web Development\",\"item\":\"https:\/\/entri.app\/blog\/category\/full-stack-web-development\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"React Native Core Components and Examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/entri.app\/blog\/#website\",\"url\":\"https:\/\/entri.app\/blog\/\",\"name\":\"Entri Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/entri.app\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/entri.app\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/entri.app\/blog\/#organization\",\"name\":\"Entri App\",\"url\":\"https:\/\/entri.app\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/entri.app\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/entri.app\/blog\/wp-content\/uploads\/2019\/10\/Entri-Logo-1.png\",\"contentUrl\":\"https:\/\/entri.app\/blog\/wp-content\/uploads\/2019\/10\/Entri-Logo-1.png\",\"width\":989,\"height\":446,\"caption\":\"Entri App\"},\"image\":{\"@id\":\"https:\/\/entri.app\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/entri.me\/\",\"https:\/\/x.com\/entri_app\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/entri.app\/blog\/#\/schema\/person\/b241d12c98b2da672c5a146bc59767c7\",\"name\":\"Ashifa Ali\",\"description\":\"A postgraduate in English Language and Literature who is fond of constructing content that's both vibrant and clear to entice the readers. Passionate about creating tips and information regarding Government Exams for the aspirants.\",\"url\":\"https:\/\/entri.app\/blog\/author\/ashifa\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Native Core Components and Examples - Entri Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/","og_locale":"en_US","og_type":"article","og_title":"React Native Core Components and Examples - Entri Blog","og_description":"React Native is an open-source framework for constructing android and iOS apps using react-native. You can use JavaScript to access your platform\u2019s API and have used behaviors of UI using react components. In this article, I have explained about core components of react-native and examples that understand quickly. Before we enter into the react-native core [&hellip;]","og_url":"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/","og_site_name":"Entri Blog","article_publisher":"https:\/\/www.facebook.com\/entri.me\/","article_published_time":"2022-03-31T06:30:36+00:00","article_modified_time":"2022-03-31T13:26:23+00:00","og_image":[{"width":820,"height":615,"url":"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/03\/react-native-png.png","type":"image\/png"}],"author":"Ashifa Ali","twitter_card":"summary_large_image","twitter_creator":"@entri_app","twitter_site":"@entri_app","twitter_misc":{"Written by":"Ashifa Ali","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/#article","isPartOf":{"@id":"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/"},"author":{"name":"Ashifa Ali","@id":"https:\/\/entri.app\/blog\/#\/schema\/person\/b241d12c98b2da672c5a146bc59767c7"},"headline":"React Native Core Components and Examples","datePublished":"2022-03-31T06:30:36+00:00","dateModified":"2022-03-31T13:26:23+00:00","mainEntityOfPage":{"@id":"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/"},"wordCount":2056,"commentCount":0,"publisher":{"@id":"https:\/\/entri.app\/blog\/#organization"},"image":{"@id":"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/03\/react-native-png.png","articleSection":["Articles","Full Stack Web Development","React Native","Web and Android Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/","url":"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/","name":"React Native Core Components and Examples - Entri Blog","isPartOf":{"@id":"https:\/\/entri.app\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/#primaryimage"},"image":{"@id":"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/03\/react-native-png.png","datePublished":"2022-03-31T06:30:36+00:00","dateModified":"2022-03-31T13:26:23+00:00","breadcrumb":{"@id":"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/#primaryimage","url":"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/03\/react-native-png.png","contentUrl":"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/03\/react-native-png.png","width":820,"height":615},{"@type":"BreadcrumbList","@id":"https:\/\/entri.app\/blog\/react-native-core-components-and-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/entri.app\/blog\/"},{"@type":"ListItem","position":2,"name":"Full Stack Web Development","item":"https:\/\/entri.app\/blog\/category\/full-stack-web-development\/"},{"@type":"ListItem","position":3,"name":"React Native Core Components and Examples"}]},{"@type":"WebSite","@id":"https:\/\/entri.app\/blog\/#website","url":"https:\/\/entri.app\/blog\/","name":"Entri Blog","description":"","publisher":{"@id":"https:\/\/entri.app\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/entri.app\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/entri.app\/blog\/#organization","name":"Entri App","url":"https:\/\/entri.app\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/entri.app\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/entri.app\/blog\/wp-content\/uploads\/2019\/10\/Entri-Logo-1.png","contentUrl":"https:\/\/entri.app\/blog\/wp-content\/uploads\/2019\/10\/Entri-Logo-1.png","width":989,"height":446,"caption":"Entri App"},"image":{"@id":"https:\/\/entri.app\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/entri.me\/","https:\/\/x.com\/entri_app"]},{"@type":"Person","@id":"https:\/\/entri.app\/blog\/#\/schema\/person\/b241d12c98b2da672c5a146bc59767c7","name":"Ashifa Ali","description":"A postgraduate in English Language and Literature who is fond of constructing content that's both vibrant and clear to entice the readers. Passionate about creating tips and information regarding Government Exams for the aspirants.","url":"https:\/\/entri.app\/blog\/author\/ashifa\/"}]}},"_links":{"self":[{"href":"https:\/\/entri.app\/blog\/wp-json\/wp\/v2\/posts\/25518361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/entri.app\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/entri.app\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/entri.app\/blog\/wp-json\/wp\/v2\/users\/89"}],"replies":[{"embeddable":true,"href":"https:\/\/entri.app\/blog\/wp-json\/wp\/v2\/comments?post=25518361"}],"version-history":[{"count":3,"href":"https:\/\/entri.app\/blog\/wp-json\/wp\/v2\/posts\/25518361\/revisions"}],"predecessor-version":[{"id":25518378,"href":"https:\/\/entri.app\/blog\/wp-json\/wp\/v2\/posts\/25518361\/revisions\/25518378"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/entri.app\/blog\/wp-json\/wp\/v2\/media\/25518363"}],"wp:attachment":[{"href":"https:\/\/entri.app\/blog\/wp-json\/wp\/v2\/media?parent=25518361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/entri.app\/blog\/wp-json\/wp\/v2\/categories?post=25518361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/entri.app\/blog\/wp-json\/wp\/v2\/tags?post=25518361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}