{"id":25528092,"date":"2022-06-12T02:36:50","date_gmt":"2022-06-11T21:06:50","guid":{"rendered":"https:\/\/entri.app\/blog\/?p=25528092"},"modified":"2022-06-12T02:36:50","modified_gmt":"2022-06-11T21:06:50","slug":"introducing-react-native-elements","status":"publish","type":"post","link":"https:\/\/entri.app\/blog\/introducing-react-native-elements\/","title":{"rendered":"Introducing React Native Elements"},"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-69ea01ec5f784\" 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-69ea01ec5f784\"  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\/introducing-react-native-elements\/#Setting_Up_the_Project\" >Setting Up the Project<\/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\/introducing-react-native-elements\/#Usage_of_the_Text_Component\" >Usage of the\u00a0Text\u00a0Component<\/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\/introducing-react-native-elements\/#Usage_the_Button_Component\" >Usage the\u00a0Button\u00a0Component<\/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\/introducing-react-native-elements\/#Usage_of_the_Icon_Component\" >Usage of the\u00a0Icon\u00a0Component<\/a><\/li><\/ul><\/nav><\/div>\n<p>React Native Elements\u00a0is a styling library with pre-built components that build upon\u00a0React Native components. Every one of the components in React Native Elements is wrapped with the React Native\u00a0&lt;View \/&gt;\u00a0component with styling based on the props you indicate.<\/p>\n<p style=\"text-align: center\"><strong><a href=\"https:\/\/entri.sng.link\/Bcofz\/yv45\/8wer\" target=\"_blank\" rel=\"noopener\">Attempt free GK Mock Test! Download Entri App!<\/a><\/strong><\/p>\n<p>The primary purpose of React Native Elements for building on top of the basic React Native components to give you more flexibility and ease to theme your entire app. If you\u2019ve ever written CSS for an entire app, you have probably found ways to save yourself some time and write things once instead of over and over. Using React Native Elements allows you to use pre-built components and customize or extend them to re-use the same props.<\/p>\n<p><a href=\"https:\/\/entri.sng.link\/Bcofz\/yv45\/8wer\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-25510775 size-full lazyloaded\" src=\"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/02\/blog-banner1-1-7.png\" srcset=\"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/02\/blog-banner1-1-7.png 345w, https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/02\/blog-banner1-1-7-300x300.png 300w, https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/02\/blog-banner1-1-7-150x150.png 150w, https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/02\/blog-banner1-1-7-24x24.png 24w, https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/02\/blog-banner1-1-7-48x48.png 48w, https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/02\/blog-banner1-1-7-96x96.png 96w, https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/02\/blog-banner1-1-7-75x75.png 75w\" alt=\"\" width=\"345\" height=\"345\" data-pin-no-hover=\"true\" data-ll-status=\"loaded\" \/><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Setting_Up_the_Project\"><\/span><strong>Setting Up the Project<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>First, use\u00a0create-react-native-app\u00a0to create a new React Native application:<\/p>\n<p>npx create-react-native-app<\/p>\n<p>&nbsp;<\/p>\n<p>Answer the prompts for creating a new project. Then navigate to the new project directory.<\/p>\n<p>Then, install\u00a0react-native-elments:<\/p>\n<p>npm install react-native-elements@3.4.2<\/p>\n<p>Now that we have the library installed, it\u2019s ready to use, and we can import any component from it like this:<\/p>\n<p>import { Text } from &#8216;react-native-elements&#8217;;<\/p>\n<p>For example, this code will make the\u00a0Text\u00a0component available for use.<\/p>\n<p style=\"text-align: center\"><a href=\"https:\/\/bit.ly\/3MWTnuS\" target=\"_blank\" rel=\"noopener\">Grab Latest Study Materials! Register Here!<\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Usage_of_the_Text_Component\"><\/span><strong>Usage of the\u00a0Text\u00a0Component<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The React Native Element\u2019s\u00a0&lt;Text \/&gt;\u00a0component expands upon React Native\u2019s\u00a0&lt;Text \/&gt;\u00a0component with more props to style with.<\/p>\n<p>It has font sizes pre-configured, which you can tap into, using either\u00a0h1,\u00a0h2,\u00a0h3, or\u00a0h4. The corresponding font sizes are\u00a040,\u00a034,\u00a028, and\u00a022.<\/p>\n<p>There is a prop for each heading size, like\u00a0h1Style,\u00a0h2Style, and so on. These apply to the container around the text.<\/p>\n<p>Here is an example:<\/p>\n<p>import React from &#8216;react&#8217;;<\/p>\n<p>import { SafeAreaView, StyleSheet } from &#8216;react-native&#8217;;<\/p>\n<p>import { Text } from &#8216;react-native-elements&#8217;;<\/p>\n<p>&nbsp;<\/p>\n<p>export default function App() {<\/p>\n<p>return (<\/p>\n<p>&lt;SafeAreaView&gt;<\/p>\n<p>&lt;Text<\/p>\n<p>h1<\/p>\n<p>h1Style={styles.h1}<\/p>\n<p>&gt;<\/p>\n<p>Your Heading<\/p>\n<p>&lt;\/Text&gt;<\/p>\n<p>&lt;\/SafeAreaView&gt;<\/p>\n<p>);<\/p>\n<p>}<\/p>\n<p>&nbsp;<\/p>\n<p>const styles = StyleSheet.create({<\/p>\n<p>h1: {<\/p>\n<p>backgroundColor: &#8216;#00f&#8217;,<\/p>\n<p>padding: 10,<\/p>\n<p>},<\/p>\n<p>});<\/p>\n<p>&nbsp;<\/p>\n<p>The prop\u00a0h1\u00a0ensures all of our primary headings are the same size across our entire app. And the\u00a0h1Style\u00a0is for the container around it if for any reason you wish to style the container.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Usage_the_Button_Component\"><\/span><strong>Usage the\u00a0Button\u00a0Component<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>As discussed earlier, every component from RNE is already wrapped in a\u00a0&lt;View \/&gt;. That\u2019s the container styled by\u00a0h1style\u00a0in the\u00a0&lt;Text&gt;\u00a0component above. This frees you from manually adding parent container\u00a0&lt;View \/&gt;\u00a0components. You can use\u00a0containerStyle\u00a0to add styles to this parent container.<\/p>\n<p>Take this example for instance:<\/p>\n<p>import React from &#8216;react&#8217;;<\/p>\n<p>import { SafeAreaView } from &#8216;react-native&#8217;;<\/p>\n<p>import { Button } from &#8216;react-native-elements&#8217;;<\/p>\n<p>&nbsp;<\/p>\n<p>export default function App() {<\/p>\n<p>return (<\/p>\n<p>&lt;SafeAreaView&gt;<\/p>\n<p>&lt;Button<\/p>\n<p>containerStyle={{ height: 500 }}<\/p>\n<p>buttonStyle={{ height: &#8216;100%&#8217; }}<\/p>\n<p>title=&#8217;button title&#8217;<\/p>\n<p>\/&gt;<\/p>\n<p>&lt;\/SafeAreaView&gt;<\/p>\n<p>);<\/p>\n<p>}<\/p>\n<p>&nbsp;<\/p>\n<p>In this code, the\u00a0&lt;View&gt;\u00a0component inside the RNE\u00a0&lt;Button \/&gt;\u00a0is styled by\u00a0containerStyle\u00a0to have a height of\u00a0500. But, if you did not include the\u00a0buttonStyle={{height: &#8216;100%&#8217;}}, the button would remain its default height. Only the\u00a0View\u00a0would be taking up\u00a0500\u00a0pixels of the screen. That\u2019s where giving the\u00a0buttonStyle\u00a0prop a height of\u00a0100%\u00a0will fill the entire\u00a0View\u00a0height. The\u00a0buttonStyle\u00a0styled the\u00a0Button\u00a0itself. You will find this pattern followed in almost all the RNE components.<\/p>\n<p>There are plenty of other styles to give a button. You may have noticed that this component defaults with\u00a0TouchableOpacity\u00a0on iOS and\u00a0TouchableNativeFeedback\u00a0for Android. These defaults can be changed with the\u00a0TouchableComponent\u00a0prop:<\/p>\n<p>TouchableComponent={TouchableHighlight}<\/p>\n<p>You can set the\u00a0type\u00a0of button to\u00a0&#8220;clear&#8221;,\u00a0&#8220;outline&#8221;, or the default\u00a0&#8220;solid&#8221;:<\/p>\n<ul>\n<li>&#8220;solid&#8221;\u00a0is the default and includes a background, even in iOS.<\/li>\n<li>&#8220;outline&#8221;\u00a0defaults to no background, but keeps a thin outline.<\/li>\n<li>&#8220;clear&#8221;\u00a0defaults to no background and no outline.<\/li>\n<\/ul>\n<p>You can also add the\u00a0raised\u00a0prop to give your button a raised appearance with a box-shadow.<\/p>\n<p style=\"text-align: center\"><a href=\"https:\/\/bit.ly\/3MWTnuS\" target=\"_blank\" rel=\"noopener\">Grab Latest Study Materials! Register Here!<\/a><\/p>\n<p>There are plenty of other ways to add style to your button:<\/p>\n<ul>\n<li>You can also set a\u00a0loading\u00a0prop to display a loading indicator on the button and style it.<\/li>\n<li>You can style the title text with\u00a0titleStyle.<\/li>\n<li>You can set a\u00a0disabledStyle\u00a0prop as well for a custom disabled look, as well as a\u00a0disabledTitleStyle.<\/li>\n<li>Finally, you can even give your button a linear-gradient design.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Usage_of_the_Icon_Component\"><\/span><strong>Usage of the\u00a0Icon\u00a0Component<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Icons are possible through the\u00a0react-native-vector-icons.<\/p>\n<p>You can also place an icon in the button with the\u00a0icon\u00a0prop. This is a prop in a few of the components, where you can insert the\u00a0Icon\u00a0component or, alternatively, an object. It will default to center the icon in the button, then it will be pushed to the left of the text if there is text in the\u00a0title\u00a0prop. You can switch this to the right side of the text with the\u00a0iconRight\u00a0prop.<\/p>\n<p>Within the\u00a0Icon\u00a0component, the\u00a0name\u00a0prop is important &#8211; it matches the official icon name and if it isn\u2019t found, you will only see a question mark instead of the desired icon.<\/p>\n<p>Here\u2019s the\u00a0full list of supported icons. Each section has a heading that indicates the\u00a0type\u00a0of icon. This includes\u00a0&#8220;entypo&#8221;,\u00a0&#8220;feather&#8221;, and\u00a0&#8220;fontawesome&#8221;. The design of icons will often be different with each\u00a0type.<\/p>\n<p>Here is an example:<\/p>\n<p>import React from &#8216;react&#8217;;<\/p>\n<p>import { SafeAreaView } from &#8216;react-native&#8217;;<\/p>\n<p>import { Button } from &#8216;react-native-elements&#8217;;<\/p>\n<p>&nbsp;<\/p>\n<p>export default function App() {<\/p>\n<p>return (<\/p>\n<p>&lt;SafeAreaView&gt;<\/p>\n<p>&lt;Button<\/p>\n<p>icon={{ name: &#8220;mail&#8221;, size: 15, type: &#8216;entypo&#8217;, color: &#8220;black&#8221; }}<\/p>\n<p>iconRight<\/p>\n<p>title=&#8221;Mail&#8221;<\/p>\n<p>\/&gt;<\/p>\n<p>&lt;\/SafeAreaView&gt;<\/p>\n<p>);<\/p>\n<p>}<\/p>\n<p>You can also replace the object in the example above with the following:<\/p>\n<p>import React from &#8216;react&#8217;;<\/p>\n<p>import { SafeAreaView } from &#8216;react-native&#8217;;<\/p>\n<p>import { Button, Icon } from &#8216;react-native-elements&#8217;;<\/p>\n<p>&nbsp;<\/p>\n<p>export default function App() {<\/p>\n<p>return (<\/p>\n<p>&lt;SafeAreaView&gt;<\/p>\n<p>&lt;Button<\/p>\n<p>icon={&lt;Icon name=&#8221;mail&#8221; size={15} type=&#8221;entypo&#8221; color=&#8221;white&#8221; \/&gt;}<\/p>\n<p>iconRight<\/p>\n<p>title=&#8221;Mail&#8221;<\/p>\n<p>\/&gt;<\/p>\n<p>&lt;\/SafeAreaView&gt;<\/p>\n<p>);<\/p>\n<p>}<\/p>\n<p>&nbsp;<\/p>\n<p>This is using the RNE\u00a0&lt;Icon \/&gt;\u00a0component and any time you use icons in RNE, you can implement either way.<\/p>\n<p>Again, all React Native Elements components are wrapped in a\u00a0&lt;View&gt;, so one of the props you can generally count on is\u00a0containerStyle\u00a0&#8211; that applies here for\u00a0&lt;Icon \/&gt;. Then, instead of\u00a0buttonStyle, you can style the icon itself with\u00a0iconStyle. Of course, this is only needed if you desire to style beyond the built-in props. Now, it is important to understand the distinction &#8211; you can style the icon container with a prop in the parent\u00a0&lt;Button \/&gt;\u00a0with\u00a0iconContainerStyle, which would be the same as the\u00a0containerStyle\u00a0prop within the\u00a0&lt;Icon \/&gt;\u00a0component.<\/p>\n<p>You can also make icons resemble buttons, using the\u00a0reverse\u00a0prop. There is a circular border behind icons, but it is not visible by default. With\u00a0reverse, your icon becomes white (unless you set it specifically with\u00a0reverseColor), while the background color of the circle is filled in with whatever\u00a0color\u00a0you have specified (defaults to black). If you give your icon a\u00a0raised\u00a0prop, the circle background will show up, with a default white fill, unless you have\u00a0reverse\u00a0as well. The circle background will receive the\u00a0raised\u00a0box-shadow, not the icon itself.<\/p>\n<p><strong>Usage of the\u00a0SearchBar\u00a0and\u00a0Input\u00a0Components<\/strong><\/p>\n<p>One very useful component in RNE is the\u00a0&lt;SearchBar \/&gt;. It begins with all the props a standard\u00a0&lt;TextInput \/&gt;\u00a0would have, just as the RNE\u00a0&lt;Input \/&gt;\u00a0component does, but it adds some style props. Besides a few naming differences,\u00a0&lt;SearchBar \/&gt;\u00a0is largely just a specialized version of the RNE\u00a0&lt;Input \/&gt;. Right out of the gate,\u00a0&lt;SearchBar \/&gt;\u00a0has a magnifying glass icon at the far left (this is your default\u00a0searchIcon\u00a0prop), and a dark background. The\u00a0searchIcon\u00a0prop is basically the\u00a0leftIcon\u00a0prop when using the more generic\u00a0&lt;Input \/&gt;.<\/p>\n<p>When you start typing, you\u2019ll notice an\u00a0<strong>x<\/strong>\u00a0at the far right. This is your default\u00a0clearIcon\u00a0prop &#8211; which would be equivalent to your\u00a0rightIcon\u00a0prop when using\u00a0&lt;Input \/&gt;\u00a0component. When you press the\u00a0<strong>x<\/strong>\u00a0icon, it clears the text, which can be handled with the\u00a0onClear\u00a0callback prop.<\/p>\n<p>One important thing to remember is that the icons come with style-able containers &#8211; you can style with\u00a0leftIconContainerStyle\u00a0or\u00a0rightIconContainerStyle. This would be styling the icon container in the\u00a0&lt;SearchBar \/&gt;\u00a0component, not the\u00a0&lt;Icon \/&gt;\u00a0itself.<\/p>\n<p>The cancel button is a bit trickier, but one way to have it show up is like this:<\/p>\n<p>import React from &#8216;react&#8217;;<\/p>\n<p>import { SafeAreaView } from &#8216;react-native&#8217;;<\/p>\n<p>import { SearchBar } from &#8216;react-native-elements&#8217;;<\/p>\n<p>&nbsp;<\/p>\n<p>export default class App extends React.Component {<\/p>\n<p>state = {<\/p>\n<p>search: &#8221;,<\/p>\n<p>};<\/p>\n<p>&nbsp;<\/p>\n<p>updateSearch = (search) =&gt; {<\/p>\n<p>this.setState({ search });<\/p>\n<p>};<\/p>\n<p>&nbsp;<\/p>\n<p>render() {<\/p>\n<p>const { search } = this.state;<\/p>\n<p>&nbsp;<\/p>\n<p>return (<\/p>\n<p>&lt;SafeAreaView&gt;<\/p>\n<p>&lt;SearchBar<\/p>\n<p>platform=&#8217;ios&#8217;<\/p>\n<p>cancelButtonTitle=&#8217;cancel&#8217;<\/p>\n<p>onChangeText={(search) =&gt; { this.updateSearch(search) }}<\/p>\n<p>value={search}<\/p>\n<p>\/&gt;<\/p>\n<p>&lt;\/SafeAreaView&gt;<\/p>\n<p>);<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<p>Having the platform set to\u00a0&#8216;ios&#8217;\u00a0and the\u00a0cancelButtonTitle\u00a0to whatever text you desire will make the button show up on both platforms when the\u00a0SearchBar\u00a0is focused (default behavior). It triggers an\u00a0onCancel\u00a0callback. You will also find the default dark theme will turn off when adding this cancel button.<\/p>\n<p>In the\u00a0&lt;SearchBar&gt;\u00a0component, you can set the\u00a0&lt;View \/&gt;\u00a0with\u00a0containerStyle, and\u00a0SearchBar\u00a0here has the prop\u00a0inputContainerStyle\u00a0to style an inner container around the\u00a0TextInput\u00a0within. To style the\u00a0TextInput, the box where you write your text, use\u00a0inputStyle\u00a0&#8211; this styles the text container, but doesn\u2019t include the icons. The\u00a0inputContainerStyle\u00a0container does include the icons. These are the same with\u00a0&lt;SearchBar \/&gt;\u00a0and\u00a0&lt;Input \/&gt;\u00a0&#8211; you will see the\u00a0&lt;SearchBar \/&gt;\u00a0defaults with padding on the\u00a0containerStyle\u00a0and rounded borders on\u00a0inputContainerStyle.<\/p>\n<p>One difference between\u00a0&lt;SearchBar \/&gt;\u00a0and\u00a0&lt;Input \/&gt;\u00a0is the search seems to require setting the\u00a0value\u00a0as seen in the example above. without it and the\u00a0onChangeText\u00a0callback updating the value, it doesn\u2019t allow you to type anything. This isn\u2019t true of\u00a0&lt;Input \/&gt;. Also with the\u00a0&lt;Input \/&gt;\u00a0component, you can set up a label and error message, each will be within the outer\u00a0&lt;View \/&gt;.<\/p>\n<p>In this article, we saw some of the components provided by React Native Elements:\u00a0Text,\u00a0Button,\u00a0Icon,\u00a0SearchBar, and\u00a0Input.<\/p>\n<p>React Native Elements is full of components and ways to customize your application. There are many pre-built props that can save you plenty of time and take away hours of manual styling and moving elements around pixel-by-pixel.<\/p>\n<p style=\"text-align: center\"><strong><a href=\"https:\/\/entri.sng.link\/Bcofz\/yv45\/8wer\" target=\"_blank\" rel=\"noopener\">Attempt free GK Mock Test! Download Entri App!<\/a><\/strong><\/p>\n<p><strong>Why is it important to choose Entri?<\/strong><\/p>\n<ul>\n<li>Excellent online platform for all the Competitive Exams.<\/li>\n<li>Provides updated materials created by the Entri Experts.<\/li>\n<li>Entri provides a best platform with full- length mock tests including previous year question papers.<\/li>\n<li>You can download the app for free and join the required classes.<\/li>\n<li>Entri wishes you all the best for your examinations and future endeavours.<\/li>\n<\/ul>\n<p><strong><a href=\"https:\/\/entri.sng.link\/Bcofz\/yv45\/8wer\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-25510774 size-full\" src=\"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/02\/blog-banner-1-1-9.png\" srcset=\"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/02\/blog-banner-1-1-9.png 970w, https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/02\/blog-banner-1-1-9-300x77.png 300w, https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/02\/blog-banner-1-1-9-768x198.png 768w, https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/02\/blog-banner-1-1-9-750x193.png 750w\" alt=\"\" width=\"970\" height=\"250\" data-pin-no-hover=\"true\" \/><\/a><\/strong><\/p>\n<p><strong>\u201cYOU DON\u2019T HAVE TO BE GREAT TO START, BUT YOU HAVE TO START TO BE GREAT.\u201d<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React Native Elements\u00a0is a styling library with pre-built components that build upon\u00a0React Native components. Every one of the components in React Native Elements is wrapped with the React Native\u00a0&lt;View \/&gt;\u00a0component with styling based on the props you indicate. Attempt free GK Mock Test! Download Entri App! The primary purpose of React Native Elements for building [&hellip;]<\/p>\n","protected":false},"author":55,"featured_media":25528094,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[802,1926,558],"tags":[],"class_list":["post-25528092","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","category-full-stack-web-development","category-general-knowledge"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Introducing React Native Elements - 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\/introducing-react-native-elements\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing React Native Elements - Entri Blog\" \/>\n<meta property=\"og:description\" content=\"React Native Elements\u00a0is a styling library with pre-built components that build upon\u00a0React Native components. Every one of the components in React Native Elements is wrapped with the React Native\u00a0&lt;View \/&gt;\u00a0component with styling based on the props you indicate. Attempt free GK Mock Test! Download Entri App! The primary purpose of React Native Elements for building [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/entri.app\/blog\/introducing-react-native-elements\/\" \/>\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-06-11T21:06:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/06\/Introducing-React-Native-Elements.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=\"Ayesha Surayya\" \/>\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=\"Ayesha Surayya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/entri.app\/blog\/introducing-react-native-elements\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/entri.app\/blog\/introducing-react-native-elements\/\"},\"author\":{\"name\":\"Ayesha Surayya\",\"@id\":\"https:\/\/entri.app\/blog\/#\/schema\/person\/568cc9d6e77fd5d01033b61c88343097\"},\"headline\":\"Introducing React Native Elements\",\"datePublished\":\"2022-06-11T21:06:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/entri.app\/blog\/introducing-react-native-elements\/\"},\"wordCount\":1848,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/entri.app\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/entri.app\/blog\/introducing-react-native-elements\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/06\/Introducing-React-Native-Elements.png\",\"articleSection\":[\"Articles\",\"Full Stack Web Development\",\"General Knowledge\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/entri.app\/blog\/introducing-react-native-elements\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/entri.app\/blog\/introducing-react-native-elements\/\",\"url\":\"https:\/\/entri.app\/blog\/introducing-react-native-elements\/\",\"name\":\"Introducing React Native Elements - Entri Blog\",\"isPartOf\":{\"@id\":\"https:\/\/entri.app\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/entri.app\/blog\/introducing-react-native-elements\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/entri.app\/blog\/introducing-react-native-elements\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/06\/Introducing-React-Native-Elements.png\",\"datePublished\":\"2022-06-11T21:06:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/entri.app\/blog\/introducing-react-native-elements\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/entri.app\/blog\/introducing-react-native-elements\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/entri.app\/blog\/introducing-react-native-elements\/#primaryimage\",\"url\":\"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/06\/Introducing-React-Native-Elements.png\",\"contentUrl\":\"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/06\/Introducing-React-Native-Elements.png\",\"width\":820,\"height\":615,\"caption\":\"Introducing React Native Elements\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/entri.app\/blog\/introducing-react-native-elements\/#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\":\"Introducing React Native Elements\"}]},{\"@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\/568cc9d6e77fd5d01033b61c88343097\",\"name\":\"Ayesha Surayya\",\"url\":\"https:\/\/entri.app\/blog\/author\/ayesha-surayya\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introducing React Native Elements - 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\/introducing-react-native-elements\/","og_locale":"en_US","og_type":"article","og_title":"Introducing React Native Elements - Entri Blog","og_description":"React Native Elements\u00a0is a styling library with pre-built components that build upon\u00a0React Native components. Every one of the components in React Native Elements is wrapped with the React Native\u00a0&lt;View \/&gt;\u00a0component with styling based on the props you indicate. Attempt free GK Mock Test! Download Entri App! The primary purpose of React Native Elements for building [&hellip;]","og_url":"https:\/\/entri.app\/blog\/introducing-react-native-elements\/","og_site_name":"Entri Blog","article_publisher":"https:\/\/www.facebook.com\/entri.me\/","article_published_time":"2022-06-11T21:06:50+00:00","og_image":[{"width":820,"height":615,"url":"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/06\/Introducing-React-Native-Elements.png","type":"image\/png"}],"author":"Ayesha Surayya","twitter_card":"summary_large_image","twitter_creator":"@entri_app","twitter_site":"@entri_app","twitter_misc":{"Written by":"Ayesha Surayya","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/entri.app\/blog\/introducing-react-native-elements\/#article","isPartOf":{"@id":"https:\/\/entri.app\/blog\/introducing-react-native-elements\/"},"author":{"name":"Ayesha Surayya","@id":"https:\/\/entri.app\/blog\/#\/schema\/person\/568cc9d6e77fd5d01033b61c88343097"},"headline":"Introducing React Native Elements","datePublished":"2022-06-11T21:06:50+00:00","mainEntityOfPage":{"@id":"https:\/\/entri.app\/blog\/introducing-react-native-elements\/"},"wordCount":1848,"commentCount":0,"publisher":{"@id":"https:\/\/entri.app\/blog\/#organization"},"image":{"@id":"https:\/\/entri.app\/blog\/introducing-react-native-elements\/#primaryimage"},"thumbnailUrl":"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/06\/Introducing-React-Native-Elements.png","articleSection":["Articles","Full Stack Web Development","General Knowledge"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/entri.app\/blog\/introducing-react-native-elements\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/entri.app\/blog\/introducing-react-native-elements\/","url":"https:\/\/entri.app\/blog\/introducing-react-native-elements\/","name":"Introducing React Native Elements - Entri Blog","isPartOf":{"@id":"https:\/\/entri.app\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/entri.app\/blog\/introducing-react-native-elements\/#primaryimage"},"image":{"@id":"https:\/\/entri.app\/blog\/introducing-react-native-elements\/#primaryimage"},"thumbnailUrl":"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/06\/Introducing-React-Native-Elements.png","datePublished":"2022-06-11T21:06:50+00:00","breadcrumb":{"@id":"https:\/\/entri.app\/blog\/introducing-react-native-elements\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/entri.app\/blog\/introducing-react-native-elements\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/entri.app\/blog\/introducing-react-native-elements\/#primaryimage","url":"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/06\/Introducing-React-Native-Elements.png","contentUrl":"https:\/\/entri.app\/blog\/wp-content\/uploads\/2022\/06\/Introducing-React-Native-Elements.png","width":820,"height":615,"caption":"Introducing React Native Elements"},{"@type":"BreadcrumbList","@id":"https:\/\/entri.app\/blog\/introducing-react-native-elements\/#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":"Introducing React Native Elements"}]},{"@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\/568cc9d6e77fd5d01033b61c88343097","name":"Ayesha Surayya","url":"https:\/\/entri.app\/blog\/author\/ayesha-surayya\/"}]}},"_links":{"self":[{"href":"https:\/\/entri.app\/blog\/wp-json\/wp\/v2\/posts\/25528092","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\/55"}],"replies":[{"embeddable":true,"href":"https:\/\/entri.app\/blog\/wp-json\/wp\/v2\/comments?post=25528092"}],"version-history":[{"count":3,"href":"https:\/\/entri.app\/blog\/wp-json\/wp\/v2\/posts\/25528092\/revisions"}],"predecessor-version":[{"id":25528096,"href":"https:\/\/entri.app\/blog\/wp-json\/wp\/v2\/posts\/25528092\/revisions\/25528096"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/entri.app\/blog\/wp-json\/wp\/v2\/media\/25528094"}],"wp:attachment":[{"href":"https:\/\/entri.app\/blog\/wp-json\/wp\/v2\/media?parent=25528092"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/entri.app\/blog\/wp-json\/wp\/v2\/categories?post=25528092"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/entri.app\/blog\/wp-json\/wp\/v2\/tags?post=25528092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}