<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>React Native &gt; Metasys Software Pvt Ltd.</title>
	<atom:link href="https://www.metasyssoftware.com/tag/react-native/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.metasyssoftware.com</link>
	<description>Unique People, Unique Solutions</description>
	<lastBuildDate>Mon, 10 Jun 2024 09:20:58 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://www.metasyssoftware.com/wp-content/uploads/2023/10/metasys-svg-.png</url>
	<title>React Native &gt; Metasys Software Pvt Ltd.</title>
	<link>https://www.metasyssoftware.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Why use React Native for your Enterprise Mobile App Development?</title>
		<link>https://www.metasyssoftware.com/react/why-use-react-native-for-your-enterprise-mobile-app-development/</link>
		
		<dc:creator><![CDATA[meta_prasad]]></dc:creator>
		<pubDate>Wed, 12 Apr 2023 12:45:50 +0000</pubDate>
				<category><![CDATA[React]]></category>
		<category><![CDATA[React developer]]></category>
		<category><![CDATA[React Native app development]]></category>
		<category><![CDATA[React native developer]]></category>
		<category><![CDATA[React Native app development company]]></category>
		<category><![CDATA[React Native mobile app]]></category>
		<category><![CDATA[React Native development company]]></category>
		<category><![CDATA[Enterprise Mobile Application Development]]></category>
		<category><![CDATA[React Native]]></category>
		<guid isPermaLink="false">https://www.metasyssoftware.com/?p=6058</guid>

					<description><![CDATA[<p>React Native is a JavaScript-based application development framework that allows developers to build an application that works on both Android [&#8230;]</p>
The post <a href="https://www.metasyssoftware.com/react/why-use-react-native-for-your-enterprise-mobile-app-development/">Why use React Native for your Enterprise Mobile App Development?</a> appeared first on <a href="https://www.metasyssoftware.com">Metasys Software Pvt Ltd.</a>.]]></description>
										<content:encoded><![CDATA[<div id="pl-6058"  class="panel-layout" ><div id="pg-6058-0"  class="panel-grid panel-no-style" ><div id="pgc-6058-0-0"  class="panel-grid-cell" ><div id="panel-6058-0-0-0" class="so-panel widget widget_sow-editor panel-first-child panel-last-child" data-index="0" ><div
			
			class="so-widget-sow-editor so-widget-sow-editor-base"
			
		>
<div class="siteorigin-widget-tinymce textwidget">
	<p>React Native is a JavaScript-based application development framework that allows developers to build an application that works on both Android as well as iOS platforms. React Native uses a single coding language that is recognized on iOS and Android platforms. Before the introduction of this cross-platform mobile app development framework, developers had to create a separate version of the app for both operating systems. This not only increased the time, but also the cost required for app development.</p>
<p>React native developers write an application once and port the code to another major platform, offering a fully native experience for app development. But the question is whether React Native is viable for Enterprise Mobile App Development.</p>
<p>Let's first understand enterprise mobile applications and the requirement to develop them, after which we can see how React Native helps build a great native experience for mobile platforms.</p>
<p><h2><strong>What is Enterprise Mobile App Development?</strong></h2>
</p>
<p>Large organizations need enterprise mobile app development services to ensure that they are connected round the clock. They need a trusted, portable, scalable, and engaging platform for stakeholders. The platform should enable a person working in the field to get easily connected with his/her colleague sitting in the office.</p>
<p>Most enterprise users like to use the application on mobile devices. However, some might require to use it on their laptop. As every company looks for their application to be built within a short period and without incurring huge expenses, it is important to adapt to a modern approach to enterprise mobile app development as it helps achieve both the goals. Cross-platform mobile app development is the best way to create and deploy a multi-device app, which runs on a different platform with a single code base.</p>
<p><h2><strong>How React Native meets the requirements of Enterprise Mobile Application Development</strong></h2>
</p>
<p>Large organizations or enterprises have multiple requirements to be able to exchange data from a mobile device. This is where React Native is useful.</p>
<p>Let's see what comes with the React Native framework that helps build amazing iOS and Android applications, which run on almost all devices of all sizes.</p>
<p><h3><strong>1. Readability</strong></h3>
</p>
<p>React Native is a tool created by Facebook that is favored by developers who want to make great-looking interfaces for apps that can run on both iPhones and Android phones. It was first used to make apps for iPhones, but now it also works well with web and other components.</p>
<p>React Native creates a “bridge” to the language of the device it's running on, which means apps built with it work well and have the same benefits as apps made specifically for that device, whether it's an Android, iPhone, or Windows laptop.</p>
<p><h3><strong>2. Cross-Platform Development</strong></h3>
</p>
<p>Enterprises prefer <a href="https://www.metasyssoftware.com/service/enterprise-mobile-app-development/">cross-platform mobile app development</a> as it eliminates the need for separate Android and iOS teams, which is resource-intensive, time-consuming, and requires a budget for development and maintenance on two platforms.</p>
<p>React Native, on the other hand, allows developers to use a single code base and deploy it on both android and iOS platforms. Moreover, it allows developers to save time to push new releases, bug fixes and security features through a single code base that saves a lot of time to focus on innovation instead of maintaining apps on multiple platforms.</p>
<p><h3><strong>3. Open-source</strong></h3>
</p>
<p>React Native is an open-source framework. It provides free and easy access to all advanced features to build mobile applications. Companies can save costs and maximize their ROI with this open-source framework. The savings can be used to hire good app development teams.</p>
<p><h3><strong>4. Supports External Plugins</strong></h3>
</p>
<p>Plugins not only speed up app development processes but also add value to the application. Developers no longer need to build and customize apps from scratch if they are using React Native.</p>
<p>The framework supports several popular plugins that come with certain features, which are easy to integrate with the app. It helps developers in saving time which they can utilize to create only those parts of the app, which are unique to the application. The availability of a range of third-party plugins simplifies the entire app development process.</p>
<p><h3><strong>5. Evolving Community</strong></h3>
</p>
<p>Ranked third in Git's list, React Native has a constantly evolving community helping the framework grow through regular contribution from the members. On the other hand, since it is a product of Facebook; it gets social media support as well.</p>
<p>The best minds across the world are working on the platform to improve its capabilities, fixing issues, improving features, and helping developers solve complex problems related to any project. Having the strong support of an active global community is React Native's biggest USP.</p>
<p><h3><strong>6. Programming Language</strong></h3>
</p>
<p>Finding the right talent in the development team is crucial to ensure product innovation and success. React Native framework is JavaScript-based, which is a general-purpose coding language. So, it is relatively easy to find an app developer for React Native projects and establish a team.</p>
<p>There are certain differences between web-based JavaScript and mobile-based react native code, but these commands are easy to learn.</p>
<p><h2><strong>Summing Up</strong></h2>
</p>
<p>The aforementioned benefits indicates that developing React Native applications is a viable option for enterprises. Continuous innovation and contribution to the growth of the framework is yet another reason that lets you stay ahead of the curve by leveraging advanced features, thus decreasing the time and costs involved in mobile app development.</p>
<p>On top of that, it offers a seamless experience to users on different operating systems and devices of different sizes.</p>
<p>"Looking to elevate your mobile app experience? Trust <a href="https://www.metasyssoftware.com/">MetaSys Software</a>, the leading <a href="https://www.metasyssoftware.com/technologies/react-native/">React Native app development company</a>, to create a seamless and intuitive application for your business. Contact us today and let's take your app to the next level!</p>
</div>
</div></div></div></div></div>The post <a href="https://www.metasyssoftware.com/react/why-use-react-native-for-your-enterprise-mobile-app-development/">Why use React Native for your Enterprise Mobile App Development?</a> appeared first on <a href="https://www.metasyssoftware.com">Metasys Software Pvt Ltd.</a>.]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>How to Create a React Native NPM Package?</title>
		<link>https://www.metasyssoftware.com/react/react-native-npm-package/</link>
		
		<dc:creator><![CDATA[meta_prasad]]></dc:creator>
		<pubDate>Tue, 23 Mar 2021 10:34:14 +0000</pubDate>
				<category><![CDATA[React]]></category>
		<category><![CDATA[React Native development company]]></category>
		<category><![CDATA[React Native NPM package]]></category>
		<category><![CDATA[Node.js]]></category>
		<category><![CDATA[React Native debugger]]></category>
		<category><![CDATA[React native app development React developer]]></category>
		<category><![CDATA[React developers]]></category>
		<category><![CDATA[React development services]]></category>
		<category><![CDATA[React Native]]></category>
		<category><![CDATA[Outsourcing React services]]></category>
		<category><![CDATA[React native developer]]></category>
		<category><![CDATA[Outsourcing React development]]></category>
		<category><![CDATA[React app builder]]></category>
		<category><![CDATA[React Native app development company]]></category>
		<category><![CDATA[React Native mobile app]]></category>
		<guid isPermaLink="false">https://www.metasyssoftware.com/?p=3511</guid>

					<description><![CDATA[<p>NPM is a Package Manager for Node JS. It was first created in 2009 as an open-source project to help [&#8230;]</p>
The post <a href="https://www.metasyssoftware.com/react/react-native-npm-package/">How to Create a React Native NPM Package?</a> appeared first on <a href="https://www.metasyssoftware.com">Metasys Software Pvt Ltd.</a>.]]></description>
										<content:encoded><![CDATA[<p>NPM is a Package Manager for Node JS. It was first created in 2009 as an open-source project to help JavaScript developers to easily share their code in the form of packages. NPM allows you to install the various public packages for the project. NPM has over 8,00,000 packages with public access.</p>
<p>My intention behind writing this blog is to help <a href="https://www.metasyssoftware.com/react-native-app-development/">React-native developers</a> create their own package. If any developer wants to share his own package on the NPM registry, then he needs to make it public. This allows developers to contribute to the NPM ecosystem. Steps to create and publish a react-native NPM package are as follows:</p>
<p><strong>There are 3 phases to create and publish a package.</strong></p>
<p>1. Creating the NPM package.<br />
2. Testing the NPM package on the react-native app.<br />
3. Publishing on the NPM website.</p>
<p><strong>1. Creating the NPM package:</strong></p>
<p>First create a folder where package information like package.json, .babelrc, webpack.config.js, etc will be stored. We will introduce these files soon.</p>
<p>Now navigate into that folder directory using terminal and run command &#8211; npm init</p>
<p>You will be prompted for the package name, version, main, keyword, etc. You can skip questions (by pressing enter) (it is easy to modify later). At this point, a package.json file will be created.</p>
<p>Now, open the package.json file in your IDE (code editor) and install all the dependencies as below using &#8211; npm install dependency-name.</p>
<p>Below is an example of package.json file.</p>
<p><img fetchpriority="high" decoding="async" class="aligncenter wp-image-3512 size-full" title="Package JSON " src="https://www.metasyssoftware.com/wp-content/uploads/Package-JSON-1.png" alt="Package JSON " width="533" height="581" /></p>
<p>Note: “main&#8221; should be the same as above.</p>
<p>Now create a file .babelrc and add the following lines. Babel is a compiler to convert JavaScript code into ES5 JavaScript.</p>
<p><img decoding="async" class="aligncenter wp-image-3513 size-full" title="React Native image " src="https://www.metasyssoftware.com/wp-content/uploads/React-Native-image-2.png" alt="React Native image " width="689" height="120" /></p>
<p>Let’s create a file named webpack.config.js and add the lines below.<br />
Remember, webpack is the builder. It compresses code into &#8216;build&#8217; that can be deployed in the React-Native app. Make sure “entry” is either ./src/index.js or ./index.js depending upon your file structure.</p>
<p><img decoding="async" class="aligncenter wp-image-3514 size-full" title="webpack " src="https://www.metasyssoftware.com/wp-content/uploads/webpack-3.png" alt="webpack " width="808" height="606" /></p>
<p>Now, create a folder src, add the index.js file and add your component.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-3515 size-full" title="src image" src="https://www.metasyssoftware.com/wp-content/uploads/src-4.png" alt="src image" width="757" height="364" /></p>
<p>Whenever you make any change to your package, you have to create the build again using command &#8211; npm run build. After that, you must re-install it in the react-native app.</p>
<p>Once you configure the above steps, your folder structure should look as follows</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-3516 size-full" title="React test library " src="https://www.metasyssoftware.com/wp-content/uploads/React-test-library-5.png" alt="React test library " width="348" height="330" /></p>
<p><strong>2. Testing the package on React-Native app:</strong></p>
<p>To test or use your package, you will need a React-Native app. Create a <a href="https://www.metasyssoftware.com/case-study-react-native/">React-Native</a> app by executing the run command npm create-react-app “your app name” and open it in your IDE.</p>
<p>You can install your package in two ways</p>
<p>1. Upload it on the NPM website and then install it using npm i “package name”.<br />
2. Locally install it through a relative path of NPM package to react-native app npm i ../react-test-library</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-3518 size-full" title="React Native " src="https://www.metasyssoftware.com/wp-content/uploads/React-Naive-9.png" alt="React Native " width="213" height="70" /></p>
<p>Note: We will try to avoid the first option because whenever there is any change in your NPM package, you have to re-publish it on the NPM website and re-install it on your project.</p>
<p>So we will test it locally first and then upload it on the NPM website.</p>
<p>To check your package, you have to install it through the relative path as shown in the above example and import your component from your package.</p>
<p>src/App.js</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-3519 size-full" title="src " src="https://www.metasyssoftware.com/wp-content/uploads/src-6-1.png" alt="src " width="550" height="343" /></p>
<p>To see the result of the installed package, run the command in your react-native app &#8211; npm start.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-3520 size-full" title="npm package " src="https://www.metasyssoftware.com/wp-content/uploads/npm-package-7.png" alt="npm package " width="422" height="128" /></p>
<p>Now, let’s see the final step.</p>
<p><strong>3. Publishing on the NPM website:</strong></p>
<p>For publishing any package, you should have an account on the NPM website (if not you can create one). While uploading the same package, the package version should be unique each time.</p>
<p>Steps to upload your package &#8211;</p>
<p>1. Using the terminal, navigate to your package directory.<br />
2. Run command &#8211; npm login. Enter a username, password, and email id.<br />
3. Run command &#8211; npm publish.</p>
<p>Once your package has been published, you can check it on the NPM website.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-3521 size-full" title="React test library " src="https://www.metasyssoftware.com/wp-content/uploads/React-test-library-8.png" alt="React test library " width="600" height="114" /></p>
<p>At last, you are able to create your own library. In case of any queries feel free to share your feedback in the comments section below.</p>
<p>Happy Coding…</p>The post <a href="https://www.metasyssoftware.com/react/react-native-npm-package/">How to Create a React Native NPM Package?</a> appeared first on <a href="https://www.metasyssoftware.com">Metasys Software Pvt Ltd.</a>.]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Flutter vs React Native</title>
		<link>https://www.metasyssoftware.com/react/flutter-vs-react-native/</link>
					<comments>https://www.metasyssoftware.com/react/flutter-vs-react-native/#respond</comments>
		
		<dc:creator><![CDATA[meta_prasad]]></dc:creator>
		<pubDate>Thu, 03 Sep 2020 08:37:41 +0000</pubDate>
				<category><![CDATA[React]]></category>
		<category><![CDATA[React Native]]></category>
		<category><![CDATA[React developer]]></category>
		<category><![CDATA[React Native app development]]></category>
		<category><![CDATA[React native developer]]></category>
		<category><![CDATA[React mobile app development]]></category>
		<category><![CDATA[React technology]]></category>
		<category><![CDATA[React Native app development company]]></category>
		<category><![CDATA[Offshore React Native development services]]></category>
		<category><![CDATA[React Native app developer]]></category>
		<guid isPermaLink="false">https://www.metasyssoftware.com/?p=3203</guid>

					<description><![CDATA[<p>Many new technologies have evolved because of the increasing demand for cross-platform products. Facebook’s React Native and Google’s Flutter have [&#8230;]</p>
The post <a href="https://www.metasyssoftware.com/react/flutter-vs-react-native/">Flutter vs React Native</a> appeared first on <a href="https://www.metasyssoftware.com">Metasys Software Pvt Ltd.</a>.]]></description>
										<content:encoded><![CDATA[<p>Many new technologies have evolved because of the increasing demand for cross-platform products. Facebook’s <strong>React Native</strong> and Google’s <strong>Flutter </strong>have created a lot of buzz in the cross-platform app development market. These two trending technologies are both known for high performance, and many enterprises and big brands are embracing them to come out with value-driven web and mobile applications.</p>
<p>React Native and Flutter are currently competing with each other to become the leading product, and although both have their advantages, it is not yet clear which one will come out on top. This article compares the technologies by examining their features, and their respective advantages and disadvantages. We hope this can help you in choosing which technology to use for your application.</p>
<p>Before looking at the technical differences, let us briefly have a look at their positions in the market so far. In order to do this, we can use Google trends to look at the interest in the technologies since 2015, when <a href="https://www.metasyssoftware.com/react">React Native</a> was launched.</p>
<p><img loading="lazy" decoding="async" class="wp-image-3204 size-full aligncenter" title="Google Trends comparison 1" src="https://stage.metasyssoftware.com/wp-content/uploads/Google-Trends-comparison-1.png" alt="Google Trends comparison 1" width="642" height="533" /></p>
<p>The trend shows that both technologies have been gaining popularity steadily, and that although React Native is much older, Flutter is catching up quickly.</p>
<p><strong>About Flutter</strong></p>
<ul>
<li>Flutter is a free, open-source portable UI toolkit for creating web, desktop, and natively compiled mobile apps in a single codebase.</li>
<li>It was created by Google in 2017.</li>
<li>It uses a language named Dart.</li>
</ul>
<p><strong> </strong><strong>About React Native</strong></p>
<ul>
<li>React Native is also a free, open-source mobile application framework.</li>
<li>It enables the developers to use its parent framework React with the native platform.</li>
<li>React was created by Facebook in March 2015.</li>
<li>React Native is virtually identical to React.</li>
</ul>
<p><strong>Head to head comparison between Flutter and React Native</strong></p>
<p><img loading="lazy" decoding="async" class="size-full aligncenter" title="Flutter vs React Native comparison" src="https://www.metasyssoftware.com/wp-content/uploads/Flutter-vs-React-Native-comparison.png" alt="Flutter vs React Native comparison" width="854" height="704" /></p>
<p>Let’s list a few of the major advantages and disadvantages of each technology.</p>
<p><strong><u>Flutter</u></strong></p>
<p>Advantages:</p>
<ul>
<li>Fast apps</li>
<li>User-friendly design</li>
<li>Perfect for MVC structure</li>
</ul>
<p>Disadvantages:</p>
<ul>
<li>Large Apps can be difficult to program</li>
<li>Limited libraries in comparison with React Native</li>
<li>Currently small developer community (though growing)</li>
</ul>
<p><strong><u>React Native</u></strong></p>
<p>Advantages:</p>
<ul>
<li>Active large community</li>
<li>Uses widely popular JavaScript language</li>
<li>Robust Performance</li>
<li>Easy to learn</li>
</ul>
<p>Disadvantages:</p>
<ul>
<li>Lots of abandoned libraries and packages</li>
<li>App size is bigger than Natively developed Apps</li>
<li>Fewer testing features compared to Flutter</li>
</ul>
<p><strong>Which technology should we choose in 2020?</strong></p>
<p>React Native has a huge base of achievements to showcase its success in the market, compared to the new player. However, Flutter has a lot of potential and as of now there is a chance that it can become the leading technology for cross platform mobile app development and web applications. We hope that this article has highlighted some of the key differences and can help you choose the best technology for your app development.</p>
<p style="text-align: center;">Happy Coding…</p>The post <a href="https://www.metasyssoftware.com/react/flutter-vs-react-native/">Flutter vs React Native</a> appeared first on <a href="https://www.metasyssoftware.com">Metasys Software Pvt Ltd.</a>.]]></content:encoded>
					
					<wfw:commentRss>https://www.metasyssoftware.com/react/flutter-vs-react-native/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>React Redux &#8211; The art of state management</title>
		<link>https://www.metasyssoftware.com/react/react-redux-the-art-of-state-management/</link>
					<comments>https://www.metasyssoftware.com/react/react-redux-the-art-of-state-management/#respond</comments>
		
		<dc:creator><![CDATA[meta_prasad]]></dc:creator>
		<pubDate>Thu, 27 Aug 2020 13:42:18 +0000</pubDate>
				<category><![CDATA[React]]></category>
		<category><![CDATA[Outsourcing React development]]></category>
		<category><![CDATA[React JS]]></category>
		<category><![CDATA[Offshore React services]]></category>
		<category><![CDATA[React Redux]]></category>
		<category><![CDATA[Outsourcing React development company]]></category>
		<category><![CDATA[React Native]]></category>
		<category><![CDATA[React developer]]></category>
		<category><![CDATA[React JS development company]]></category>
		<category><![CDATA[React Native app development]]></category>
		<category><![CDATA[React native developer]]></category>
		<category><![CDATA[React web app]]></category>
		<category><![CDATA[React mobile development company]]></category>
		<category><![CDATA[Outsourcing React services]]></category>
		<guid isPermaLink="false">https://www.metasyssoftware.com/?p=3182</guid>

					<description><![CDATA[<p>React is one of the most popular technologies for front-end development, which uses a component based approach to enable fast [&#8230;]</p>
The post <a href="https://www.metasyssoftware.com/react/react-redux-the-art-of-state-management/">React Redux – The art of state management</a> appeared first on <a href="https://www.metasyssoftware.com">Metasys Software Pvt Ltd.</a>.]]></description>
										<content:encoded><![CDATA[<p><strong>React</strong> is one of the most popular technologies for front-end development, which uses a component based approach to enable fast app development. <strong>Redux</strong> is a predictable state container for JS apps, and works particularly well with React.  In this article, I will be covering some basics on how to set up React-Redux for state management of a UI.</p>
<p>To illustrate the advantages of this approach, have a look at the UI structure shown below.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-3183 size-full" title="UI structure image 1" src="https://www.metasyssoftware.com/wp-content/uploads/2022/07/RRAM_1.png" alt="UI structure image 1" width="643" height="361" /></p>
<p>Let’s say the functionality required is that when a user interacts with the big component, the application has to update the small component and the header. In other words, we need to sync the header and small component as well as manage the states of all the other components. Without a state management library such as the one provided by Redux, coding this implementation can easily become very complicated.</p>
<p>Using the state functionality in React allows only the use of local, component level states.</p>
<p><img loading="lazy" decoding="async" class="size-full wp-image-3184 aligncenter" src="https://www.metasyssoftware.com/wp-content/uploads/2022/07/RRAM_2.png" alt="Image 2" width="252" height="52" /></p>
<p>You can store the states using setState method, and fetch the stored state using state.[STATE_NAME]. However, these states are local, and only available within the class component in which it is declared.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-3185 size-full" title="Setstate image3" src="https://www.metasyssoftware.com/wp-content/uploads/2022/07/RRAM_3.png" alt="Setstate image3" width="575" height="133" /></p>
<p>To store the states at the application level, i.e. the global level, in order to access them from different components, we can use React-Redux.</p>
<p><strong><u>Let’s see how React-Redux works</u></strong></p>
<p>You will see three main elements in the Redux architecture – Store, Dispatch Actions and Reducers.</p>
<p><img loading="lazy" decoding="async" class="size-full wp-image-3186 aligncenter" src="https://www.metasyssoftware.com/wp-content/uploads/2022/07/RRAM_4.png" alt="Redux architecture 4" width="642" height="319" /></p>
<p><strong>Store</strong>: holds the states at the application level, and allows any component to get data from the store in the form of Redux States.</p>
<p><strong>Dispatch Action:</strong> a function of the Redux Store to trigger a state change.</p>
<p><strong>Reducers</strong>: It handles the value change in Redux State.</p>
<p><strong><u>How to configure React Redux in a React JS project –</u></strong></p>
<p>The following packages are needed to be installed to configure  Redux in the project &#8211;</p>
<ol>
<li><strong>Redux</strong>: the core package of React Redux.</li>
<li><strong>React-redux:</strong> needed for React bindings.</li>
<li><strong>Redux-thunk: </strong>a middleware which allows you to call action creators, and which returns a function instead of the action object.</li>
</ol>
<p>These dependencies can be installed by using the following NPM command &#8211;<br />
“<strong>npm install redux react-redux redux-thunk &#8211;save</strong>”</p>
<p>After these dependencies are installed, a store can be created and initialized with data/null values as per the requirements. This can be done by creating the file store.js in the project.</p>
<p>First however, you need to create reducer.js to handle the next states. Below is the example of reducer.js to initialize the state. Here, it is just returning the initial value from the reducer.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-3187 size-full" title="reducer.js 5" src="https://www.metasyssoftware.com/wp-content/uploads/2022/07/RRAM_5.png" alt="reducer.js 5" width="447" height="150" /></p>
<p>Below is a slightly more complex example of the code in reducer.js to update the states based on the action executed from the component.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-3188 size-full" title="coding 6" src="https://www.metasyssoftware.com/wp-content/uploads/2022/07/RRAM_6.png" alt="coding 6" width="425" height="261" /></p>
<p>In the above example, it adds the data to the state upon the dispatch action (ADD_DATA). Now let’s create the action to dispatch. You can create a file with the name action.js, that contains the code shown below.</p>
<p><img loading="lazy" decoding="async" class="size-full wp-image-3189 aligncenter" src="https://www.metasyssoftware.com/wp-content/uploads/2022/07/RRAM_7.png" alt="action.js 7" width="379" height="113" /></p>
<p>Once the action is created, now you can create a store and then connect the store to the application. You can create a file with the name store.js, that contains the code shown below.</p>
<p><img loading="lazy" decoding="async" class="wp-image-3190 size-full aligncenter" title="store.js 8" src="https://www.metasyssoftware.com/wp-content/uploads/2022/07/RRAM_8.png" alt="store.js 8" width="478" height="251" /></p>
<p>To connect the store to the application, you will have to use the entry point. In the index.js (i.e. entry point of the app), import the store as shown below &#8211;</p>
<p><img loading="lazy" decoding="async" class="size-full wp-image-3191 aligncenter" src="https://www.metasyssoftware.com/wp-content/uploads/2022/07/RRAM_9.png" alt="coding 9" width="367" height="249" /></p>
<p>These are all the Redux configurations for an application. Refer the the image below to use it in your component –</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-3192 size-full" title="React component 10" src="https://www.metasyssoftware.com/wp-content/uploads/2022/07/RRAM_10.png" alt="React component 10" width="642" height="671" /></p>
<p><a href="https://www.metasyssoftware.com/react">React Redux</a> can handle large amounts of data at the application level with cleaner components and is particularly useful for big applications.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-3193 size-full" title="Without Redux 11" src="https://www.metasyssoftware.com/wp-content/uploads/2022/07/RRAM_11.png" alt="Without Redux 11" width="336" height="317" /></p>
<p><img loading="lazy" decoding="async" class="wp-image-3194 size-full aligncenter" title="With Redux 12" src="https://www.metasyssoftware.com/wp-content/uploads/2022/07/RRAM_12.png" alt="With Redux 12" width="336" height="288" /></p>
<p>Without redux, to transfer data from component 1 to component 5, you need to pass it through middle components. This increases the props for components and creates more complexity and the components are less clean.</p>
<p>Using React-Redux, you can get or set the data to the store from any of the components directly by mapping the redux states to component props. In this case, you do not need to pass props to the middle components. This allows for much cleaner components and increased clarity in the code.</p>
<p>If you are looking to build a mobile or web application using React technology, then please feel free to contact us.</p>The post <a href="https://www.metasyssoftware.com/react/react-redux-the-art-of-state-management/">React Redux – The art of state management</a> appeared first on <a href="https://www.metasyssoftware.com">Metasys Software Pvt Ltd.</a>.]]></content:encoded>
					
					<wfw:commentRss>https://www.metasyssoftware.com/react/react-redux-the-art-of-state-management/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Bluetooth Low Energy (BLE) technology usage and its communication with mobile devices</title>
		<link>https://www.metasyssoftware.com/react/bluetooth-low-energy-ble-technology-usage-and-its-communication-with-mobile-devices/</link>
					<comments>https://www.metasyssoftware.com/react/bluetooth-low-energy-ble-technology-usage-and-its-communication-with-mobile-devices/#respond</comments>
		
		<dc:creator><![CDATA[meta_prasad]]></dc:creator>
		<pubDate>Wed, 04 Mar 2020 07:18:21 +0000</pubDate>
				<category><![CDATA[React]]></category>
		<category><![CDATA[React developers]]></category>
		<category><![CDATA[React Native]]></category>
		<category><![CDATA[BLE]]></category>
		<category><![CDATA[BlueTooth]]></category>
		<category><![CDATA[React Native developers]]></category>
		<category><![CDATA[React Native development]]></category>
		<category><![CDATA[React Native app developer]]></category>
		<category><![CDATA[Offshore React Native development company]]></category>
		<category><![CDATA[React Native development services]]></category>
		<guid isPermaLink="false">https://www.metasyssoftware.com/?p=2952</guid>

					<description><![CDATA[<p>BLE is a wireless technology for a personal area network that is designed and marketed by the Bluetooth Special Interest [&#8230;]</p>
The post <a href="https://www.metasyssoftware.com/react/bluetooth-low-energy-ble-technology-usage-and-its-communication-with-mobile-devices/">Bluetooth Low Energy (BLE) technology usage and its communication with mobile devices</a> appeared first on <a href="https://www.metasyssoftware.com">Metasys Software Pvt Ltd.</a>.]]></description>
										<content:encoded><![CDATA[<div id="pl-2952" class="panel-layout">
<div id="pg-2952-0" class="panel-grid panel-no-style">
<div id="pgc-2952-0-0" class="panel-grid-cell" data-weight="1">
<div id="panel-2952-0-0-0" class="so-panel widget widget_sow-editor panel-first-child panel-last-child" data-index="0" data-style="{&quot;background_image_attachment&quot;:false,&quot;background_display&quot;:&quot;tile&quot;,&quot;cvw_duration&quot;:&quot;300&quot;,&quot;cvw_easing&quot;:&quot;linear&quot;,&quot;cvw_anchor&quot;:&quot;top-bottom&quot;,&quot;cvw_repeat&quot;:&quot;true&quot;,&quot;iw-visible-screen&quot;:&quot;iw-all&quot;,&quot;iw-visible-layout&quot;:&quot;iw-all&quot;}">
<div class="so-widget-sow-editor so-widget-sow-editor-base">
<div class="siteorigin-widget-tinymce textwidget">
<style><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start">﻿</span>ul, ol { list-style: none; }</style>
<p>BLE is a wireless technology for a personal area network that is designed and marketed by the Bluetooth Special Interest Group. It is a low power-consuming device which maintains the same communication range as that of Bluetooth classic. It is mainly used in small and low power consumption devices such as a, smartwatch, BLE keychain, true wireless Bluetooth earphones, etc.  It is compatible with most of the mobile phones, tablets, and computers.</p>
<p>In this article, we will share how a BLE device works and how it communicates with Android and iOS devices for transferring and receiving information/data. But prior to that, let’s try to understand where BLE technology is used.<br />
<img loading="lazy" decoding="async" class="alignnone wp-image-3019" title="BLE" src="https://www.metasyssoftware.com/wp-content/uploads/2022/06/ble2.jpg" alt="BLE " width="531" height="313" /></p>
<ol>
<li><strong>1. Device Tracking:</strong> BLE device is a tiny device that can transmit the data. It consumes very low power and can be used to track the assets and people within a range of 30 meters.</li>
<li><strong>2. Machinery Diagnosis using BLE:</strong> Machine Diagnostics is possible through BLE. BLE can be integrated into the machines and used to transfer data. All key statistics as well as detailed diagnosis-related data can be retrieved from machines and transmitted to mobile devices/computers for detailed analysis.</li>
<li><strong>3. BLE Proximity real-time location: </strong>BLE devices are capable of broadcasting radio signals at regular intervals. These signals can be captured by any mobile device (Android, iOS or any other compatible devices). The mobile application can then establish or pinpoint the BLE location.</li>
<li><strong>4. Better retail experience:</strong> Marketers can enhance the shopping experience by attaching BLE enabled tags to products. When customers are in the vicinity of the store, they would get the latest offers/coupons/discounts for these products on their mobile app.</li>
<li><strong>5. Locating people: </strong>BLE technology can be effectively used in events where you need to coordinate with different people within a particular facility.</li>
<li><strong>6. Home Automation Systems: </strong>BLE is used in Home Automation Systems because of its low power consumption and low cost.</li>
<li><strong>7. Health monitoring system: </strong>BLE is the best choice for health monitoring systems like fitness bands. It collects information from the human and animal body and transfers data to the mobile device using a Bluetooth connection. Since it has a low power consumption feature, it can be easily integrated with small handheld devices for better battery usage.</li>
</ol>
<p>There are different steps involved for searching BLE peripherals, establishing the connection, writing and reading characteristics. They are as follows:</p>
<ul>
<li><strong>1. Scan nearby BLE peripherals:</strong> To get all available nearby BLE peripheral.<br />
<code> manager.startScan( ).then(availableBLEPeripherals =&amp;gt{<br />
console.log( availableBLEPeripherals );<br />
}).catch(error =&gt; {<br />
handleError( error );<br />
})</code></li>
</ul>
<p>&nbsp;</p>
<ol>
<li><strong>2. Connection and Disconnection:</strong>
<ol>
<li style="list-style-type: none;">
<ol>
<li><code> a. To connect the BLE peripheral:<br />
manager.connectBle( peripheral ).then( peripheral =&gt; {<br />
console.log( “Connected peripheral :-”, peripheral );<br />
}).catch( error =&gt; {<br />
handleError( error );<br />
})</code></li>
</ol>
</li>
</ol>
<p>&nbsp;</p>
<ol>
<li style="list-style-type: none;">
<ol>
<li><code> b. To disconnect the BLE peripheral:<br />
manager.disconnectBle( peripheral )then( peripheral =&gt; {<br />
console.log( “Disconnected peripheral :-”, peripheral );<br />
}).catch( error =&gt; {<br />
handleError( error );<br />
})</code></li>
</ol>
</li>
</ol>
<p>&nbsp;</li>
<li><strong>3. Start listening for incoming data:</strong>
<ol>
<li style="list-style-type: none;">
<ol>
<li><code> a. To get all the incoming data from BLE:<br />
manager.monitorBle( peripheral.id, peripheral.characteristics).then( ( response ) =&gt; {<br />
console.log( response );<br />
}).catch( error =&gt; {<br />
handleError( error );<br />
})</code></li>
</ol>
</li>
</ol>
<p>&nbsp;</li>
<li><strong>4. Write characteristic:</strong>
<ol>
<li style="list-style-type: none;">
<ol>
<li><code> a. To fire query to BLE peripheral:<br />
manager.writeData( peripheral.id, peripheral.service, peripheral.characteristics, dataToSend ).then( response =&gt; {<br />
console.log( response );<br />
}).catch(error =&gt; {<br />
handleError( error );<br />
})</code></li>
</ol>
</li>
</ol>
<p>&nbsp;</li>
</ol>
<p>MetaSys Software has developed custom mobile solutions for clients who are in different sectors using React Native technology. For more information on our React Native app development projects &#8211; <a href="https://www.metasyssoftware.com/react">https://www.metasyssoftware.com/react</a></p>
<p>&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
</div>The post <a href="https://www.metasyssoftware.com/react/bluetooth-low-energy-ble-technology-usage-and-its-communication-with-mobile-devices/">Bluetooth Low Energy (BLE) technology usage and its communication with mobile devices</a> appeared first on <a href="https://www.metasyssoftware.com">Metasys Software Pvt Ltd.</a>.]]></content:encoded>
					
					<wfw:commentRss>https://www.metasyssoftware.com/react/bluetooth-low-energy-ble-technology-usage-and-its-communication-with-mobile-devices/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
