How to Create a Native App Combining Angular 2 and React Native

Hi folks,

With the launch of the Angular 2 Final Release, the war between using Angular 2 or React is firing up again.

react-vs-angular

But what if instead of shooting each other we could use the advantages from both worlds? I’ll show you how you can have access to Native Components through React Native and use the Angular 2 directives that we all love.

Thanks to Scott Little,  a promising proof of concept was developed with both technologies during his internship on the Angular team which led to an awesome library: angular2-react-native.

If you love theory and want more information, you can head there.

Let’s get started like usual by installing things. I have always focused my development for mobile using the simulator from xcode for iOS because it’s extremely faster than the Android simulator. This article will focus on this platform however it shouldn’t be much different for the other one.

Head there to install your environment, it’s a seed project that will kickstart your setup. Be sure to have your port 8081 free otherwise you will have some trouble.

Once it’s done. I guess you are thinking: “Nice, I can use the HMR to develop faster!”. In my case I couldn’t and had unfortunately to use cmd + ctrl + z then select reload to refresh 🙁 (I hope that you will have more luck).

Now you must have your welcome view displayed from the Hello component. For this tuts, let’s only keep the host property which position your Hello component. We should both have the following code:

Very simple here, we use a React Native View with some Text component inside.
As you can see, the style only works here by creating this.styles and using it in the template.

Subscribe to my mailing list to get access to a Free 7-day Ionic 3 introduction email course!
100% Privacy. I'll never spam you!

Now let’s use the React Native arsenal and add a DatePicker Native Component to our app.

We delete the Text component and add our DatePicker component, it’s that simple. You can do that with any native component available here.

Let’s use some Angular 2 features, one of the most famous: ngFor!

We are going to create many DatePickers. In order to do this, we are going to loop and create a new one each time.

Let’s start by updating our constructor :

We create an array that contains 50 number 4: [4,4,4,4,4 ….,4];

We also update our style because we will use a ScrollView component and if we don’t set flex:1 well … it’s bugged.

Finally we update our previous template by combining the React Native ScrollView component with it’s style and the Angular 2 ngFor directive!

And there it is, the two best JavaScript technologies of 2015 and 2016 working together in the same application!

Conclusion

In this post we have seen how to create an Angular 2 React Native application, keep in mind that your style must be declared in your component, you have access to any React Native components in the previous link and of course every Angular 2 features that you need but also remember that the Angular good guy team is willing to bridge both technologies in order to satisfy both communities.

9 Comments

  1. Burke Holland Burke Holland
    September 28, 2016    

    Interesting attempt here! As a member of the NativeScript team, I have to ask – why not just use NativeScript? We’ve implemented Angular 2 as a first-class integration since the RC in May. If you haven’t checked it out, have a look and let us know what you think. Cheers!

    • Matthieu Drula Matthieu Drula
      October 4, 2016    

      I have seen all around the web people talking about NativeScript (mostly from Todd Motto). I was a bit bored about the war between Angular and React and discovered Angular 2 React Native and thought that it was an interesting approach.
      I will definitely write about NativeScript in the future since I’m getting a bit of Ionic saturation.

  2. Lee Bradley Lee Bradley
    October 3, 2016    

    NativeScript (http://www.nativescript.org), delivers the same story but out of the box. Use Angular 2 and JavaScript to create native mobile apps. It is backed by Google and is the “official” way to create native mobile apps with Angular 2.

    • Matthieu Drula Matthieu Drula
      October 5, 2016    

      NativeScript is on my todo list too ;).

  3. Chirs Moune Chirs Moune
    December 21, 2016    

    The problem with NativeScript is lack of books, really frustrating. We only have the docs on their website. And the community plugin repository could have been better, I mean with search at least. I have been reading their docs online and I falled on this page because I was a little beat disappointed by those points and I was looking for an alternative. So they (NativeScript team) better try to make thier stuffs more attractive and consistent, and books, books, books

    • Matthieu Drula Matthieu Drula
      December 27, 2016    

      So many frameworks and and so little documentation or concrete examples.
      Most of them are quite new so in order to learn, you might have to dig into the core code itself.

    • Al Mann Al Mann
      February 20, 2017    

      I agree. NativeScript seems to have less documentation, tools than ReactNative such as codepush and some view components.

  4. Shimju David Shimju David
    October 6, 2017    

    Now (Oct 6, 2017) it is not the case with NativeScript. Docs are good, books are there (and it is free), exceptional plugins are available and easily searchable so as several tools. NS is grown now.

  5. KevinB KevinB
    October 25, 2017    

    How do I hook it up to AppRegistry. I’ve been trying all day. Please help.

Leave a Reply

Your email address will not be published. Required fields are marked *

8 Shares