
While there's a good list of Native Fonts in iOS, that you can check with this [react-native-font-list](https://github.com/yayolius/react-native-font-list) Demo App from [Claudio Castro](https://github.com/yayolius), you might need to go further and include your Custom Fonts to your React Native App.

Enters [Nader Dabit](https://twitter.com/dabit3) with a great Tutorial that will teach you just this.  
Please just don't do [Comic Sans](http://comicsanscriminal.com/)!

## [Adding Custom Fonts to A React Native Application](https://medium.com/@dabit3/adding-custom-fonts-to-react-native-b266b41bff7f) blog post

![Custom Fonts ](https://cdn-images-1.medium.com/max/1540/1*OupWimC7Ux6rPbshzO60Ow.png)


Adding Custom Fonts to A React Native Application


Inspired by Android's gesture-based lock screen, and its iOS implementation [GesturePasswordView](https://github.com/cluries/GesturePasswordView), [Spikef](https://github.com/Spikef) has produced its own React Native version of this Component.

## [react-native-gesture-password](https://github.com/Spikef/react-native-gesture-password) on GitHub

```javascript
var PhonePickerDemo = React.createClass({
  // Example for check password
  onEnd: function (password) {
    if (password == "012") {
      this.refs.pg.setNativeProps({
        gestureError: false,
        inputTipText: "Password is right, success.",
      });

      // your codes to close this view
    } else {
      this.refs.pg.setNativeProps({
        gestureError: true,
        inputTipText: "Password is wrong, try again.",
      });
    }
  },
  onStart: function () {
    this.refs.pg.setNativeProps({
      inputDefault: "Please input your password.",
    });
  },
  render: function () {
    return (
      <PasswordGesture
        ref="pg"
        inputDefault="Please input your password."
        onStart={() => this.onStart()}
        onEnd={(password) => this.onEnd(password)}
      />
    );
  },
});
```

![Gesture](https://raw.githubusercontent.com/Spikef/react-native-gesture-password/master/screenshot.gif)


A gesture-based password Component for React Native


React Native reached [v0.10.0](https://github.com/facebook/react-native/releases/tag/v0.10) (while [v0.11](https://github.com/facebook/react-native/releases/tag/v0.11.0-rc) is just around the corner).

As we entered September, React Native is also coming to Android, according to the [infamous blog post](http://facebook.github.io/react/blog/2015/03/30/community-roundup-26.html#when-is-react-native-android-coming) by Christopher Chedeau ([@vjeux](https://twitter.com/vjeux)), and [some](https://github.com/facebook/react-native/commits/master) [teases](https://github.com/facebook/react-native/tree/master/Libraries/Components).  
  There's a crazy amount of Components and Modules around.  
Here's just a glimpse of some of the bests Components so far.

---

## [react-native-icons](https://github.com/corymsmith/react-native-icons)

> Quick and easy icons in React Native

![react-native-icons](https://dl.dropboxusercontent.com/u/6721696/stacked-demo.png)

---

## [react-native-swiper](https://github.com/leecade/react-native-swiper)

> The best Swiper component for React Native

![react-native-swiper](http://i.imgur.com/zrsazAG.gif=300x)

---

## [tcomb-form-native](https://github.com/gcanti/tcomb-form-native)

> Forms library for react-native (^0.9)

![tcomb-form-native](https://raw.githubusercontent.com/gcanti/tcomb-form-native/master/docs/images/result.png)

---

## [react-native-router](https://github.com/t4t5/react-native-router)

> Awesome navigation for your React Native app

![react-native-router](http://tristanedwards.me/u/react-native-router/native-router.gif)

---

### [react-native-camera](https://github.com/lwansbrough/react-native-camera)

> A Camera component for React Native. Also supports barcode scanning!

---

### [react-native-sqlite](https://github.com/almost/react-native-sqlite)

> A binding for sqlite3 for React Native. Allows a database to be opened and for SQL queries to be run on it.

---

### [react-native-navbar](https://github.com/Kureev/react-native-navbar)

> Simple customizable navbar component for React Native.

---

### [react-native-refreshable-listview](https://github.com/jsdf/react-native-refreshable-listview)

> A pull-to-refresh ListView which shows a loading spinner while your data reloads

---

### [gl-react-native](https://github.com/ProjectSeptemberInc/gl-react-native)

> OpenGL bindings for React Native to implement complex effects over images and components, in the descriptive VDOM paradigm.

---

### [react-native-side-menu](https://github.com/Kureev/react-native-side-menu)

> Simple customizable component to create side menu.

---

### [react-native-video](https://github.com/brentvatne/react-native-video)

> A Video component for React Native

---

#### [react-native-blur](https://github.com/Kureev/react-native-blur)

> Component implementation for UIVisualEffectView's blur and vibrancy effect.

---

#### [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons)

> 3000 Customizable Icons for React Native with support for NavBar/TabBar, image source and full stying.

---

#### [react-native-svg](https://github.com/brentvatne/react-native-svg)

> Experimental SVG library for react-native based off of SVGKit.

---

#### [react-native-mapbox-gl](https://github.com/mapbox/react-native-mapbox-gl)

> A Mapbox GL react native module for creating custom maps.

---

#### [react-native-scrollable-tab-view](https://github.com/brentvatne/react-native-scrollable-tab-view)

> Tabbed navigation that you can swipe between, each tab can have its own ScrollView and maintain its own scroll position between swipes. Pleasantly animated. Customizable tab bar.

---

#### [react-native-parallax-view](https://github.com/lelandrichardson/react-native-parallax-view)

> Parallax view for vertical scrollview/listviews with a header image and header content.

---

#### [react-native-chart](https://github.com/onefold/react-native-chart)

> A simple module for adding line charts, area charts, or bar charts to your React Native app.


Best React Native Components so far (while we wait for Android)


Whenever you feel like React Native might not be production ready, then look at Facebook showing us how they use it out in the wild.  
At Facebook they make very clear that they're eating their own dogfood.

## [How Facebook Focuses on the Most Important Element of an App](http://nerds.airbnb.com/facebook-react-native/)

##

Apart from Facebook Groups and Facebook Ads Manager ([both for iOS and Android](http://www.reactnative.com/built-with-react-native/)), Facebook uses React Native for some other interesting internal projects too.

## [How we use it: Building Out the Window with React Native and Parse](https://code.facebook.com/posts/513523428806608/how-we-use-it-building-out-the-window-with-react-native-and-parse)

> When employees visit Out the Window, they place their order using an iPad app that was built with React Native. The menu items, transaction handling, and other features are built on a Parse backend. The coolest part? Employees can order their food online and pick it up within 15 minutes.


A closer look at how React Native is used at Facebook


If you're here for the [long run](https://www.youtube.com/watch?v=Zemce4Y1Y-A&t=1211), then you might now that the ultimate goal of React (and its Native counterpart) is to abstract one day any rendering API with its declarative flavor.

The team behind [ProjSept Engineering](https://twitter.com/ProjSeptEng) might have done another step forward into this direction with is port of [gl-react](https://github.com/ProjectSeptemberInc/gl-react/) for React Native. This also means an Universal API for working with OpenGL/WebGL.  
Make sure to check what it is capable of doing in the attached examples.

## [gl-react-native](https://github.com/ProjectSeptemberInc/gl-react-native) on GitHub ([Examples](https://github.com/ProjectSeptemberInc/gl-react-native/tree/master/Examples))

> OpenGL bindings for react-native to implement complex effects over images and components, in the descriptive VDOM paradigm.
>
> More technically, `gl-react-native` allows you to write a [fragment shader](https://www.opengl.org/wiki/Fragment_Shader) that covers a View. The shader can render: generated graphics/demos, effects on top of images, effects over any UI content... anything you can imagine!
>
> **`gl-react-native` is directly inspired from our other project, [`gl-react`](http://github.com/ProjectSeptemberInc/gl-react) and implements the same API (so you can write "universal" code).**

```javascript
const React = require("react-native");
const GL = require("gl-react-native");

const shaders = GL.Shaders.create({
  helloGL: {
    frag: `
precision highp float;  
varying vec2 uv;  
void main () {  
  gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
}`,
  },
});

class HelloGL extends GL.Component {
  render() {
    const { width, height } = this.props;
    return <GL.View shader={shaders.helloGL} width={width} height={height} />;
  }
}
```

![Examples](https://github.com/ProjectSeptemberInc/gl-react-native/raw/master/imgs/simple.gif)![AdvancedEffects](https://github.com/ProjectSeptemberInc/gl-react-native/raw/master/imgs/advancedeffects.gif)


OpenGL bindings for React Native to implement complex effects over images and components


## [v0.11.0-rc](https://github.com/facebook/react-native/releases/tag/v0.11.0-rc) on GitHub ([npm](https://www.npmjs.com/package/react-native), [CocoaPods](https://cocoapods.org/pods/React)) Release note:

> 0.11.0-rc has been published to npm and CocoaPods:

## Breaking Changes

- **Rename RCTReachability to RCTNetInfo:** for consistency with Android. The device event that is triggered has also been renamed from `reachabilityDidChange` to `networkDidChange`.
- **Internal functions on Animated marked as protected:** if you use attach, detach, getAnimatedValue, addChild, removeChild, or getChildren on your Animated components, you will need to update the code to be compatible. This change is in preparation for future optimizations. [059e605](https://github.com/facebook/react-native/commit/059e605e49bb826a23a828f7dc8700b3aa8054c8)

## Known Issues

- **Packager does not support symlinks:** Symlinks under node_modules, for example, are ignored ([#637](https://github.com/facebook/react-native/issues/637 "[Packager] doesn't resolve modules that are symlinks"))
- **ScrollView sometimes errs with "Cannot find view with tag #XXX":** [#1941](https://github.com/facebook/react-native/issues/1941 "[ScrollView] Cannot find view with tag #XXX")
- **Numbers in bridged method names crash at launch:** [#2469](https://github.com/facebook/react-native/issues/2469 "RCT_EXPORT_METHOD macro: Numbers in a method signature causes critical exception")

## New Features

- **Add support for transparent modal backgrounds:** toggle this by using the new `transparent` prop of Modal.
- **Add support for HSL/HSLA colors**
- **Built-in support for handling Keyboard events:** you can now add listeners to DeviceEventEmitter for keyboardWillShow, keyboardDidShow, keyboardWillHide, keyboardDidHide, keyboardWillChangeFrame and keyboardDidChangeFrame. ([9aefd6b](https://github.com/facebook/react-native/commit/9aefd6bd6ef757644b0a77cd6743b487a90d3551))
- **Built-in support for handling status bar change events:** you can now add listeners to DeviceEventEmitter for statusBarFrameDidChange and statusBarFrameWillChange events (eg: if you receive a phonecall, the status bar becomes taller - this allows you to respond accordingly).
- **Touchable handlers now receive event objects:** `onPressIn` etc - these event objects were already initialized so it was just a matter of threading them through.

### JavaScript

- **Use GLOBAL.process instead of overwriting:** respect any existing `process` value hanging off of the global object, and only set the `env` property of it. [a4e6419](https://github.com/facebook/react-native/commit/a4e64196bcd9ea0f498351b7694281163023e4d3)

### iOS

- **Pass props when creating a view with RCTViewManager:** native module authors will understand that previously it was awkward to set initial properties on a view because props were not available in `init` and there was no guaranteed order that they would be set in. RCTViewManager classes can now implement `viewWithProps:props` to better control this.
- **CameraRoll Image Orientation fix:** use ALAssetOrientationUp for consistent, predictable orientation.
- **Implemented lazy parsing of method signatures to improve TTI (Time to Interact):** [a5e9f83](https://github.com/facebook/react-native/commit/a5e9f83a0acd40e1907fc56420457d61bb0361a8)
- **Post to NSNotificationCenter when root views are added or removed:** notifications are named `RCTUIManagerDidRegisterRootViewNotification` and `RCTUIManagerDidRemoveRootViewNotification`
- **Modernized Objective C syntax:** [88e0bbc](https://github.com/facebook/react-native/commit/88e0bbc4699983cdf94544df422821034e9523c3)

### Packager

- **Started adding support for System.import (in progress):** this is the first step to add support for being able to split JS into multiple bundles. More details: [cfcf604](https://github.com/facebook/react-native/commit/cfcf604b3dc9e081b4142a286a8cca50063a0bc2)
- **Transformer now shows progress bar:** The transform step in currently the longest one in the bundling process. This adds a progress bar to track the transform progress. [eb248e0](https://github.com/facebook/react-native/commit/eb248e0b5855c4d4b3d7cd6dff886264787652ee)
- **More detail on fs log messages:** ever wonder why there were two fs event steps in the packager log? [f3a165d](https://github.com/facebook/react-native/commit/f3a165db4f7b0c00b6ef228d6757c51987d422d4)

### Other

- **RCTProfile API now compatible with systrace:** [81fdf3e](https://github.com/facebook/react-native/commit/81fdf3e5328f9b03204ecc906c5718bec874a4c7)

## Bug Fixes

- **Fix TabBarItemIOS image scale:** TabBarItemIOS supports setting the scale for base64-encoded images using an optional scale parameter, however this was broken due to the JS code only passing the uri, not the whole source object, to the native side.
- **RedBox now rotates properly:** [4382c0e](https://github.com/facebook/react-native/commit/4382c0e8f4851fdb9b5c9315b05b1a0b938ab8a0)

---

## [v0.10.0](https://github.com/facebook/react-native/releases/tag/v0.10.0) on GitHub ([npm](https://www.npmjs.com/package/react-native), [CocoaPods](https://cocoapods.org/pods/React)) Release note:

> react-native 0.10.0 has been published to npm and CocoaPods. Fixes from 0.10-rc include:

- A bug in css-layout that would cause 100% CPU usage with a specific combination of flex properties has been fixed
- Removing native event listeners during reconcilation has been fixed
- The podspec has been fixed to allow you to use both the RCTImage and RCTNetwork subspecs
- Multiline TextInput components keep their text and cursor within their bounds
- ReactART has been fixed
- The `shouldRasterizeIOS` prop has been fixed to use the screen scale for crisper rendering
