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.

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:

import { Component } from "@angular/core";
import { StyleSheet } from "react-native";

@Component({
  selector: "hello-app",
  host: { position: "abolute", top: "0", left: "0", bottom: "0", right: "0" },
  template: `
  <View>
    <Text>hello</Text>
  </View>`
})
export class HelloApp {
  styles: any;
  constructor() {
    this.styles = StyleSheet.create({});
  }
}

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.

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

import { Component } from "@angular/core";
import { StyleSheet } from "react-native";

@Component({
  selector: "hello-app",
  host: { position: "abolute", top: "0", left: "0", bottom: "0", right: "0" },
  template: `
  <View>
    <DatePicker></DatePicker>
  </View>`
})
export class HelloApp {
  styles: any;
  constructor() {
    this.styles = StyleSheet.create({});
  }
}

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:

export class HelloApp {
  styles: any;
  numbers: number[];
  constructor() {
    this.numbers = Array(50).fill(4);

    this.styles = StyleSheet.create({
      scrollView: {
        flex: 1
      }
    });
}

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!

template: `
  <ScrollView [styleSheet]="styles.scrollView">
    <View>
      <li *ngFor="let number of numbers">
        <DatePicker></DatePicker>
      </li>
    </View>
  </ScrollView> `;

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.