{"id":13803,"date":"2020-07-17T11:48:38","date_gmt":"2020-07-17T11:48:38","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/blog\/?p=13803"},"modified":"2024-03-04T05:31:45","modified_gmt":"2024-03-04T05:31:45","slug":"react-native-bridge-for-ios-and-android","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/blog\/react-native-bridge-for-ios-and-android","title":{"rendered":"React Native Bridge for iOS and Android"},"content":{"rendered":"<style>\np{\n   width:100%;\n}\n.post-content p img {\n    margin-bottom: 0 !important;\n}\n.border-div{border: 1px solid #000; padding: 22px; text-align: left; margin-bottom: 32px;}\n\t\t.border-bottom{\n\t\t\tborder-bottom: 1px solid #000;\n\t\t\ttext-align: left;\n\t\t\tdisplay: inline-block;\n\t\t}\n\t\t.border-div p{text-align: left;}<\/p>\n<\/style>\n<p>React Native is combined with iOS and Android.  We can create a <b>React Native bridge<\/b> between the Native languages like Java, Kotlin, Objective-c, Swift, and JavaScript code. Here bridge means the communication between the native platform and React Native.<\/p>\n<div class=\"border-div\">\n<h2 class=\"border-bottom\">Table of Contents<\/h2>\n<p>1. Define Native Modules<\/p>\n<p>2. Native Bridge component<\/p>\n<ul class=\"bullets\">\n<li>React Native Bridge Android<\/li>\n<li>React Native Bridge iOS<\/li>\n<\/ul>\n<\/div>\n<p>In this blog post, we will discuss React Native Bridge for both iOS and Android. <\/p>\n<h2>Define Native Modules<\/h2>\n<p>Native modules are distributed as npm packages, except that on top of the usual Javascript, they will include some native code per platform. To understand more about npm packages, please go through this useful <a href=\"https:\/\/docs.npmjs.com\/getting-started\/publishing-npm-packages\" rel=\"nofollow  noopener\" target=\"_blank\">Guide<\/a>.<\/p>\n<h2>Native Module Steps:<\/h2>\n<p>Let&#8217;s understand the native modules with examples.<\/p>\n<p><strong>Create the Exit App<\/strong><\/p>\n<p>We will create an ExitApp demo using react-native CLI. In this example, button press to exit the app using the native language.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/react-native-init.png\" alt=\"react native init\" width=\"785\" height=\"93\" class=\"alignleft size-full wp-image-13814\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/react-native-init.png 785w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/react-native-init-300x36.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/react-native-init-768x91.png 768w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/react-native-init-20x2.png 20w\" sizes=\"auto, (max-width: 785px) 100vw, 785px\" \/><\/p>\n<p>Hopefully, your project runs successfully.<\/p>\n<h2>Native Bridge component<\/h2>\n<p><em>React Native Bridge<\/em> component is the handy tool for React Native Developer to bridge the native component. <\/p>\n<h2>1. React Native Bridge Android<\/h2>\n<p>Create a new java class, ExitModule, and ExitModulePackage.<\/p>\n<p><strong>ExitModule.java<\/strong><\/p>\n<p>\u29bf<em>android\/app\/src\/main\/java\/com\/exitapp\/ExitModule.java<\/em><\/p>\n<p>So it is a class that extends ReactContextBaseJavaModule.<\/p>\n<p><em>ReactContextBaseJavaModule implements a method getName  that returns a string. getName()<\/em> in string name, which we will refer to the native module in our Javascript code.<\/p>\n<p>@ReactMethod java method should be annotated to expose a method to JavaScript. Multiple @ReactMethod methods can be created in this class.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/rsz_image_22.png\" alt=\"ReactMethod\" width=\"576\" height=\"748\" class=\"alignleft size-full wp-image-13819\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/rsz_image_22.png 576w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/rsz_image_22-231x300.png 231w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/rsz_image_22-15x20.png 15w\" sizes=\"auto, (max-width: 576px) 100vw, 576px\" \/><\/p>\n<p><strong>ExitPackage.java<\/strong><\/p>\n<p>\u29bf<em>android\/app\/src\/main\/java\/com\/exitapp\/ExitPackage.java<\/em><\/p>\n<p>So it is a class that extends ReactPackage.<\/p>\n<p>Registering new JS modules that can be accessed from native modules or from other parts.<\/p>\n<p>The native code requires JS modules from the package that doesn&#8217;t automatically be included as a part of the JS bundle, so there should be a corresponding piece of code on the JS side that will require the implementation of that JS module so that it gets bundled.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/101.png\" alt=\"implementation of that JS\" width=\"512\" height=\"641\" class=\"alignleft size-full wp-image-13835\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/101.png 512w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/101-240x300.png 240w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/101-16x20.png 16w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/p>\n<p><strong>MainApplication.java<\/strong><\/p>\n<p>\u29bf<em>android\/app\/src\/main\/java\/com\/exitapp\/MainApplication.java<\/em><\/p>\n<p>ExitPackage add in MainApplication.java<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/102.png\" alt=\"ExitPackage add in MainApplication\" width=\"512\" height=\"224\" class=\"alignleft size-full wp-image-13836\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/102.png 512w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/102-300x131.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/102-20x9.png 20w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/p>\n<p class=\"boxed bg--secondary\" style=\"border: 1px solid #c7c7c7; box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);\"><strong><em><span style=\"font-size:22px; color:#000;\">Are you looking to create attractive UI components using react native JavaScrip code?<\/span><br \/>\nGet in touch with us and <a href=\"https:\/\/www.bacancytechnology.com\/hire-react-native-developer\" target=\"_blank\" rel=\"noopener\">Hire React Native Developer<\/a> to create modern UI components.<\/em><\/strong><\/p>\n<h2>2. React Native Bridge iOS<\/h2>\n<p>Create new file ExitModule in Xcode File\/New\/File\/Cocoa Touch Class<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/Native-Bridge-iOS.gif\" alt=\"React Native Bridge iOS\" width=\"600\" height=\"375\" class=\"alignleft size-full wp-image-13822\" \/><\/p>\n<p><strong>ExitModule.h<\/strong><\/p>\n<p>\u29bf<em>ios\/ExitApp\/ExitModule.h<\/em><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/104.png\" alt=\"ios\/ExitApp\/\" width=\"512\" height=\"238\" class=\"alignleft size-full wp-image-13837\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/104.png 512w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/104-300x139.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/104-20x9.png 20w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/p>\n<p>RCTBridgeModule use in native land to talk with React Native<\/p>\n<p><strong>ExitModule.m<\/strong><\/p>\n<p>\u29bf<em>ios\/ExitApp\/ExitModule.m<\/em><\/p>\n<p>React Native will not expose any methods of ExitApp to JavaScript unless explicitly told to. This is done using the RCT_EXPORT_METHOD() macro:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/105.png\" alt=\" RCT_EXPORT_METHOD\" width=\"512\" height=\"308\" class=\"alignleft size-full wp-image-13838\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/105.png 512w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/105-300x180.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/105-20x12.png 20w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/p>\n<p>Your class must also include the RCT_EXPORT_MODULE() macro. RCT is the short name for React and includes it in your Objective-C code. <\/p>\n<p>RCT_EXPORT_METHOD  supports this standard JSON object types:<\/p>\n<ul class=\"bullets\">\n<li>NSString (string)<\/li>\n<li>NSInteger, float, double, CGFloat, NSNumber(number)<\/li>\n<li>BOOL, NSNumber(boolean)<\/li>\n<li>NSArray  (array)<\/li>\n<li>NSDictionary  (object)<\/li>\n<li>RCTResponseSenderBlock (function)<\/li>\n<\/ul>\n<p>Finally, Android and iOS side native code are completed. So ExitApp calls in react-native in a javascript file.<\/p>\n<p><strong>NativeModule.js<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/106.png\" alt=\"NativeModule.js\" width=\"512\" height=\"67\" class=\"alignleft size-full wp-image-13839\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/106.png 512w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/106-300x39.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/106-20x3.png 20w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/p>\n<p><strong>App.js<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/107.png\" alt=\"App.js\" width=\"512\" height=\"888\" class=\"alignleft size-full wp-image-13840\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/107.png 512w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/107-173x300.png 173w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/107-12x20.png 12w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/p>\n<p><strong>OutPut:<\/strong><\/p>\n<p>Now run the app<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/07\/ezgif.com-gif-maker-1.gif\" alt=\"Now run the app\" width=\"538\" height=\"562\" class=\"alignleft size-full wp-image-13823\" \/><\/p>\n<p>To access the code of this blog post can be accessed <a href=\"https:\/\/github.com\/Maheshbokhani\/ExitApp\" rel=\"nofollow  noopener\" target=\"_blank\">here <\/a>.<\/p>\n<h2>Conclusion<\/h2>\n<p>In this blog, we have seen that React Native Bridge is a powerful feature for accessing native features and create UI components by using React Native JavaScript code. If you are looking for the React Native experts to create a bridge between JavaScript code and native languages to create native modules, then get in touch with us today. Our React Native developers are well-versed with building intuitive, visually stunning, robust, scalable, engaging, and user-friendly cross-platform mobile applications.<\/p>\n<p>We are a globally renowned <a href=\"https:\/\/www.bacancytechnology.com\/react-native-app-development\" rel=\"noopener\" target=\"_blank\">React Native Development company<\/a>; we let you outsource React Native developers from us to gain a competitive advantage fulfilling your varied business objectives.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React Native is combined with iOS and Android. We can create a React Native bridge between the Native languages like Java, Kotlin, Objective-c, Swift, and JavaScript code. Here bridge means the communication between the native platform and React Native. Table of Contents 1. Define Native Modules 2. Native Bridge component React Native Bridge Android React [&hellip;]<\/p>\n","protected":false},"author":40,"featured_media":13842,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[1364,714],"tags":[],"coauthors":[1605],"class_list":["post-13803","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-application-development","category-react-native"],"acf":[],"modified_by":"Chandresh Patel","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/13803","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=13803"}],"version-history":[{"count":0,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/13803\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/13842"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=13803"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=13803"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=13803"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=13803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}