Edit this page on Github

Http

The http module of Angular can be used as is in applications. The only thing to be done is to import ReactNativeHttpModule in the main module of the application (see below).

Behind the scene, it uses the Network polyfill provided by React Native.

Main module

@NgModule({
  declarations: [...],
  imports: [ReactNativeAndroidModule, CommonModule, ReactNativeHttpModule],
  bootstrap: [...]
})
export class MyAppModule {}

Example

import {Component, ViewChild} from '@angular/core';
import {NgFor} from '@angular/common';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';
import {TextInput} from 'angular-react-native';

@Component({
  selector: 'example',
  template: `
<TextInput placeholder="Search Wikipedia" (submit)="sendXHR($event)"></TextInput>
<Text *ngFor="let page of pages">{{page}}</Text>
`
})
export class Example {
  @ViewChild(TextInput) textInput: TextInput;
  pages: Array<any> = [];
  constructor(private http: Http) {}

  sendXHR(text: string) {
    if (text && text.length > 0) {
      this.http.get('https://en.wikipedia.org/w/api.php?format=json&action=query&generator=allpages&gaplimit=10&gapfrom=' + text)
        .map(res => res.json())
        .subscribe(data => {
          this.pages = [];
          var raw = data['query'].pages;
          for (var key in raw) {
            this.pages.push(raw[key].title);
          }
        });
      this.textInput.blurTextInput();
    }
  }

}

Getting started

Features

bootstrapAPIsGesturesHttpRouterStyle

Components

ActivityIndicatorHighLevelComponentImagePickerRefreshControlScrollViewSliderSwitchTextTextInputViewWebView
Android
DrawerLayoutPagerLayoutProgressBarToolbar
iOS
DatePickerNavigatorProgressViewSegmentedControlTabBarTabBarItem

Directives

Opacity feedbackRipple feedback