{"id":21738,"date":"2018-05-17T20:04:58","date_gmt":"2018-05-17T20:04:58","guid":{"rendered":"http:\/\/getting_started_with_react_native_part_1"},"modified":"2018-05-17T20:04:58","modified_gmt":"2018-05-17T20:04:58","slug":"getting_started_with_react_native_part_1","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1","title":{"rendered":"Getting Started with React Native: Part 1"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><h2>What is React Native?<\/h2>\n<p>React Native is a popular open source software that enables you build mobile applications easily with JavaScript. Other similar and popular options out there include <a href=\"https:\/\/ionicframework.com\">Ionic<\/a>, <a href=\"https:\/\/github.com\/tapquo\/Lungo.js\">Lungo<\/a>, <a href=\"https:\/\/www.sencha.com\">Sencha Touch<\/a> and <a href=\"https:\/\/nativescript-vue.org\">NativeScript Vue<\/a>. You can use your existing knowledge of HTML5, CSS and JavaScript to develop mobile applications without having to learn a different set of skills.<\/p>\n<h2>What you need to know about React Native<\/h2>\n<p>To build mobile applications and be comfortable with React native development, you need to be armed with the knowledge of the following languages:<\/p>\n<ol>\n<li>HTML5<\/li>\n<li>CSS<\/li>\n<li>JavaScript<\/li>\n<li>React<\/li>\n<\/ol>\n<p>Modern knowledge of JavaScript (ES6) is required. <a href=\"https:\/\/twitter.com\/wesbos\">Wes Bos<\/a> has a very good course on <a href=\"https:\/\/es6.io\">ES6<\/a>. However, you can start with this <a href=\"https:\/\/codeburst.io\/es6-tutorial-for-beginners-5f3c4e7960be\">quick tutorial<\/a> that will provide you with enough knowledge to use React Native without frustration. If you know React, you possess 70 percent of the knowledge required to help you build mobile applications with React Native.<\/p>\n<h2>React Native Install Process<\/h2>\n<p>Building React Native mobile applications require you to have some software installed on your development machine that will provide the right environment to run and compile JavaScript code to native. React Native enables you to build iOS and Android apps with virtually the same code base.<\/p>\n<p>Installation can be a herculean task. Be calm, be patient and follow the <a href=\"http:\/\/facebook.github.io\/react-native\/docs\/getting-started.html\">official guide<\/a> to install everything you need to get started. Windows users can follow this very <a href=\"https:\/\/shift.infinite.red\/getting-started-with-react-native-development-on-windows-90d85a72ae65\">detailed guide<\/a> from the folks at <a href=\"https:\/\/infinite.red\">Infinite Red<\/a>.<\/p>\n<h2>What You Need to Internalize<\/h2>\n<p>I\u2019m sure you are wondering what this section is about. <a href=\"https:\/\/reactjs.org\/docs\/thinking-in-react.html\">Thinking in React<\/a> basically means thinking about your UI in terms of components when designing a web application.<\/p>\n<p>While learning to build mobile applications with React Native, the sooner you internalize the React Native equivalents of basic HTML tags, the faster you can churn out mobile apps with your React knowledge.<\/p>\n<p>Another thing you need to be aware of is that <strong>styling<\/strong> is different. T Styling your components in React Native via the StyleSheet module or inline styling  is done like so:<\/p>\n<ul>\n<li>&lt;View&gt; \u21d4  &lt;div&gt;<\/li>\n<li>&lt;Text&gt; \u21d4 &lt;p&gt;, &lt;h1-6&gt;, &lt;span&gt;<\/li>\n<li>&lt;Image&gt; \u21d4 &lt;img\/&gt;<\/li>\n<li>&lt;TextInput&gt; \u21d4 &lt;input type=\u201ctext\u201d\/&gt;<\/li>\n<li>&lt;Picker&gt; \u21d4 &lt;select&gt;<\/li>\n<li>&lt;Button&gt; \u21d4 &lt;button&gt;<\/li>\n<\/ul>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Text<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{{color:<\/span> '<span class=\"hljs-attr\">red<\/span>'}}&gt;<\/span> I love React Native<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Text<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { StyleSheet, Text, View } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-native'<\/span>;\n\nrender() {\n  <span class=\"hljs-keyword\">return<\/span> (\n      <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">View<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{styles.container}<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Text<\/span>&gt;<\/span>Start building mobile applications today<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Text<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">View<\/span>&gt;<\/span><\/span>\n...\n\nconst styles = StyleSheet.create({\n  <span class=\"hljs-attr\">container<\/span>: {\n    <span class=\"hljs-attr\">flex<\/span>: <span class=\"hljs-number\">1<\/span>,\n    <span class=\"hljs-attr\">backgroundColor<\/span>: <span class=\"hljs-string\">'#fff'<\/span>,\n    <span class=\"hljs-attr\">alignItems<\/span>: <span class=\"hljs-string\">'center'<\/span>,\n    <span class=\"hljs-attr\">justifyContent<\/span>: <span class=\"hljs-string\">'center'<\/span>,\n  },\n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2>Baby Steps: The Counter App<\/h2>\n<p>No, we are not starting with a \u201cHello World\u201d app. We\u2019ll build a simple counter app with React and convert it into a React Native App. This approach encourages you to simply use your existing React knowledge to build a React Native app without any hassle. Let\u2019s get started.<\/p>\n<h4>Set Up<\/h4>\n<p>Install the <code>create-react-app<\/code> node module. This tool helps us to scaffold a React web app out of the box in less than a minute.<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\"> npm install -g create-react-app  \n<\/code><\/span><\/pre>\n<p>Now, run the <code>create-react-app<\/code> command via the command line:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">create-react-app counter\ncd counter\n<\/code><\/span><\/pre>\n<p>Create a <code>components<\/code> folder inside the <code>src<\/code> directory. This folder will house our <code>Counter<\/code> component.<\/p>\n<h4>Create the Counter Component<\/h4>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React, { Component } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">Counter<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">Component<\/span> <\/span>{\n\n  state = {\n    <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-number\">52<\/span>\n  }\n\n  render() {\n    <span class=\"hljs-keyword\">const<\/span> { count } = <span class=\"hljs-keyword\">this<\/span>.state;\n    <span class=\"hljs-keyword\">return<\/span> (\n      <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"counter\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span> Count: { count } <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"full-width\"<\/span>&gt;<\/span> Increment <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"full-width\"<\/span>&gt;<\/span> Decrement <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"full-width\"<\/span>&gt;<\/span> Reset <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span><\/span>\n    );\n  }\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> Counter;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill,f_auto,q_auto\/count_SS.png\" alt=\"Counter\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"700\" height=\"473\"\/><\/p>\n<p>The buttons are currently inactive. Let\u2019s add functionality to be able to manipulate the state. Add the <code>handleIncrement<\/code>, <code>handleDecrement<\/code>, and <code>reset<\/code> method.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">  ...  \n  handleIncrement = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">this<\/span>.setState({\n      <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-keyword\">this<\/span>.state.count + <span class=\"hljs-number\">1<\/span>\n    });\n  }\n\n  handleDecrement = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">this<\/span>.setState({\n      <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-keyword\">this<\/span>.state.count - <span class=\"hljs-number\">1<\/span>\n    });\n  }\n\n  reset = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-comment\">\/\/ you can also pass in a function to setState<\/span>\n    <span class=\"hljs-keyword\">this<\/span>.setState({\n      <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-number\">52<\/span>\n    });\n  }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We are almost done with the component. Now, make the button active by assigning the appropriate function to the <code>onClick<\/code> prop of the button.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">...\nrender() {\n    <span class=\"hljs-keyword\">const<\/span> { count } = <span class=\"hljs-keyword\">this<\/span>.state;\n    <span class=\"hljs-keyword\">return<\/span> (\n      <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"counter\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span> Count: { count } <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{this.handleIncrement}<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"full-width\"<\/span>&gt;<\/span> Increment <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{this.handleDecrement}<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"full-width\"<\/span>&gt;<\/span> Decrement <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{this.reset}<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"full-width\"<\/span>&gt;<\/span> Reset <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span><\/span>\n    );\n  }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h4>Call the Counter Component in App.js<\/h4>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React, { Component } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Counter <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/components\/Counter'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'.\/App.css'<\/span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">App<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">Component<\/span> <\/span>{\n  render() {\n    <span class=\"hljs-keyword\">return<\/span> (\n      <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"App\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Counter<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n    );\n  }\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> App;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Now, test your app again. It should work properly as shown below.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,f_auto,q_auto\/counter.gif\" alt=\"Counter\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"700\" height=\"292\"\/><\/p>\n<h4>Convert React Counter App to React Native App<\/h4>\n<p>There are a couple of steps we must take:<\/p>\n<ol>\n<li>\n<p>Import the required native components from React Native.\nCreate a <code>Counter.js<\/code> file in the app root directory and import the required native components from React Native.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React, { Component } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { StyleSheet, Text, View, Button } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-native'<\/span>;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<\/li>\n<li>\n<p>Add the class methods, and replace some components in render()<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">...\nclass Counter extends Component {\n\n    state = {\n        <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-number\">52<\/span>\n    }\n\n    handleIncrement = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n        <span class=\"hljs-keyword\">this<\/span>.setState({\n            <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-keyword\">this<\/span>.state.count + <span class=\"hljs-number\">1<\/span>\n        });\n    }\n\n    handleDecrement = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n        <span class=\"hljs-keyword\">this<\/span>.setState({\n          <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-keyword\">this<\/span>.state.count - <span class=\"hljs-number\">1<\/span>\n        });\n    }\n\n    reset = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n        <span class=\"hljs-keyword\">this<\/span>.setState({\n          <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-number\">52<\/span>\n        });\n    }\n\n    render() {\n        <span class=\"hljs-keyword\">const<\/span> { count } = <span class=\"hljs-keyword\">this<\/span>.state;\n        <span class=\"hljs-keyword\">return<\/span> (\n          <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">View<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"counter\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Text<\/span>&gt;<\/span> Count: { count } <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Text<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Button<\/span> <span class=\"hljs-attr\">onPress<\/span>=<span class=\"hljs-string\">{this.handleIncrement}<\/span> <span class=\"hljs-attr\">title<\/span>=<span class=\"hljs-string\">\"Increment\"<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Button<\/span> <span class=\"hljs-attr\">onPress<\/span>=<span class=\"hljs-string\">{this.handleDecrement}<\/span> <span class=\"hljs-attr\">title<\/span>=<span class=\"hljs-string\">\"Decrement\"<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Button<\/span> <span class=\"hljs-attr\">onPress<\/span>=<span class=\"hljs-string\">{this.reset}<\/span> <span class=\"hljs-attr\">title<\/span>=<span class=\"hljs-string\">\"Reset\"<\/span> \/&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">View<\/span>&gt;<\/span><\/span>\n        );\n      }\n  }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Check out the following changes:<\/p>\n<ul>\n<li>&lt;section&gt; became &lt;View&gt;<\/li>\n<li>&lt;h1&gt; became &lt;Text&gt;<\/li>\n<li>&lt;button&gt; became &lt;Button&gt;<\/li>\n<li>\n<strong>onClick<\/strong> became <strong>onPress<\/strong>\n<\/li>\n<li>We added a <strong>title<\/strong> prop because the text displayed inside a button in React Native has to be the value of the button\u2019s title property.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>Import counter component in App.js<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { StyleSheet, Text, View } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-native'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Counter <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/Counter'<\/span>;\n\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">App<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">React<\/span>.<span class=\"hljs-title\">Component<\/span> <\/span>{\n      render() {\n        <span class=\"hljs-keyword\">return<\/span> (\n          <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">View<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{styles.container}<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Counter<\/span> \/&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">View<\/span>&gt;<\/span><\/span>\n        );\n      }\n    }\n\n    <span class=\"hljs-keyword\">const<\/span> styles = StyleSheet.create({\n      <span class=\"hljs-attr\">container<\/span>: {\n        <span class=\"hljs-attr\">flex<\/span>: <span class=\"hljs-number\">1<\/span>,\n        <span class=\"hljs-attr\">backgroundColor<\/span>: <span class=\"hljs-string\">'#fff'<\/span>,\n        <span class=\"hljs-attr\">alignItems<\/span>: <span class=\"hljs-string\">'center'<\/span>,\n        <span class=\"hljs-attr\">justifyContent<\/span>: <span class=\"hljs-string\">'center'<\/span>,\n      },\n    });\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<\/li>\n<\/ol>\n<p>Run your app. <code>npm run ios<\/code> for iOS and <code>npm run android<\/code> for Android. The demo below is the React Native iOS app.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,f_auto,q_auto\/countereactnative.gif\" alt=\"react native\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"700\" height=\"1296\"\/><\/p>\n<p>This is not very pretty. The buttons don\u2019t look like buttons. They look like text just hanging out in the middle of white space. Changing the button\u2019s background color in React Native Android simply requires adding the color prop:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Button<\/span> <span class=\"hljs-attr\">onPress<\/span>=<span class=\"hljs-string\">{this.reset}<\/span> <span class=\"hljs-attr\">title<\/span>=<span class=\"hljs-string\">\"Reset\"<\/span> <span class=\"hljs-attr\">color<\/span>=<span class=\"hljs-string\">\"#9C27B0\"<\/span> \/&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>However, in React Native iOS, the process is different. The color prop only changes the color of the text. The background color remains unchanged. Let\u2019s use a better component called <code>TouchableOpacity<\/code> like so:<\/p>\n<p><em>Counter.js<\/em><\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">import { StyleSheet, Text, View, Button, Image, TouchableOpacity } from 'react-native';\n. . .\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">TouchableOpacity<\/span> <span class=\"hljs-attr\">onPress<\/span>=<span class=\"hljs-string\">{this.reset}<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{styles.resetButton}<\/span> &gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Text<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{styles.resetText}<\/span>&gt;<\/span>Reset<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Text<\/span>&gt;<\/span> \n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">TouchableOpacity<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Add the styling at the end of the <strong>Counter.js<\/strong> file like so:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n<span class=\"hljs-keyword\">const<\/span> styles = StyleSheet.create({\n  <span class=\"hljs-attr\">resetButton<\/span>: {\n    <span class=\"hljs-attr\">backgroundColor<\/span>:<span class=\"hljs-string\">'#4583c9'<\/span>,\n    <span class=\"hljs-attr\">paddingTop<\/span>:<span class=\"hljs-number\">10<\/span>,\n    <span class=\"hljs-attr\">paddingBottom<\/span>:<span class=\"hljs-number\">10<\/span>,\n  },\n  <span class=\"hljs-attr\">resetText<\/span>:{\n      <span class=\"hljs-attr\">color<\/span>:<span class=\"hljs-string\">'#fff'<\/span>,\n      <span class=\"hljs-attr\">textAlign<\/span>:<span class=\"hljs-string\">'center'<\/span>,\n      <span class=\"hljs-attr\">paddingLeft<\/span> : <span class=\"hljs-number\">10<\/span>,\n      <span class=\"hljs-attr\">paddingRight<\/span> : <span class=\"hljs-number\">10<\/span>\n  }\n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Your reset button should look like the button in the image below:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill,f_auto,q_auto\/resetbutton.png\" alt=\"Reset Button\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"700\" height=\"1238\"\/><\/p>\n<p>There are a lot of things you can accomplish with the <code>TouchableOpacity<\/code> API. Check the <a href=\"https:\/\/facebook.github.io\/react-native\/docs\/touchableopacity.html\">docs<\/a> on different ways to style and change the button\u2019s state.<\/p>\n<h2>Conclusion<\/h2>\n<p>This is an introduction to React Native. Developing React Native applications requires you to switch frequently between the <a href=\"https:\/\/facebook.github.io\/react-native\/docs\/getting-started.html\">React Native Android and iOS  docs<\/a> to figure out how components work and display on screen for both devices. Managing state and using props is the same with React. You also could use <a href=\"https:\/\/redux.js.org\">Redux<\/a>.<\/p>\n<p>You will be building media rich mobile applications in no time!<\/p>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>For the direct mobile path, Cloudinary offers <a href=\"https:\/\/cloudinary.com\/documentation\/android_integration\">Android<\/a> and <a href=\"https:\/\/cloudinary.com\/documentation\/ios_integration\">iOS<\/a> SDK solutions.<\/p><\/div>\n<p>In the next part of this tutorial, we\u2019ll build an image viewer app with React Native for the Android and iOS platforms. Stay tuned!<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21739,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[333,134,174,202,246,263],"class_list":["post-21738","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-android","tag-guest-post","tag-ios","tag-mobile","tag-react","tag-sdk"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Getting Started With React Native<\/title>\n<meta name=\"description\" content=\"In this tutorial you will learn how to develop media rich Android and IOS applications in no time using React Native\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting Started with React Native: Part 1\" \/>\n<meta property=\"og:description\" content=\"In this tutorial you will learn how to develop media rich Android and IOS applications in no time using React Native\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-17T20:04:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721932\/Web_Assets\/blog\/React-Native\/React-Native.png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Getting Started with React Native: Part 1\",\"datePublished\":\"2018-05-17T20:04:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721932\/Web_Assets\/blog\/React-Native\/React-Native.png?_i=AA\",\"keywords\":[\"Android\",\"Guest Post\",\"iOS\",\"Mobile\",\"React\",\"SDK\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2018\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1\",\"url\":\"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1\",\"name\":\"Getting Started With React Native\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721932\/Web_Assets\/blog\/React-Native\/React-Native.png?_i=AA\",\"datePublished\":\"2018-05-17T20:04:58+00:00\",\"description\":\"In this tutorial you will learn how to develop media rich Android and IOS applications in no time using React Native\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721932\/Web_Assets\/blog\/React-Native\/React-Native.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721932\/Web_Assets\/blog\/React-Native\/React-Native.png?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Getting Started with React Native: Part 1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Getting Started With React Native","description":"In this tutorial you will learn how to develop media rich Android and IOS applications in no time using React Native","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:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1","og_locale":"en_US","og_type":"article","og_title":"Getting Started with React Native: Part 1","og_description":"In this tutorial you will learn how to develop media rich Android and IOS applications in no time using React Native","og_url":"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1","og_site_name":"Cloudinary Blog","article_published_time":"2018-05-17T20:04:58+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721932\/Web_Assets\/blog\/React-Native\/React-Native.png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1"},"author":{"name":"","@id":""},"headline":"Getting Started with React Native: Part 1","datePublished":"2018-05-17T20:04:58+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721932\/Web_Assets\/blog\/React-Native\/React-Native.png?_i=AA","keywords":["Android","Guest Post","iOS","Mobile","React","SDK"],"inLanguage":"en-US","copyrightYear":"2018","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1","url":"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1","name":"Getting Started With React Native","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721932\/Web_Assets\/blog\/React-Native\/React-Native.png?_i=AA","datePublished":"2018-05-17T20:04:58+00:00","description":"In this tutorial you will learn how to develop media rich Android and IOS applications in no time using React Native","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721932\/Web_Assets\/blog\/React-Native\/React-Native.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721932\/Web_Assets\/blog\/React-Native\/React-Native.png?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/getting_started_with_react_native_part_1#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Getting Started with React Native: Part 1"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721932\/Web_Assets\/blog\/React-Native\/React-Native.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21738","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21738"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21738\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21739"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21738"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21738"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21738"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}