Adding Third Party Native Modules Using React Native

React Native proved to be an amazing framework for us to work. Being a semi hybrid mobile framework React Native is the best platform for creating native mobile applications right now.

It’s a lightweight framework and offers impressive performance. Its structure encourages to write a much more modular and reusable set of code. React Native is a fast-growing framework with great speed, native user interface which is fluid and butter smooth. If you’re a React developer, using React Native will be a piece of cake.

React Native easily hooks to native modules and there are umpteen third-party libraries available, in fact, npm is the richest package manager of all languages.

As a web developer, with less knowledge of native platforms, we faced some issues when using native modules.

React Native offers two types of 3rd party modules:

• Native modules
• JavaScript modules.

For installing native modules on iOS, you need to link the libraries in Xcode either manually or automatically using rnpm link.

For instance:

Implementing React Native Vector Icons in iOS for native modules:

$ npm install react-native-vector-icons -- save                                      

• Go to Xcode and open Your project.xcodeproj inside ios directory
• In your finder/computer, navigate to Your project (project folder) ➜
  node_modules ➜ react-native-vector-icons
• Drag RNVectorIcons.xcodeproj to the Libraries in the sidebar as explained in the image below

• Now hit run/⌘ + R

Implementing React Native Spinkit:

• In XCode, in the project navigator, right-click ‘Libraries’ ➜ Add Files to [your project’s name]
• Go to ‘node_modules’ ➜ ‘react-native-spin kit’ and add ‘RNSpinkit.xcodeproj’
• In XCode, in the project navigator, select your project. Add ‘libRNSpinkit.a’ to your project’s ‘Build Phases’ ➜ ‘Link Binary With Libraries’
• Click ‘RNSpinkit.xcodeproj’ in the project navigator and go the ‘Build Settings’ tab. Make sure ‘All’ is toggled on (instead of ‘Basic’). Look for ‘Header Search Paths’ and make sure it contains both ‘$(SRCROOT)/../react-native/

Also, I would like to mention some other 3rd party plugins used in our React Native based products: React Native Gifted Spinner, React Native Selectme, React Native Vector Icons, React Native Drawer, React Native Router Flux, React Native Modalbox and lots more.

Wherein using 3rd party modules made our development easy but it’s not that easy always to work using them. We faced many issues like whenever plugins are updated the code breaks.

However React Native being open source with vast group of developers, regularly release upgraded version with new components, plugins, fixing the bugs.

Although it offers single codebase for iOS and Android, we can’t deny that the support for Android is less as compared to iOS.

There are dependencies on each version of React Native. React Native comes up with updated versions in the regular intervals that may or may not support some 3rd party plugins.

Undoubtedly, React Native has taken development to another level but what bothers is that React Native is getting updated in regular intervals, due to which it’s not that easy for the community to catch up with the updates.

For instance, StyleSheetRegistry was renamed to ReactNativePropRegistry for 0.24 & 0.25 versions of React Native.

React Native framework is growing very fast compared to any other framework and day by day we can expect more and more 3rd party plugins that will be really helpful in the development field resulting to get well-designed product for both iOS and Android.

Native Starter Pro, Native Base are the projects on which my team worked using React Native.

Native Starter Pro more like React Native framework is well designed, responsive iOS & Android app source code that helps to get started with your project quickly.

It offers with the implementations like Moment, Reacts Native Button, Reacts Native Spinkit, Reacts Native Android Statusbar and many more.

For more details please visit our website.

Native Base, an open-source framework coded with React Native and Javascript that helps to build high-quality React Native apps with an easy to use generic reusable components. Here you will get a set of UI components in one place to develop React Native apps.

Feel free to clone and fork by submitting bugs, creating pull requests and even improving the documentation.

Check out http://nativebase.io/ for more details.

Please subscribe, star our repos (EasyGrid repo / NativeBase repo) and follow us on Twitter.
Feel free to add comments and contribute to the repo.