{"id":3432,"date":"2023-12-27T09:26:47","date_gmt":"2023-12-27T09:26:47","guid":{"rendered":"https:\/\/www.kaashivinfotech.com\/blog\/?p=3432"},"modified":"2025-08-02T10:41:45","modified_gmt":"2025-08-02T10:41:45","slug":"basic-react-native-interview-questions-answers","status":"publish","type":"post","link":"https:\/\/www.kaashivinfotech.com\/blog\/basic-react-native-interview-questions-answers\/","title":{"rendered":"Basic React Native  Interview Questions &#038; Answers"},"content":{"rendered":"<h2>\ud83e\udde0 <strong data-start=\"198\" data-end=\"246\">React Native Interview Questions and Answers<\/strong><\/h2>\n<p data-start=\"248\" data-end=\"622\">React Native is a powerful JavaScript-based mobile app framework that enables developers to build natively-rendered <a href=\"https:\/\/www.netguru.com\/services\/react-native\" target=\"_blank\" rel=\"noopener\">applications for both iOS and Android<\/a> \u2014 all from a <a href=\"https:\/\/www.netguru.com\/blog\/react-native-faq\" target=\"_blank\" rel=\"noopener\">single codebase<\/a>. As companies increasingly rely on React Native for cross-platform development, the demand for professionals who can confidently answer <strong>Basic React Native Interview Questions Answers<\/strong> is rising sharply.<\/p>\n<p data-start=\"624\" data-end=\"1073\">Originally released by Facebook in 2015, React Native quickly became a go-to solution for building high-performance mobile apps. Today, it powers leading applications like Instagram, Facebook, and Skype \u2014 a testament to the framework\u2019s reliability. Whether you&#8217;re preparing for your first job or looking to move into a senior mobile dev role, this guide offers carefully selected <strong data-start=\"1004\" data-end=\"1052\">React Native interview questions and answers<\/strong> to help you succeed.<\/p>\n<p data-start=\"1075\" data-end=\"1313\">This article is especially useful for anyone aiming to become a <a href=\"https:\/\/www.netguru.com\/blog\/what-is-react-js\" target=\"_blank\" rel=\"noopener\">React Native developer<\/a>, as it also includes <strong data-start=\"1183\" data-end=\"1229\">React Native developer interview questions<\/strong> focused on real-world scenarios, performance optimization, and native integrations.<\/p>\n<p data-start=\"1315\" data-end=\"1681\">As React Native continues to grow, interviewers are asking increasingly specific and practical <strong data-start=\"1410\" data-end=\"1446\">React Native interview questions<\/strong> \u2014 from component lifecycle management to working with native modules. That\u2019s why we\u2019ve compiled this comprehensive list of <strong data-start=\"1570\" data-end=\"1618\">React Native interview questions and answers<\/strong>, covering both foundational knowledge and advanced techniques.<\/p>\n<p data-start=\"1683\" data-end=\"1865\">Whether you&#8217;re a beginner or an experienced engineer, reviewing these <strong data-start=\"1753\" data-end=\"1799\">React Native developer interview questions<\/strong> will prepare you for what hiring managers are really looking for.<\/p>\n<figure id=\"attachment_9719\" aria-describedby=\"caption-attachment-9719\" style=\"width: 1536px\" class=\"wp-caption aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" class=\"size-full wp-image-9719\" src=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2023\/12\/React-Native-Basics-interview-Questions-and-answers.png\" alt=\"React Native Basics interview Questions and answers\" width=\"1536\" height=\"1024\" srcset=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2023\/12\/React-Native-Basics-interview-Questions-and-answers.png 1536w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2023\/12\/React-Native-Basics-interview-Questions-and-answers-300x200.png 300w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2023\/12\/React-Native-Basics-interview-Questions-and-answers-1024x683.png 1024w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2023\/12\/React-Native-Basics-interview-Questions-and-answers-768x512.png 768w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2023\/12\/React-Native-Basics-interview-Questions-and-answers-332x221.png 332w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2023\/12\/React-Native-Basics-interview-Questions-and-answers-664x443.png 664w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2023\/12\/React-Native-Basics-interview-Questions-and-answers-688x459.png 688w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2023\/12\/React-Native-Basics-interview-Questions-and-answers-1044x696.png 1044w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2023\/12\/React-Native-Basics-interview-Questions-and-answers-1400x933.png 1400w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><figcaption id=\"caption-attachment-9719\" class=\"wp-caption-text\">React Native Basics interview Questions and answers<\/figcaption><\/figure>\n<hr data-start=\"1867\" data-end=\"1870\" \/>\n<h2>Basic React Native Interview Questions<\/h2>\n<style>\/*! elementor - v3.18.0 - 08-12-2023 *\/<br \/>.elementor-accordion{text-align:left}.elementor-accordion .elementor-accordion-item{border:1px solid #d5d8dc}.elementor-accordion .elementor-accordion-item+.elementor-accordion-item{border-top:none}.elementor-accordion .elementor-tab-title{margin:0;padding:15px 20px;font-weight:700;line-height:1;cursor:pointer;outline:none}.elementor-accordion .elementor-tab-title .elementor-accordion-icon{display:inline-block;width:1.5em}.elementor-accordion .elementor-tab-title .elementor-accordion-icon svg{width:1em;height:1em}.elementor-accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-right{float:right;text-align:right}.elementor-accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-left{float:left;text-align:left}.elementor-accordion .elementor-tab-title .elementor-accordion-icon .elementor-accordion-icon-closed{display:block}.elementor-accordion .elementor-tab-title .elementor-accordion-icon .elementor-accordion-icon-opened,.elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon-closed{display:none}.elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon-opened{display:block}.elementor-accordion .elementor-tab-content{display:none;padding:15px 20px;border-top:1px solid #d5d8dc}@media (max-width:767px){.elementor-accordion .elementor-tab-title{padding:12px 15px}.elementor-accordion .elementor-tab-title .elementor-accordion-icon{width:1.2em}.elementor-accordion .elementor-tab-content{padding:7px 15px}}.e-con-inner>.elementor-widget-accordion,.e-con>.elementor-widget-accordion{width:var(--container-widget-width);--flex-grow:var(--container-widget-flex-grow)}<\/style>\n<p><a tabindex=\"0\">1. How Different is React-native from ReactJS ?<\/a><\/p>\n<ul>\n<li><strong>Usage Scope<\/strong><br \/>\nReactJs \u2013\u00a0<a href=\"https:\/\/www.interviewbit.com\/react-interview-questions\/\" target=\"_blank\" rel=\"noopener\">React<\/a>is a \u00a0JavaScript library for building Responsive User Interfaces for Building Web Application.<br \/>\nReact Native \u2013 It is a framework for creating mobile applications with a native feel.<\/li>\n<li><strong>Syntax<\/strong><br \/>\nBoth React and React Native uses JSX (JavaScript XML) \u00a0syntax but React uses html tags like &lt;div&gt; &lt;h1&gt; &lt;p&gt; etc while React Native uses &lt;view&gt; &lt;text&gt; etc.<\/li>\n<li><strong>Animation And Gestures<\/strong><br \/>\nReact uses CSS animations on a major scale to achieve animations for a web page while \u00a0The recommended way to animate a component is to use the Animated API provided by React-Native.<\/li>\n<li><strong>Routing Mechanism<\/strong><br \/>\nReact uses a react-router for routing and does not have any inbuilt routing capabilities but React Native has a built-in Navigator library for navigating mobile applications.<\/li>\n<\/ul>\n<table>\n<thead>\n<tr>\n<td><strong>REACT JS<\/strong><\/td>\n<td><strong>REACT NATIVE<\/strong><\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>It is used for developing web applications.<\/td>\n<td>It is used for developing mobile applications.<\/td>\n<\/tr>\n<tr>\n<td>It uses React-router for navigating web pages.<\/td>\n<td>It has a built-in navigator library for navigating mobile applications.<\/td>\n<\/tr>\n<tr>\n<td>It uses HTML tags.<\/td>\n<td>It does not use HTML tags.<\/td>\n<\/tr>\n<tr>\n<td>It provides high security.<\/td>\n<td>It provides low security in comparison to ReactJS.<\/td>\n<\/tr>\n<tr>\n<td>In this, the virtual DOM renders the browser code.<\/td>\n<td>In this, Native uses its API to render code for mobile applications.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><a tabindex=\"0\">2. What is Flexbox and describe any elaborate on its most used properties ?<\/a><\/p>\n<p>It is a layout model that allows elements to align and distribute space within a container. With Flexbox when Using flexible widths and heights, all the inside the main container can be aligned to fill a space or distribute space between elements, which makes it a great tool to use for responsive design systems.<\/p>\n<table>\n<thead>\n<tr>\n<td><strong>Property\u00a0<\/strong><\/td>\n<td><strong>Values<\/strong><\/td>\n<td><strong>Description<\/strong><\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>flexDirection<\/td>\n<td>\u2018column\u2019,\u2019row\u2019<\/td>\n<td>Used to specify if elements will be aligned vertically or horizontally<\/td>\n<\/tr>\n<tr>\n<td>justifyContent<\/td>\n<td>\u2018center\u2019,\u2019flex-start\u2019,\u2019flex-end\u2019,\u2019space-around\u2019,\u2019space-between\u2019<\/td>\n<td>Used to determine how should elements be distributed inside the container<\/td>\n<\/tr>\n<tr>\n<td>alignItems<\/td>\n<td>\u2018center\u2019,\u2019flex-start\u2019,\u2019flex-end\u2019,\u2019stretched\u2019<\/td>\n<td>Used to determine how should elements be distributed inside the container along the secondary axis (opposite of flexDirection)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><a tabindex=\"0\">3. Describe advantages of using React Native ?<\/a><\/p>\n<p>There are multiple advantage of using React Native like,<\/p>\n<ul>\n<li><strong>Large Community<\/strong><br \/>\nReact Native is an Open Source Framework, it is completely community driven so any challenges can be resolved by getting online help from other developers.<\/li>\n<li><strong>Reusability<\/strong><br \/>\nCode can be written once and can be used for both IOS and ANDROID, which helps in maintaining and as well debugging large complex applications as no separate teams are needed for supporting both the platforms, this also reduces the cost to a major extent.<\/li>\n<li><strong>Live and Hot Reloading<\/strong><br \/>\nLive reloading reloads or refreshes the entire app when a file changes. For example, if you were four links deep into your navigation and saved a change, live reloading would restart the app and load the app back to the initial route.<br \/>\nHot reloading only refreshes the files that were changed without losing the state of the app. For example, if you were four links deep into your navigation and saved a change to some styling, the state would not change, but the new styles would appear on the page without having to navigate back to the page you are on because you would still be on the same page.<\/li>\n<li><strong>Additional Third-Party Plugins<\/strong><br \/>\nIf the existing modules do not meet the business requirement in React Native we can also use Third Party plugins which may help to speed up the development process.<\/li>\n<\/ul>\n<p><a tabindex=\"0\">4. What are threads in General ? and explain Different Threads in ReactNative with Use of Each ?<\/a><\/p>\n<p>The single sequential flow of control within a program can be controlled by a thread.<\/p>\n<p><strong>React Native right now uses 3 threads:<\/strong><\/p>\n<ul>\n<li><strong>MAIN\/UI \u00a0Thread<\/strong>\u2014 This is the main application thread on which your Android\/iOS app is running. The UI of the application can be changed by the Main thread and it has access to it .<\/li>\n<li><strong>Shadow Thread<\/strong>\u2014 layout created using React library in React Native can be calculated by this and it is a background thread.<\/li>\n<li><strong>JavaScript Thread<\/strong>\u2014 The main Javascript code is executed by this thread.<\/li>\n<\/ul>\n<p><a tabindex=\"0\">5. Are default props available in React Native and if yes for what are they used and how are they used ?<\/a><\/p>\n<p>Yes, default props available in React Native as they are for React, \u00a0If for an instance we do not pass props value, the component will use the default props value.<\/p>\n<p>import React, {Component} from \u2018react\u2019;<\/p>\n<pre data-start=\"1\" data-line-offset=\"0\"><code class=\"\" data-line=\"\">import {View, Text} from &#039;react-native&#039;;\nclass DefaultPropComponent extends Component {\n   render() {\n       return ( \n           &lt;View&gt;\n             &lt;Text&gt; \n              {this.props.name} \n            &lt;\/Text&gt; \n          &lt;\/View&gt;\n       )\n   }\n}\nDemo.defaultProps = {\n   name: &#039;BOB&#039;\n}\n\nexport default DefaultPropComponent;<\/code><\/pre>\n<p><a tabindex=\"0\">6. How is user Input Handled in React Native ?<\/a><\/p>\n<p>TextInput is a Core Component that allows the user to enter text. It has an onChangeText prop that takes a function to be called every time the text changes, and an onSubmitEditing prop that takes a function to be called when the text is submitted.<\/p>\n<pre data-start=\"1\" data-line-offset=\"0\"><code class=\"\" data-line=\"\">import React, { useState } from &#039;react&#039;;\nimport { Text, TextInput, View } from &#039;react-native&#039;;\n\nconst PizzaTranslator = () =&gt; {\n const [text, setText] = useState(&#039;&#039;);\n return (\n   &lt;View style={{padding: 10}}&gt;\n     &lt;TextInput\n       style={{height: 40}}\n       placeholder=&quot;Type here to translate!&quot;\n       onChangeText={text =&gt; setText(text)}\n       defaultValue={text}\n     \/&gt;\n     &lt;Text style={{padding: 10, fontSize: 42}}&gt;\n       {text.split(&#039; &#039;).map((word) =&gt; word &amp;&amp; &#039;\ud83c\udf55&#039;).join(&#039; &#039;)}\n     &lt;\/Text&gt;\n   &lt;\/View&gt;\n );\n}\n\nexport default PizzaTranslator;<\/code><\/pre>\n<p><a tabindex=\"0\">7. What is State and how is it used in React Native ?<\/a><\/p>\n<p>It is used to control the components. The variable data can be stored in the state. It is mutable means a state can change the value at any time.<\/p>\n<pre data-start=\"1\" data-line-offset=\"0\"><code class=\"\" data-line=\"\">import React, {Component} from &#039;react&#039;;    \nimport { Text, View } from &#039;react-native&#039;;    \nexport default class App extends Component {    \n state = { \nmyState: &#039;State of Text Component&#039;\n              }\nupdateState = () =&gt; this.setState({myState: &#039;The state is updated&#039;})\nrender() {\nreturn (\n&lt;View&gt;    \n&lt;Text onPress={this.updateState}&gt; {this.state.myState} &lt;\/Text&gt;    \n&lt;\/View&gt; \n); } }<\/code><\/pre>\n<p>Here we create a Text component with state data. The content of the Text component will be updated whenever we click on it. The state is updated by event onPress .<\/p>\n<p><a tabindex=\"0\">8. What is Redux in React Native and give important components of Redux used in React Native app ?<\/a><\/p>\n<p>Redux is a predictable state container for JavaScript apps. It helps write applications that run in different environments. This means the entire data flow of the app is handled within a single container while persisting previous state.<\/p>\n<p><u>Actions:<\/u>\u00a0are payloads of information that send data from your application to your store. They are the only source of information for the store. This means if any state change is necessary the change required will be dispatched through the actions.<\/p>\n<p><u>Reducers:<\/u>\u00a0\u201cActions describe the fact that something happened, but don\u2019t specify how the application\u2019s state changes in response. This is the job of reducers.\u201d when an action is dispatched for state change its the reducers duty to make the necessary changes to the state and return the new state of the application.<\/p>\n<p><u>Store:<\/u>\u00a0a store can be created with help of reducers which holds the entire state of the application. The recommended way is to use a single store for the entire application rather than having multiple stores which will violate the use of redux which only has a single store.<\/p>\n<p><u>Components:<\/u>\u00a0this is where the UI of the application is kept.<\/p>\n<p><a tabindex=\"0\">9. Describe Timers in React Native Application ?<\/a><\/p>\n<p>Timers are an important and integral part of any application and React Native implements the browser timers.<\/p>\n<p><strong>Timers<\/strong><\/p>\n<ul>\n<li><strong>setTimeout, clearTimeout<\/strong><\/li>\n<\/ul>\n<p>There may be business requirements to execute a certain piece of code after waiting for some time duration or after a delay setTimeout can be used in such cases, clearTimeout is simply used to clear the timer that is started.<\/p>\n<pre data-start=\"1\" data-line-offset=\"0\"><code class=\"\" data-line=\"\">setTimeout(() =&gt; {\nyourFunction();\n}, 3000);<\/code><\/pre>\n<ul>\n<li><strong>setInterval, clearInterval<\/strong><\/li>\n<\/ul>\n<p>setInterval is a method that calls a function or runs some code after specific intervals of time, as specified through the second parameter.<\/p>\n<pre data-start=\"1\" data-line-offset=\"0\"><code class=\"\" data-line=\"\">setInterval(() =&gt; {\nconsole.log(&#039;Interval triggered&#039;);\n}, 1000);<\/code><\/pre>\n<p>A function or block of code that is bound to an interval executes until it is stopped. To stop an interval, we can use the clearInterval() method.<\/p>\n<ul>\n<li><strong>setImmediate, clearImmediate<\/strong><\/li>\n<\/ul>\n<p>Calling the function or execution as soon as possible.<\/p>\n<pre data-start=\"1\" data-line-offset=\"0\"><code class=\"\" data-line=\"\">var immediateID = setImmediate(function);\n\/\/ The below code displays the alert dialog immediately.\nvar immediateId = setImmediate(\n    () =&gt; {    alert(&#039;Immediate Alert&#039;);\n}<\/code><\/pre>\n<p>clearImmediate \u00a0is used for Canceling the immediate actions that were set by setImmediate().<\/p>\n<ul>\n<li><strong>requestAnimationFrame, cancelAnimationFrame<\/strong><\/li>\n<\/ul>\n<p>It is the standard way to perform animations.<\/p>\n<p>Calling a function to update an animation before the next animation frame.<\/p>\n<pre data-start=\"1\" data-line-offset=\"0\"><code class=\"\" data-line=\"\">var requestID = requestAnimationFrame(function);\n\/\/ The following code performs the animation.\nvar requestId = requestAnimationFrame(\n    () =&gt; { \/\/ animate something}\n)<\/code><\/pre>\n<p>cancelAnimationFrame is used for Canceling the function that was set by requestAnimationFrame().<\/p>\n<p><a tabindex=\"0\">10. How to debug React Native Applications and Name the Tools used for it ?<\/a><\/p>\n<p>In the React Native world, debugging may be done in different ways and with different tools, since React Native is composed of different environments (iOS and Android), which means there\u2019s an assortment of problems and a variety of tools needed for debugging.<\/p>\n<ul>\n<li><strong>The Developer Menu:<\/strong><u>Reload:<\/u>reloads the app<br \/>\n<u>Debug JS Remotely:<\/u>\u00a0opens a channel to a JavaScript debugger<br \/>\n<u>Enable Live Reload:<\/u>\u00a0makes the app reload automatically on clicking Save<br \/>\n<u>Enable Hot Reloading:<\/u>\u00a0watches for changes accrued in a changed file<br \/>\n<u>Toggle Inspector:<\/u>\u00a0toggles an inspector interface, which allows us to inspect any UI element on the screen and its properties, and presents an interface that has other tabs like networking, which shows us the HTTP calls, and a tab for performance.<\/li>\n<li><strong>Chrome\u2019s DevTools:<\/strong>Chrome is possibly the first tool to think of for debugging React Native. It\u2019s common to use Chrome\u2019s DevTools to debug web apps, but we can also use them to debug React Native since it\u2019s powered by JavaScript.To use Chrome\u2019s DevTools with React Native, first make sure to connect to the same Wi-Fi, then press command + R if you\u2019re using macOS, or Ctrl + M on Windows\/Linux. In the developer menu, choose Debug Js Remotely. This will open the default JS debugger.<\/li>\n<li><strong>React Developer Tools<\/strong><br \/>\nFor Debugging React Native using React\u2019s Developer Tools, you need to use the desktop app. In can installed it globally or locally in your project by just running the following command:<br \/>\nyarn add react-devtools<br \/>\nOr npm:<br \/>\nnpm install react-devtools \u2013saveReact\u2019s Developer Tools may be the best tool for debugging React Native for these two reasons:<br \/>\nIt allows for debugging React components.<br \/>\nThere is also a possibility to debug styles in React Native. There is also a new version that comes with this feature that also works with the inspector in the developer menu. Previously, it was a problem to write styles and have to wait for the app to reload to see the changes. Now we can debug and implement style properties and see the effect of the change instantly without reloading the app.<\/li>\n<li><strong>React Native Debugger<\/strong><br \/>\nWhile using Redux in your React Native app, React Native Debugger is probably the right debugger for you. This is a standalone desktop app that works on macOS, Windows, and Linux. It even integrates both Redux\u2019s DevTools and React\u2019s Developer Tools in one app so you don\u2019t have to work with two separate apps for debugging.<\/li>\n<\/ul>\n<p>React Native CLI<\/p>\n<p>You can use the React Native CLI to do some debugging as well. It can also be used for showing the logs of the app. Hitting react-native log-android will show you the logs of db logcat on Android, and to view the logs in iOS you can run react-native log-ios, and with console.log you can dispatch logs to the terminal:<\/p>\n<pre data-start=\"1\" data-line-offset=\"0\"><code class=\"\" data-line=\"\">console.log(&quot;some error\ud83d\uded1&quot;)<\/code><\/pre>\n<p><a tabindex=\"0\">11. What is Props Drilling and how can we avoid it ?<\/a><\/p>\n<p>Props Drilling (Threading) is a concept that refers to the process you pass the data from the parent component to the exact child Component BUT in between, other components owning the props just to pass it down the chain.<\/p>\n<p><strong>Steps to avoid it<\/strong><\/p>\n<ol>\n<li>React Context API.<br \/>\n2. Composition<br \/>\n3. Render props<br \/>\n4. HOC<br \/>\n5. Redux or MobX<\/li>\n<\/ol>\n<figure id=\"attachment_9720\" aria-describedby=\"caption-attachment-9720\" style=\"width: 1536px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-9720\" src=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2023\/12\/React-Prop-Chain-Visualization.png\" alt=\"React Native Basics interview Questions and answers\" width=\"1536\" height=\"1024\" srcset=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2023\/12\/React-Prop-Chain-Visualization.png 1536w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2023\/12\/React-Prop-Chain-Visualization-300x200.png 300w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2023\/12\/React-Prop-Chain-Visualization-1024x683.png 1024w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2023\/12\/React-Prop-Chain-Visualization-768x512.png 768w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2023\/12\/React-Prop-Chain-Visualization-332x221.png 332w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2023\/12\/React-Prop-Chain-Visualization-664x443.png 664w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2023\/12\/React-Prop-Chain-Visualization-688x459.png 688w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2023\/12\/React-Prop-Chain-Visualization-1044x696.png 1044w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2023\/12\/React-Prop-Chain-Visualization-1400x933.png 1400w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><figcaption id=\"caption-attachment-9720\" class=\"wp-caption-text\">React Prop Chain Visualization<\/figcaption><\/figure>\n<p><a tabindex=\"0\">12. Describing Networking in React Native and how to make AJAX network calls in React Native?<\/a><\/p>\n<p>React Native provides the Fetch API for networking needs.<br \/>\nTo fetch content from an arbitrary URL, we can pass the URL to fetch:<\/p>\n<pre data-start=\"1\" data-line-offset=\"0\"><code class=\"\" data-line=\"\">fetch(&#039;https:\/\/mywebsite.com\/endpoint\/&#039;, {\n method: &#039;POST&#039;,\n headers: {\n   Accept: &#039;application\/json&#039;,\n   &#039;Content-Type&#039;: &#039;application\/json&#039;\n },\n body: JSON.stringify({\n   firstParam: &#039;yourValue&#039;,\n   secondParam: &#039;yourOtherValue&#039;\n })\n});<\/code><\/pre>\n<p>Networking is an inherently asynchronous operation. Fetch methods will return a Promise that makes it straightforward to write code that works in an asynchronous manner:<\/p>\n<pre data-start=\"1\" data-line-offset=\"0\"><code class=\"\" data-line=\"\">const getMoviesFromApi = () =&gt; {\n return fetch(&#039;https:\/\/reactnative.dev\/movies.json&#039;)\n   .then((response) =&gt; response.json())\n   .then((json) =&gt; {\n     return json.movies;\n   })\n   .catch((error) =&gt; {\n     console.error(error);\n   });\n};<\/code><\/pre>\n<p>The XMLHttpRequest API is built in to React Native \u00a0Since frisbee and Axios use XMLHttpRequest we can even use these libraries.<\/p>\n<pre data-start=\"1\" data-line-offset=\"0\"><code class=\"\" data-line=\"\">var request = new XMLHttpRequest();\nrequest.onreadystatechange = (e) =&gt; {\n if (request.readyState !== 4) {\n   return;\n }\n\n if (request.status === 200) {\n   console.log(&#039;success&#039;, request.responseText);\n } else {\n   console.warn(&#039;error&#039;);\n }\n};\n\nrequest.open(&#039;GET&#039;, &#039;https:\/\/mywebsite.com\/endpoint\/&#039;);\nrequest.send();<\/code><\/pre>\n<p><a tabindex=\"0\">13. List down Key Points to integrate React Native in an existing Android mobile application<\/a><\/p>\n<p>Primary points to note to integrating React Native components into your Android application are to:<\/p>\n<ul>\n<li>Set up React Native dependencies and directory structure.<\/li>\n<li>Develop your React Native components in JavaScript.<\/li>\n<li>Add a ReactRootView to your Android app. This view will serve as the container for your React Native component.<\/li>\n<li>Start the React Native server and run your native application.<\/li>\n<li>Lastly, we need to Verify that the React Native aspect of your application works as expected.<\/li>\n<\/ul>\n<p><a tabindex=\"0\">14. How do you install and create a React Native application ?<\/a><\/p>\n<p>Before you begin, make sure you have Node.js and NPM installed on your system.<\/p>\n<p>To install a React Native application, you can use the following command:<\/p>\n<p>$ npm install -g create-react-native-app<\/p>\n<p>To create a React Native project, you can use the following command:<\/p>\n<p>$ create-react-native-app AppName<\/p>\n<p>To navigate in your project, use the following command:<\/p>\n<p>$ cd AppName<\/p>\n<p>And to start your project, run this command:<\/p>\n<p>$ npm start<\/p>\n<p><a tabindex=\"0\">15.What is React Native ?<\/a><\/p>\n<p>React Native is an open source framework developed by Facebook which enables developers to build cross-platform mobile applications using Javascript. With React Native, one can develop a mobile application by using the same design principles used to develop a web application with ReactJs framework. It allows the developer to build mobile application UI by composing multiple components in a declarative way. Before React native, there were few options like Cordova, ionic available to build a hybrid application.<\/p>\n<p>These applications were written using web technology but the hybrid app was not a native application and lacks performance issue. React native solves those performance issues that is why it quickly became popular in React community. Under the hood, React native bridge invokes the native rendering APIs in Objective-C (for IOS) and Java (for Android). That is why they perform better than hybrid application development frameworks. React native has a very good community of developers who actively contribute to the framework.<\/p>\n<p>&nbsp;<\/p>\n<p><a tabindex=\"0\">16. What is JSX ?<\/a><\/p>\n<p style=\"line-height: 21.0pt; background: white; margin: 0in 0in 12.0pt 0in;\">JSX is a system used for embedding XML in Javascript. You can say that JSX is a templating language for writing HTML\/XML tags with Javascript. With the help of JSX, HTML\/XML can be written inside Javascript file. JSX enables conditional rendering of React components.<\/p>\n<p style=\"line-height: 21.0pt; background: white; margin: 0in 0in 12.0pt 0in;\">React includes building step which converts JSX into Javascript code which is ultimately executed by browser in case of a web app or react Native in case of React Native. JSX is added to improve the developer experience. ReactJS provides few APIs which make the HTML structure in a browser.<\/p>\n<p style=\"line-height: 21.0pt; background: white; margin: 0in 0in 12.0pt 0in;\">Those APIs were a little cumbersome to frequently used. That is why React JS introduced JSX and added a tooling step to convert JSX into platform understandable code. With the help of JSX, we can execute javascript to build HTML tags very easily. \u00a0Here is an example of a JSX code:<\/p>\n<pre data-start=\"1\" data-line-offset=\"0\"><code class=\"\" data-line=\"\">&lt;View style={styles.container}&gt;\n&lt;TouchableOpacity onPress={this.decrement}&gt;\n&lt;Text style={styles.text}&gt;-&lt;\/Text&gt;\n&lt;\/TouchableOpacity&gt;\n&lt;Text style={styles.text}&gt;{this.state.count}&lt;\/Text&gt;\n&lt;TouchableOpacity onPress={this.increment}&gt;\n&lt;Text style={styles.text}&gt;+&lt;\/Text&gt;\n&lt;\/TouchableOpacity&gt;\n&lt;\/View&gt;<\/code><\/pre>\n<p style=\"line-height: 21.0pt; background: white; margin: 12.0pt 0in 0in 0in;\">Above JSX code is creating one View component which contains two TouchableOpacity component as its child element. We are accessing Javascript variable in Text component with curly brace.<\/p>\n<p><a tabindex=\"0\">17. What is the role of hooks in React Native ?<\/a><\/p>\n<p style=\"line-height: 21.0pt; background: white; vertical-align: baseline; margin: 0in 0in .25in 0in;\">Hooks allow developers to \u2018hook into\u2019 existing components and access their state and lifestyle features. Previously, these would not be accessible for use elsewhere. With hooks, developers can now tap into a component\u2019s state and lifestyle features without having to write a new class.<\/p>\n<p><a tabindex=\"0\">18. What is the role of fast refresh in React Native ?<\/a><\/p>\n<p style=\"line-height: 21.0pt; background: white; vertical-align: baseline; margin: 0in 0in .25in 0in;\">Fast refresh allows developers to get near-instant feedback on recent changes in their app. Once \u2018Enable fast refresh\u2019 in the developer menu is toggled, any new edits in the program become visible within a few seconds for an easy evaluation.<\/p>\n<p><a tabindex=\"0\">19. How do you import components in React Native ?<\/a><\/p>\n<p style=\"line-height: 21.0pt; background: white; vertical-align: baseline; margin: 0in 0in .25in 0in;\">In React Native, you can import components from scratch, or also import ready-made ones from another file.<\/p>\n<p style=\"line-height: 21.0pt; background: white; vertical-align: baseline; margin: 0in 0in .25in 0in;\">To import a component, you need to type &lt;import { Component } from \u2018react-native\u2019&gt;, changing the word in brackets depending on the type of component you want to import.<\/p>\n<p><a tabindex=\"0\">20. What coding languages are compatible with React Native ?<\/a><\/p>\n<p style=\"line-height: 21.0pt; background: white; vertical-align: baseline; margin: 0in 0in .25in 0in;\">While React Native is generally used with JavaScript, compatibility with other coding languages, including Python, C++, and C, is also possible through the framework\u2019s Java Native Interface (JNI).<\/p>\n<p><a tabindex=\"0\">21. What engine does React Native use ?<\/a><\/p>\n<p>In React Native, JavaScript code runs through two engines:<\/p>\n<ol>\n<li><strong>JavaScriptCore<\/strong>is used on iOS simulators and Android emulators; virtually all operations run through this engine<\/li>\n<li><strong>V8\u00a0<\/strong>is used when Chrome debugging is being performed<\/li>\n<\/ol>\n<h2 data-start=\"236\" data-end=\"281\"><\/h2>\n<h2 data-start=\"236\" data-end=\"281\">\u2753 FAQ: React Native \u2013 Most Asked Questions<\/h2>\n<h3 data-start=\"283\" data-end=\"311\">1. What is React Native?<\/h3>\n<p data-start=\"312\" data-end=\"539\"><strong data-start=\"312\" data-end=\"328\">React Native<\/strong> is a JavaScript framework used to build mobile applications for both iOS and Android using a single codebase. It allows developers to write code once and deploy it across platforms with near-native performance.<\/p>\n<hr data-start=\"541\" data-end=\"544\" \/>\n<h3 data-start=\"546\" data-end=\"582\">2. What is Expo in React Native?<\/h3>\n<p data-start=\"583\" data-end=\"823\"><strong data-start=\"583\" data-end=\"591\">Expo<\/strong> is an open-source platform that sits on top of React Native and simplifies app development. It provides a set of tools and services to quickly build, test, and deploy <strong data-start=\"759\" data-end=\"775\">React Native<\/strong> apps without needing native code configuration.<\/p>\n<hr data-start=\"825\" data-end=\"828\" \/>\n<h3 data-start=\"830\" data-end=\"865\">3. How to install React Native?<\/h3>\n<p data-start=\"866\" data-end=\"980\">To <strong data-start=\"869\" data-end=\"893\">install React Native<\/strong>, you need Node.js, npm or yarn, and the React Native CLI. After installing these, run:<\/p>\n<div class=\"contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary\">\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"\" data-line=\"\">npx react-native init MyApp<br \/>\n<\/code><\/div>\n<\/div>\n<p data-start=\"1021\" data-end=\"1083\">Then follow platform-specific setup (Android Studio or Xcode).<\/p>\n<hr data-start=\"1085\" data-end=\"1088\" \/>\n<h3 data-start=\"1090\" data-end=\"1128\">4. How to create React Native app?<\/h3>\n<p data-start=\"1129\" data-end=\"1206\">You can <strong data-start=\"1137\" data-end=\"1166\">create a React Native app<\/strong> using the React Native CLI or Expo CLI:<\/p>\n<ul data-start=\"1207\" data-end=\"1304\">\n<li data-start=\"1207\" data-end=\"1260\">\n<p data-start=\"1209\" data-end=\"1260\"><strong data-start=\"1209\" data-end=\"1230\">React Native CLI:<\/strong> <code class=\"\" data-line=\"\">npx react-native init MyApp<\/code><\/p>\n<\/li>\n<li data-start=\"1261\" data-end=\"1304\">\n<p data-start=\"1263\" data-end=\"1304\"><strong data-start=\"1263\" data-end=\"1276\">Expo CLI:<\/strong> <code class=\"\" data-line=\"\">npx create-expo-app MyApp<\/code><\/p>\n<\/li>\n<\/ul>\n<hr data-start=\"1306\" data-end=\"1309\" \/>\n<h3 data-start=\"1311\" data-end=\"1372\">5. What is the difference between React and React Native?<\/h3>\n<p data-start=\"1373\" data-end=\"1570\"><strong data-start=\"1373\" data-end=\"1382\">React<\/strong> is used for building web interfaces, while <strong data-start=\"1426\" data-end=\"1442\">React Native<\/strong> is used for building mobile applications. React Native uses native mobile components, whereas React renders to the browser DOM.<\/p>\n<hr data-start=\"1572\" data-end=\"1575\" \/>\n<h3 data-start=\"1577\" data-end=\"1612\">6. How to run React Native app?<\/h3>\n<p data-start=\"1613\" data-end=\"1671\">To <strong data-start=\"1616\" data-end=\"1642\">run a React Native app<\/strong>, use the following commands:<\/p>\n<ul data-start=\"1672\" data-end=\"1835\">\n<li data-start=\"1672\" data-end=\"1713\">\n<p data-start=\"1674\" data-end=\"1713\"><strong data-start=\"1674\" data-end=\"1686\">For iOS:<\/strong> <code class=\"\" data-line=\"\">npx react-native run-ios<\/code><\/p>\n<\/li>\n<li data-start=\"1714\" data-end=\"1835\">\n<p data-start=\"1716\" data-end=\"1835\"><strong data-start=\"1716\" data-end=\"1732\">For Android:<\/strong> <code class=\"\" data-line=\"\">npx react-native run-android<\/code><br \/>\nMake sure your emulator or device is connected and configured properly.<\/p>\n<\/li>\n<\/ul>\n<hr data-start=\"1837\" data-end=\"1840\" \/>\n<h3 data-start=\"1842\" data-end=\"1884\">7. How to create React Native project?<\/h3>\n<p data-start=\"1885\" data-end=\"1927\">To <strong data-start=\"1888\" data-end=\"1921\">create a React Native project<\/strong>, run:<\/p>\n<div class=\"contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary\">\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"\" data-line=\"\">npx react-native init ProjectName<br \/>\n<\/code><\/div>\n<\/div>\n<p data-start=\"1974\" data-end=\"1986\">or use Expo:<\/p>\n<div class=\"contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary\">\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"\" data-line=\"\">npx create-expo-app ProjectName<br \/>\n<\/code><\/div>\n<\/div>\n<hr data-start=\"2032\" data-end=\"2035\" \/>\n<h3 data-start=\"2037\" data-end=\"2074\">8. What is React Native used for?<\/h3>\n<p data-start=\"2075\" data-end=\"2265\"><strong data-start=\"2075\" data-end=\"2091\">React Native<\/strong> is used for building cross-platform mobile applications for iOS and Android. It enables faster development and easier code sharing while maintaining native-like performance.<\/p>\n<hr data-start=\"2267\" data-end=\"2270\" \/>\n<h3 data-start=\"2272\" data-end=\"2302\">9. How React Native works?<\/h3>\n<p data-start=\"2303\" data-end=\"2491\"><strong data-start=\"2303\" data-end=\"2319\">React Native<\/strong> uses JavaScript to interact with native components via a \u201cbridge.\u201d It translates React components into native UI elements and communicates with native APIs asynchronously.<\/p>\n<hr data-start=\"2493\" data-end=\"2496\" \/>\n<h3 data-start=\"2498\" data-end=\"2556\">10. What is difference between React and React Native?<\/h3>\n<p data-start=\"2557\" data-end=\"2794\">The <strong data-start=\"2561\" data-end=\"2606\">difference between React and React Native<\/strong> lies in their platforms: React targets browsers, while React Native targets mobile platforms using native components. Both share the same core architecture and state management practices.<\/p>\n<hr data-start=\"2796\" data-end=\"2799\" \/>\n<h2 data-start=\"100\" data-end=\"120\">\ud83d\udcda\u00a0Related Reads<\/h2>\n<ul data-start=\"122\" data-end=\"738\">\n<li data-start=\"122\" data-end=\"225\">\n<p data-start=\"124\" data-end=\"225\"><a class=\"\" href=\"https:\/\/www.wikitechy.com\/hr-interview-questions\/\" target=\"_new\" rel=\"noopener\" data-start=\"124\" data-end=\"223\">Top HR Interview Questions and Answers to Know<\/a><\/p>\n<\/li>\n<li data-start=\"226\" data-end=\"350\">\n<p data-start=\"228\" data-end=\"350\"><a class=\"\" href=\"https:\/\/www.wikitechy.com\/tutorials\/csharp\/csharp-interview-questions\" target=\"_new\" rel=\"noopener\" data-start=\"228\" data-end=\"348\">Essential C# Interview Questions for Developers<\/a><\/p>\n<\/li>\n<li data-start=\"351\" data-end=\"490\">\n<p data-start=\"353\" data-end=\"490\"><a class=\"\" href=\"https:\/\/www.kaashivinfotech.com\/blog\/experience-sql-interview-questions\/\" target=\"_new\" rel=\"noopener\" data-start=\"353\" data-end=\"488\">Advanced SQL Interview Questions for Experienced Candidates<\/a><\/p>\n<\/li>\n<li data-start=\"491\" data-end=\"631\">\n<p data-start=\"493\" data-end=\"631\"><a class=\"\" href=\"https:\/\/www.kaashivinfotech.com\/blog\/cloud-computing-interview-questions\/\" target=\"_new\" rel=\"noopener\" data-start=\"493\" data-end=\"629\">Cloud Computing Interview Questions for Beginners &amp; Experts<\/a><\/p>\n<\/li>\n<li data-start=\"632\" data-end=\"738\">\n<p data-start=\"634\" data-end=\"738\"><a class=\"\" href=\"https:\/\/www.kaashivinfotech.com\/adgajsgdgdsgd\/\" target=\"_new\" rel=\"noopener\" data-start=\"634\" data-end=\"738\">CSE Interview Questions for Computer Science Graduates<\/a><\/p>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\ud83e\udde0 React Native Interview Questions and Answers React Native is a powerful JavaScript-based mobile app framework that enables developers to build natively-rendered applications for both iOS and Android \u2014 all from a single codebase. As companies increasingly rely on React Native for cross-platform development, the demand for professionals who can confidently answer Basic React Native [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":5823,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[724],"tags":[1207,1031,729,1200,732,1201,1208,1199,1206,1203,1202,1196,1197,1198,1204,1205],"class_list":["post-3432","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-interview-questions","tag-frontend-interview-questions","tag-interview-questions-and-answers","tag-javascript-interview-questions","tag-react-interview","tag-react-interview-questions","tag-react-interview-questions-and-answers","tag-react-js-interview-questions","tag-react-native","tag-react-native-2021","tag-react-native-for-beginners","tag-react-native-interview","tag-react-native-interview-questions","tag-react-native-interview-questions-and-answers","tag-react-native-interview-questions-for-freshers","tag-react-native-tutorial","tag-react-native-tutorial-for-beginners"],"_links":{"self":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/posts\/3432","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/comments?post=3432"}],"version-history":[{"count":0,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/posts\/3432\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/media\/5823"}],"wp:attachment":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/media?parent=3432"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/categories?post=3432"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/tags?post=3432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}