{"id":8850,"date":"2018-07-25T14:18:37","date_gmt":"2018-07-25T14:18:37","guid":{"rendered":"https:\/\/www.uruit.com\/blog\/?p=8850"},"modified":"2023-05-31T09:21:51","modified_gmt":"2023-05-31T12:21:51","slug":"xamarin-vs-react-native","status":"publish","type":"post","link":"https:\/\/uruit.com\/blog\/xamarin-vs-react-native\/","title":{"rendered":"Xamarin vs React Native: the complete guide"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_17 counter-hierarchy counter-decimal ez-toc-grey\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" style=\"display: none;\"><i class=\"ez-toc-glyphicon ez-toc-icon-toggle\"><\/i><\/a><\/span><\/div>\n<nav><ul class=\"ez-toc-list ez-toc-list-level-1\"><li class=\"ez-toc-page-1 ez-toc-heading-level-1\"><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/uruit.com\/blog\/xamarin-vs-react-native\/#Xamarin_vs_React_Native_the_complete_guide\" title=\"Xamarin vs React Native: the complete guide\">Xamarin vs React Native: the complete guide<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-1\"><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/uruit.com\/blog\/xamarin-vs-react-native\/#Xamarin_vs_React_Native_the_complete_guide-2\" title=\"Xamarin vs React Native: the complete guide\">Xamarin vs React Native: the complete guide<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/uruit.com\/blog\/xamarin-vs-react-native\/#Learning_curve\" title=\"Learning curve\">Learning curve<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/uruit.com\/blog\/xamarin-vs-react-native\/#Development_environment_options\" title=\"Development environment options\">Development environment options<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/uruit.com\/blog\/xamarin-vs-react-native\/#What_is_the_recommended_development_environment_for_Xamarin\" title=\"What is the recommended development environment for Xamarin?\">What is the recommended development environment for Xamarin?<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/uruit.com\/blog\/xamarin-vs-react-native\/#What_is_the_recommended_development_environment_for_React_Native\" title=\"What is the recommended development environment for React Native?\">What is the recommended development environment for React Native?<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/uruit.com\/blog\/xamarin-vs-react-native\/#Xamarin_vs_React_Native_communities_and_access_to_support\" title=\"Xamarin vs React Native: communities and access to support\">Xamarin vs React Native: communities and access to support<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/uruit.com\/blog\/xamarin-vs-react-native\/#Ready-made_components_for_both_mobile_development_platforms\" title=\"Ready-made components for both mobile development platforms\">Ready-made components for both mobile development platforms<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/uruit.com\/blog\/xamarin-vs-react-native\/#Comparing_Xamarin_and_React_Native_compilation_time_and_development_speed\" title=\"Comparing Xamarin and React Native compilation time and development speed\">Comparing Xamarin and React Native compilation time and development speed<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/uruit.com\/blog\/xamarin-vs-react-native\/#Code_deployment_and_app_performance\" title=\"Code deployment and app performance\">Code deployment and app performance<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/uruit.com\/blog\/xamarin-vs-react-native\/#There_are_two_optimization_techniques_for_the_compilation_process_in_order_to_improve_performance\" title=\"There are two optimization techniques for the compilation process in order to improve performance:\">There are two optimization techniques for the compilation process in order to improve performance:<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/uruit.com\/blog\/xamarin-vs-react-native\/#Testing_your_React_Native_or_Xamarin_app\" title=\"Testing your React Native or Xamarin app\">Testing your React Native or Xamarin app<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/uruit.com\/blog\/xamarin-vs-react-native\/#What_are_the_best_tools_to_test_Xamarin_apps\" title=\"What are the best tools to test Xamarin apps?\">What are the best tools to test Xamarin apps?<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/uruit.com\/blog\/xamarin-vs-react-native\/#What_are_the_best_tools_to_test_React_Native_apps\" title=\"What are the best tools to test React Native apps?\">What are the best tools to test React Native apps?<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/uruit.com\/blog\/xamarin-vs-react-native\/#Designing_aspects_of_your_mobile_cross-development_project\" title=\"Designing aspects of your mobile cross-development project\">Designing aspects of your mobile cross-development project<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/uruit.com\/blog\/xamarin-vs-react-native\/#Native_look_and_feel\" title=\"Native look and feel\">Native look and feel<\/a><\/li><\/ul><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/uruit.com\/blog\/xamarin-vs-react-native\/#How_can_all_of_this_affect_your_project\" title=\"How can all of this affect your project?\">How can all of this affect your project?<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/uruit.com\/blog\/xamarin-vs-react-native\/#About_us\" title=\"About us\">About us<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"Xamarin_vs_React_Native_the_complete_guide\"><\/span><span data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;Xamarin vs React Native: the complete guide&quot;}\" data-sheets-userformat=\"{&quot;2&quot;:15231,&quot;3&quot;:{&quot;1&quot;:0},&quot;4&quot;:{&quot;1&quot;:2,&quot;2&quot;:16777215},&quot;5&quot;:{&quot;1&quot;:[{&quot;1&quot;:2,&quot;2&quot;:0,&quot;5&quot;:{&quot;1&quot;:2,&quot;2&quot;:0}},{&quot;1&quot;:0,&quot;2&quot;:0,&quot;3&quot;:3},{&quot;1&quot;:1,&quot;2&quot;:0,&quot;4&quot;:1}]},&quot;6&quot;:{&quot;1&quot;:[{&quot;1&quot;:2,&quot;2&quot;:0,&quot;5&quot;:{&quot;1&quot;:2,&quot;2&quot;:0}},{&quot;1&quot;:0,&quot;2&quot;:0,&quot;3&quot;:3},{&quot;1&quot;:1,&quot;2&quot;:0,&quot;4&quot;:1}]},&quot;7&quot;:{&quot;1&quot;:[{&quot;1&quot;:2,&quot;2&quot;:0,&quot;5&quot;:{&quot;1&quot;:2,&quot;2&quot;:0}},{&quot;1&quot;:0,&quot;2&quot;:0,&quot;3&quot;:3},{&quot;1&quot;:1,&quot;2&quot;:0,&quot;4&quot;:1}]},&quot;8&quot;:{&quot;1&quot;:[{&quot;1&quot;:2,&quot;2&quot;:0,&quot;5&quot;:{&quot;1&quot;:2,&quot;2&quot;:0}},{&quot;1&quot;:0,&quot;2&quot;:0,&quot;3&quot;:3},{&quot;1&quot;:1,&quot;2&quot;:0,&quot;4&quot;:1}]},&quot;9&quot;:0,&quot;11&quot;:3,&quot;12&quot;:0,&quot;14&quot;:{&quot;1&quot;:2,&quot;2&quot;:0},&quot;15&quot;:&quot;Calibri&quot;,&quot;16&quot;:11}\">Xamarin vs React Native: the complete guide<\/span><span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p><span style=\"font-weight: 400;\">We all know the <\/span><a href=\"https:\/\/uruit.com\/blog\/three-reasons-we-love-xamarin\/\"><span style=\"font-weight: 400;\">benefits of building a cross-platform app<\/span><\/a><span style=\"font-weight: 400;\"> over a native one. By using a cross-platform framework, we have a \u201c2 for the price of 1\u201d situation: developers are able to reuse code for both systems, iOS, and Android, which minimizes the project\u2019s duration, expenses and time to market. However, there are several options for cross-platform frameworks. Have you already decided which one is the best for <a href=\"https:\/\/uruit.com\/outsourcing-mobile-development\">developing your mobile product<\/a>?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Two of the most popular cross-platform mobile development frameworks nowadays are <strong>Xamarin and React Native<\/strong>. They\u2019ve become more known especially because of the buzzing communities of developers built around them. In order to discuss their differences and consider which technology is the best for different contexts, we gathered two developers from UruIT who are part of these communities.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Rodrigo is a Xamarin dev, while Andrea has experience working with React Native. In this post, we list the most important aspects of a mobile software development project and what you can expect from React Native and Xamarin, based on our devs\u2019 experience. The main conclusion that we can already tell you: <strong>there is no \u201cbest technology,\u201d only different characteristics that can better fit one project over another.<\/strong> Find out which suits yours!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s get into our Xamarin vs React Native comparison!<\/span><\/p>\n<h1><span class=\"ez-toc-section\" id=\"Xamarin_vs_React_Native_the_complete_guide-2\"><\/span>Xamarin vs React Native: the complete guide<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<figure id=\"attachment_7724\" aria-describedby=\"caption-attachment-7724\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" class=\"wp-image-7724 size-large\" src=\"https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/04\/DSC_1408_limpio-min-1024x681.jpg\" alt=\"using visual studio\" width=\"640\" height=\"426\" srcset=\"https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/04\/DSC_1408_limpio-min-1024x681.jpg 1024w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/04\/DSC_1408_limpio-min-300x199.jpg 300w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/04\/DSC_1408_limpio-min-768x510.jpg 768w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/04\/DSC_1408_limpio-min-1536x1021.jpg 1536w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/04\/DSC_1408_limpio-min-750x498.jpg 750w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/04\/DSC_1408_limpio-min-1140x758.jpg 1140w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/04\/DSC_1408_limpio-min-20x13.jpg 20w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/04\/DSC_1408_limpio-min.jpg 1920w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-7724\" class=\"wp-caption-text\">UruIT&#8217;s mobile developer<\/figcaption><\/figure>\n<h3><span class=\"ez-toc-section\" id=\"Learning_curve\"><\/span><span style=\"font-weight: 400;\">Learning curve<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">As Rodrigo had previous experience with CSharp and XAML, his shift to Xamarin wasn\u2019t difficult. <\/span><b>If your dev team works with the same foundations or has any experience with .NET, it\u2019ll be quick and easy to learn Xamarin. <\/b><\/p>\n<p><span style=\"font-weight: 400;\">In order to learn React Native, <\/span><b>if your dev team has experience with any JavaScript technology, they are ready to go<\/b><span style=\"font-weight: 400;\">. The transition can be even smoother for those who know React. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">However, Andrea warns that any app in <\/span><b>React Native will require several complementary libraries to be developed<\/b><span style=\"font-weight: 400;\">. She explains that there\u2019s no combination of libraries that will work for every project or every developer. This means that React Native devs are used to learning and digging into new libraries constantly. <\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Development_environment_options\"><\/span><span style=\"font-weight: 400;\">Development environment options<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Both React Native and Xamarin are <\/span><b>open source frameworks<\/b><span style=\"font-weight: 400;\">, so your team will have no problem finding and downloading either. The differences first appear when setting up the development environment:<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"What_is_the_recommended_development_environment_for_Xamarin\"><\/span><span style=\"font-weight: 400;\">What is the recommended development environment for Xamarin?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">In the beginning, Xamarin Studio was the official IDE option for Xamarin. It was also the only option for Mac users until Microsoft released Visual Studio for Mac a few years ago. Nowadays,<\/span><a href=\"https:\/\/uruit.com\/blog\/mobile-visual-studio-mobile-center\/\" class=\"broken_link\" rel=\"nofollow\"><strong> Microsoft\u2019s Visual Studio<\/strong><\/a><b> is the most popular one for working with Xamarin. <\/b><span style=\"font-weight: 400;\">Hence, to start using Xamarin<\/span> <span style=\"font-weight: 400;\">you should download Visual Studio or even the Visual Studio Community edition which is free.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It includes the Android SDK already integrated, a tool needed to create Android applications. For iOS, you will need another tool, called XCode, which is only available for Mac. What happens if you are working on a Windows environment for example, could you create iOS applications? Unfortunately, no, you can&#8217;t. For compilation purposes, you will need a Mac.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Another interesting tool we recommend is <strong><a href=\"https:\/\/grialkit.com\/gorilla-download\/?ref=uxd&amp;utm_source=UruIT\" class=\"external\" rel=\"nofollow\">Gorilla Player<\/a>, a very powerful tool used to preview XAML while you are coding Xamarin user interfaces.<\/strong><\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"What_is_the_recommended_development_environment_for_React_Native\"><\/span><span style=\"font-weight: 400;\">What is the recommended development environment for React Native?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">To begin with React Native, <\/span><b>you have to install Node and any development environment tool to write Javascript<\/b><span style=\"font-weight: 400;\">. The most common ones are Visual Studio Code and Atom.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>You also have the option of using Expo to start your React Native development faster.<\/strong> It&#8217;s a pretty cool tool that lets you try out your applications on Android and iOS devices without having installed XCode or Android SDK, and you can use it even if you don\u2019t have a Mac.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">First, you&#8217;ll need to install Expo on your computer and also on your mobile devices (Android and\/or iOS). It&#8217;s important to clarify that your application won&#8217;t run in a native way because it won&#8217;t actually be installed on your device. It will just run over Expo in order for you to check how it looks and how it&#8217;ll work.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you want to go further and install the application in a native way, then you must download Android SDK and XCode (the same goes for Xamarin). You can get the Android SDK by downloading the Android Studio, which is the development environment chosen for native Android development, available for every OS. To download XCode, as we said before, you&#8217;ll need a Mac.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Xamarin_vs_React_Native_communities_and_access_to_support\"><\/span><span style=\"font-weight: 400;\">Xamarin vs React Native: communities and access to support<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><b>Xamarin is on a more mature level\u00a0since the framework\u2019s first version was released in 2011<\/b><span style=\"font-weight: 400;\"> and the company was acquired by Microsoft in 2016. Top enterprises such as Coca-Cola Bottling use Xamarin, as do gaming companies like Gummy Drop. At first, with Xamarin the developer could share part of the codebase to create iOS and Android apps, but the visual aspects had to be developed specifically for each system. Some time later, <\/span><b>Xamarin Forms was launched<\/b><span style=\"font-weight: 400;\">, an improved version that allows devs to share visual elements as well. <\/span><\/p>\n<p><b>Today Xamarin is in its third variation and over 1.4 million developers use<\/b><span style=\"font-weight: 400;\"><strong> one of the versions<\/strong> in their products. Therefore, there are a lot of tips, tools, and data available to devs willing to start using the framework. In the official forums, you can get in touch with the Xamarin team without difficulties as well.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Likewise, React Native has a huge community that is very active. <\/span><b>Since it\u2019s highly connected to React, we can say the cross-platform technology inherited some developers from there too<\/b><span style=\"font-weight: 400;\">. The continuous collaboration among different developers from all over the world is making React Native evolve day by day.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Facebook created React Native and its used in immensely popular applications today. Facebook itself and Instagram, for instance. It\u2019s important to note that <\/span><b>React Native is not as mature as Xamarin<\/b><span style=\"font-weight: 400;\">, since its first version hasn\u2019t been launched yet and most React components are built and maintained by the community. As it&#8217;s a growing technology, evolving all the time, these components should be updated in order to be compatible with the lastest React Native versions. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Important disclaimer: <\/span><b>moving between different versions is not that easy<\/b><span style=\"font-weight: 400;\">. Actually, it&#8217;s very common for an application to break because of deprecated components that have not been updated yet. In the worst scenario, the outdated components won&#8217;t be updated at all and you&#8217;ll have to look for a new one if you want your app to keep working normally. <\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Ready-made_components_for_both_mobile_development_platforms\"><\/span><span style=\"font-weight: 400;\">Ready-made components for both mobile development platforms<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">When working with Xamarin, you can be sure that someone else has faced the same challenges as you. So, when Rodrigo received the task of coding a button with very specific characteristics in his last project, he started by looking for other developers who had already created something similar. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">So <\/span><b>it\u2019s a great idea to search in GitHub before starting a new feature<\/b><span style=\"font-weight: 400;\">, just in case someone else shared related code to get started more easily. In UruIT, our Xamarin team has experience creating beautiful and functional apps with this technology. So that adds points for building a good product. The team has also contributed to the community<\/span> <a href=\"https:\/\/github.com\/pgonzalezmorelli\/Cache-SQLite\" class=\"external\" rel=\"nofollow\"><span style=\"font-weight: 400;\">by sharing some Xamarin code<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><b>You can also find a lot of React Native code available out there to start out. <\/b><span style=\"font-weight: 400;\">But, don\u2019t forget that React Native, in general, is a work in progress, so a component you use today may have a better version tomorrow. As we said before, this means your app can be outdated very soon. To avoid that, Andrea suggests paying attention to what kind of components you are going to incorporate in your React Native app. <strong>B<\/strong><\/span><b>e ready to update your code if an improved version comes out.<\/b><span style=\"font-weight: 400;\"> It\u2019s important to look for components that are popular within the community because it means they have people working continuously to update them.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you need to update parts of your app to guarantee it will work well and without bugs, you can check if the old components have updated versions. Another option is to change the component entirely for a brand new one. This option shouldn\u2019t be too complicated thanks to React Native\u2019s component-level modularity.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Comparing_Xamarin_and_React_Native_compilation_time_and_development_speed\"><\/span><span style=\"font-weight: 400;\">Comparing Xamarin and React Native compilation time and development speed<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><b>As your Xamarin app grows, the compilation time will last longer. <\/b><span style=\"font-weight: 400;\">A bigger project means more time waiting for it to compile, which can affect your development time and cost. That\u2019s why Gorilla is a good option. It provides you a fast way to preview UI while coding. <\/span><b>Another positive aspect of Xamarin is that debugging the application code is done in the same way as any other .NET application<\/b><span style=\"font-weight: 400;\"> using Visual Studio.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">On the other hand, <\/span><b>React Native is very effective since it doesn\u2019t need to be compiled or built as it\u2019s Javascript and it\u2019s just scripted.<\/b><span style=\"font-weight: 400;\"> This presents an advantage: at any point after triggering a build, which is a slow process, we can simply reload the Javascript by refreshing our React Native app. This means we can test and modify React Native projects rapidly.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You will find that debugging React Native apps is similar to debugging web applications. By default, you can use the Chrome developer tool and log whatever you want in the console, but\u00a0<\/span><span style=\"font-weight: 400;\"><strong>we recommend you use a third-party tool to debug<\/strong> such as<\/span> <a href=\"https:\/\/github.com\/infinitered\/reactotron?utm_source=UruIT\" class=\"external\" rel=\"nofollow\"><span style=\"font-weight: 400;\">Reactotron<\/span><\/a> <span style=\"font-weight: 400;\">or<\/span> <a href=\"https:\/\/github.com\/zalmoxisus\/redux-devtools-extension?utm_source=UruIT\" class=\"external\" rel=\"nofollow\"><span style=\"font-weight: 400;\">Redux dev tools<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To improve your debugging experience there is another tool that helps you to inspect your React Native UI called <\/span><a href=\"https:\/\/github.com\/jhen0409\/react-native-debugger?utm_source=UruIT\" class=\"external\" rel=\"nofollow\"><span style=\"font-weight: 400;\">React Native Debugger<\/span><\/a><span style=\"font-weight: 400;\">, which includes <\/span><a href=\"https:\/\/github.com\/facebook\/react-devtools\/tree\/master\/packages\/react-devtools?utm_source=UruIT\" class=\"broken_link external\" rel=\"nofollow\"><span style=\"font-weight: 400;\">ReactDevTools<\/span><\/a><span style=\"font-weight: 400;\"> and ReduxDevTools. It allows you to explore the component hierarchy (the component tree). From that, you\u2019ll be able to style your components as well, since web developers are used to doing it with the DOM.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Code_deployment_and_app_performance\"><\/span><span style=\"font-weight: 400;\">Code deployment and app performance<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><b>From a human\u2019s perspective, there aren\u2019t any differences in performance between applications created with React Native and Xamarin. <\/b>B<span style=\"font-weight: 400;\">oth of the frameworks render native widgets.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">If you want to go a bit deeper into the technical aspect of deployment and performance, we have to take into consideration some concepts:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">64-bits support<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">As you may know, architectures based on 64-bit code are faster than their 32-bit code counterpart if they never exceed the limitation of a 32-bits system.\u00a0<\/span><span style=\"font-weight: 400;\">As of today, React Native doesn\u2019t support 64-bits Android applications. In contrast, 64-bit support is not a problem for Xamarin at all.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">JIT and AOT<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">.NET languages such as C# (which is used in Xamarin) is compiled to binary code. On the other hand, Javascript (on which React Native is based on) is interpreted during compilation. That means that both Xamarin and React Native are not directly compiled to native.<\/span><\/li>\n<\/ul>\n<h4><span class=\"ez-toc-section\" id=\"There_are_two_optimization_techniques_for_the_compilation_process_in_order_to_improve_performance\"><\/span><span style=\"font-weight: 400;\">There are two optimization techniques for the compilation process in order to improve performance:<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Just in Time (JIT) compilation is the process of compiling a bytecode or source code into native at runtime. Every piece of code is interpreted once at runtime, and every time a next round is executed, a quick native code runs.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Ahead of time (AOT) compilation means that all the code is compiled before starting the application, at compile time.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><a href=\"https:\/\/docs.microsoft.com\/en-us\/xamarin\/ios\/internals\/architecture\" class=\"external\" rel=\"nofollow\"><i><span style=\"font-weight: 400;\">Note:<\/span><\/i><\/a><i><span style=\"font-weight: 400;\">\u00a0&#8220;There is a security restriction on iOS set by Apple, which disallows the execution of dynamically generated code on a device. For that reason, JIT compiler is not allowed with this technology.&#8221;<\/span><\/i><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">With <\/span><a href=\"https:\/\/docs.microsoft.com\/en-us\/xamarin\/cross-platform\/get-started\/introduction-to-mobile-development\" class=\"external\" rel=\"nofollow\"><span style=\"font-weight: 400;\">Xamarin you can use AOT for both iOS and Android<\/span><\/a><span style=\"font-weight: 400;\">. With React Native you can use JavaScriptCore provided by iOS in order to interpret Javascript; on Android, JavaScriptCore is also an option, although nothing prevents you from using JIT.<\/span><\/p>\n<figure id=\"attachment_8872\" aria-describedby=\"caption-attachment-8872\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" class=\"wp-image-8872 size-large\" src=\"https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/blog-post-1024x681.jpg\" alt=\"xamarin vs react native\" width=\"640\" height=\"426\" srcset=\"https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/blog-post-1024x681.jpg 1024w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/blog-post-300x200.jpg 300w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/blog-post-768x511.jpg 768w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/blog-post-750x499.jpg 750w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/blog-post-1140x758.jpg 1140w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/blog-post-20x13.jpg 20w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/blog-post.jpg 1200w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-8872\" class=\"wp-caption-text\">Part of our Mobile team<\/figcaption><\/figure>\n<h3><span class=\"ez-toc-section\" id=\"Testing_your_React_Native_or_Xamarin_app\"><\/span><span style=\"font-weight: 400;\">Testing your React Native or Xamarin app<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Testing is a critical part of the development process. In the case of mobile applications, <strong>devs face unique problems that web-based applications don\u2019t usually have<\/strong>, such as the numerous screen sizes, network connectivity issues and the variety of manufacturer requirements in the case of Android.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Considering this, if a mobile app is not properly tested so that its bugs can be fixed on time, user satisfaction will decrease. At the same time, bad reviews will increase. The presence of bugs puts any mobile app company\u2019s reputation at risk, so testing is a big responsibility. These are our recommendations regarding Xamarin and React Native:<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"What_are_the_best_tools_to_test_Xamarin_apps\"><\/span><span style=\"font-weight: 400;\">What are the best tools to test Xamarin apps?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\"><strong>You can do Unit Testing in your application as with any other .NET app.<\/strong> For this, you can use Microsoft Visual Studio Test Tools, or another one called NUnit.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For cross-platform UI Testing, you can use NUnit and Xamarin Test Recorder. Both of them allows you to create the tests you need to execute. You can perform them locally, using your own devices. Also, you can use Xamarin Test Cloud in order to test your application on a wider range of devices.<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"What_are_the_best_tools_to_test_React_Native_apps\"><\/span><span style=\"font-weight: 400;\">What are the best tools to test React Native apps?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\"><strong>Testing React Native components is a pretty smooth process, with the right tools.<\/strong> The React team has created a handy tool for static type testing called <\/span><a href=\"https:\/\/www.npmjs.com\/package\/prop-types?utm_source=UruIT\" class=\"external\" rel=\"nofollow\"><span style=\"font-weight: 400;\">PropTypes<\/span><\/a><span style=\"font-weight: 400;\">, which is a good starting point and requires almost no setup.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For unit and integration testing, the first thing you need is a test runner and an assertion library. For this, the React team has us covered again with <\/span><a href=\"https:\/\/jestjs.io\/?utm_source=UruIT\" class=\"external\" rel=\"nofollow\"><span style=\"font-weight: 400;\">Jest<\/span><\/a><span style=\"font-weight: 400;\">, a javascript testing framework specially developed to fit React and React Native applications (although it can be used in any javascript application). Jest will not only provide you with a rich API for behavior and spec tests but also the ability to create Snapshot tests. These are part of a very helpful technique to simplify tests and prevent unwanted changes (or \u201cregressions\u201d) in your components. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">While you can use other javascript testing platforms such as Chai\/Mocha or Jasmine, Andrea recommends Jest. It is very easy to set up and configure, and works out of the box with React Native. Jest will also integrate nicely with component renderers such as <\/span><a href=\"http:\/\/airbnb.io\/enzyme\/?utm_source=UruIT\" class=\"external\" rel=\"nofollow\"><span style=\"font-weight: 400;\">Enzyme<\/span><\/a><span style=\"font-weight: 400;\"> or <\/span><a href=\"https:\/\/www.npmjs.com\/package\/react-test-renderer?utm_source=UruIT\" class=\"external\" rel=\"nofollow\"><span style=\"font-weight: 400;\">React Test Renderer<\/span><\/a><span style=\"font-weight: 400;\">, tools that will allow you to explore the render output for more complete and flexible tests.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Designing_aspects_of_your_mobile_cross-development_project\"><\/span><span style=\"font-weight: 400;\">Designing aspects of your mobile cross-development project<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4><span class=\"ez-toc-section\" id=\"Native_look_and_feel\"><\/span><span style=\"font-weight: 400;\">Native look and feel<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">When using Xamarin, <\/span><b>you can either design the UI in a platform-specific way (using XML on Android and storyboards on iOS) or you can go for Xamarin.Forms<\/b><span style=\"font-weight: 400;\">, because it allows you to code your UI once and share the same code for both iOS and Android outlooks. That happens because under the hood, Xamarin.Forms uses native widgets to create a perfect native look and feel. Therefore, a UI identically coded could be rendered differently depending on if it\u2019s Android or iOS.<\/span><\/p>\n<p><b>If you need to style something particularly or even if you want to get the exact same look across platforms, you can do it using Custom Renderers<\/b><span style=\"font-weight: 400;\">, which provide you with an easy approach for customizing platform-specific layout and behavior. However, generating <\/span><a href=\"https:\/\/forums.xamarin.com\/discussion\/38556\/same-ui-across-platform-using-xamarin-forms\" class=\"external\" rel=\"nofollow\"><span style=\"font-weight: 400;\">Custom Renderers will probably take you some time and the implementation isn\u2019t that simple.<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">It can be easier if you\u2019re working with a team like ours, which has been involved with different Xamarin projects. Over time, we&#8217;ve generated our own library of customized components. Meaning, <\/span><b>we already have a lot of ready-to-use elements that make our development process faster.<\/b><span style=\"font-weight: 400;\"> Also, companies such as <\/span><span style=\"font-weight: 400;\">UXDivers<\/span><span style=\"font-weight: 400;\"> offer beautiful <a href=\"http:\/\/www.grialkit.com\" class=\"external\" rel=\"nofollow\">templates for Xamarin applications<\/a> to facilitate development as well. In our experience, another tip we found valuable is to work with Zeplin, a tool that facilitates the <\/span><a href=\"https:\/\/uruit.com\/blog\/designers-and-developers-collaboration\/\"><span style=\"font-weight: 400;\">collaboration between developers and designers<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">React Native is quite similar to Xamarin.Forms: the UI is also implemented once, and under the hood, the framework uses native widgets too. <\/span><b>The main difference between Xamarin.Forms and React Native is that the latter allows you to customize visual components easier and Custom Renderers aren\u2019t necessary<\/b><span style=\"font-weight: 400;\">. It\u2019s an important advantage since, in any project, the team dedicates a lot of the development time to the UI.<\/span><\/p>\n<div id='gallery-1' class='gallery galleryid-8850 gallery-columns-2 gallery-size-large'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/uruit.com\/blog\/xamarin-vs-react-native\/attachment\/monmentum-2-1\/'><img width=\"640\" height=\"401\" src=\"https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/Monmentum-2-1-1024x642.png\" class=\"attachment-large size-large\" alt=\"Tips for selecting the ideal cross-platform mobile development framework for your project\" loading=\"lazy\" aria-describedby=\"gallery-1-8865\" srcset=\"https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/Monmentum-2-1-1024x642.png 1024w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/Monmentum-2-1-300x188.png 300w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/Monmentum-2-1-768x482.png 768w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/Monmentum-2-1-1536x963.png 1536w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/Monmentum-2-1-750x470.png 750w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/Monmentum-2-1-1140x715.png 1140w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/Monmentum-2-1-20x13.png 20w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/Monmentum-2-1.png 1829w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-1-8865'>\n\t\t\t\tTips for selecting the ideal cross-platform mobile development framework for your project\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\n\n<p style=\"text-align: center;\"><em>Examples of Xamarin.Forms apps created in UruIT<\/em><\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_can_all_of_this_affect_your_project\"><\/span><span style=\"font-weight: 400;\">How can all of this affect your project?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">As we\u2019ve detailed in this post, <\/span><b>the development process can take more time and the app\u2019s future maintenance can be different if you choose to go for Xamarin or React Native<\/b><span style=\"font-weight: 400;\">. However, it all depends on your team\u2019s experience and previous projects you have built. We guarantee that both technologies can lead to great applications. Mainly because the benefits of using a cross-platform option will save you time and money either way.<\/span><\/p>\n<blockquote><p><span style=\"font-weight: 400;\"><img loading=\"lazy\" class=\"size-full wp-image-8863 alignleft\" src=\"https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/andrea-rosales.png\" alt=\"\" width=\"200\" height=\"200\" srcset=\"https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/andrea-rosales.png 200w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/andrea-rosales-150x150.png 150w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/andrea-rosales-20x20.png 20w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/span><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">\u201cReact Native is very intuitive, and it has a great balance between JavaScript and React concepts with a mobile approach. The development process is very enjoyable. You can see the changes you develop to the app in real time, making the experience very dynamic. It gives you a lot of potential to try new things!\u201d, Andrea.<\/span><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<blockquote><p><img loading=\"lazy\" class=\"size-full wp-image-8864 alignleft\" src=\"https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/rodrigo-pintos.png\" alt=\"\" width=\"200\" height=\"200\" srcset=\"https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/rodrigo-pintos.png 200w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/rodrigo-pintos-150x150.png 150w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2018\/07\/rodrigo-pintos-20x20.png 20w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">\u201cXamarin allows you to share the app\u2019s logic with the ability to go directly to the native platforms and create different visual aspects making use of the native components. You can customize things and have a lot of control over what you are building.\u201d, Rodrigo<\/span><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h3><span class=\"ez-toc-section\" id=\"About_us\"><\/span><b>About us<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">UruIT works with US companies, from startups to Fortune 500 enterprises, as nearshore partner for project definition, application design, and technical development. Our Uruguay and Colombia-based teams have worked on over 150 design and development projects up to date.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Are you ready to make the leap in your software development project? <a href=\"https:\/\/uruit.com\/contact\">Tell us about your project<\/a> and let\u2019s talk.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Contents Xamarin vs React Native: the complete guideXamarin vs React Native: the complete guideLearning curveDevelopment environment optionsWhat is the recommended development environment for Xamarin?What is the recommended development environment for&#8230;<\/p>\n","protected":false},"author":10,"featured_media":8862,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[284],"tags":[],"_links":{"self":[{"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/posts\/8850"}],"collection":[{"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/comments?post=8850"}],"version-history":[{"count":6,"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/posts\/8850\/revisions"}],"predecessor-version":[{"id":11249,"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/posts\/8850\/revisions\/11249"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/media\/8862"}],"wp:attachment":[{"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/media?parent=8850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/categories?post=8850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/tags?post=8850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}