app.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Button
} from 'react-native';

import Firestack from 'react-native-firestack';
import OAuthManager from 'react-native-oauth';

const manager = new OAuthManager('fruity');
manager.configure({
  facebook: {
    client_id: 'CLIENT_ID',
    client_secret: 'CLIENT_SECRET'
  },
});

const firestack = new Firestack({ debug: '*' });

export default class Fruity extends Component {
  constructor(props) {
    super(props);

    this.state = {
      auth: {
        facebook: null,
      },
      user: null,
      errors: null,
    };
  }

  componentDidMount() {
    manager.savedAccount('facebook')
      .then(({ status, response, provider }) => {
        if (status === 'ok') {
          this._fetch_me()
            .then(user => {
              const { auth } = this.state;
              const newAuth = Object.assign({}, auth, { facebook: response });

              this.setState({
                user,
                auth: newAuth
              })
            });
        }
      });
  }

  _fetch_me = () => {
    return manager.makeRequest('facebook', 'https://graph.facebook.com/me')
    .then(resp => {
      const { data } = resp;
      return data;
    }).catch(err => console.log('/me error ->', err));
  }

  login = () => {
    manager.authorize('facebook', {scopes: 'user_friends,email'})
    .then(fbAuth => { 
      this._fetch_me().then(user => {
        const { auth } = this.state;
        this.setState({
          auth: Object.assign({}, auth, { facebook: fbAuth }),
          user: data
        });
      });
    })
    .catch(err => {
      console.log('error ->', err);
    });
  }

  logout = () => {
    manager.deauthorize('facebook')
      .then(resp => {
        let { auth } = this.state;
        delete auth['facebook'];
        this.setState({
          user: null,
          auth
        })
      }).catch(err => console.log('error', err));
  }

  fetch_friends = () => {
    const { user } = this.state;
    const path = `/${user.id}/friends`;
    manager.makeRequest('facebook', path)
      .then(({ data }) => {
        const { summary } = data;
        this.setState({
          friend_count: summary.total_count
        })
      })
      .catch(err => {
        console.log('error -->', err);
      });
  }

  // Keeping this in one gist
  _renderAccessible = () => {
    const { auth, user } = this.state;
    const { friend_count } = this.state;
    return (
      <View>
        <Button 
          title={`Fetch ${user.name} friends`}
          onPress={this.fetch_friends} />
        <Text>{friend_count} Friends</Text>
        <Button 
          title={`Logout`}
          onPress={this.logout} />
      </View>
    )
  }

  _renderLogin = () => {
    return (
      <Button
        title="Login with Facebook"
        onPress={this.login} />
    )
  }

  render() {
    const { auth, user } = this.state;

    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Demo application
        </Text>
        
        {auth.facebook ? 
          this._renderAccessible() :
          this._renderLogin()
          }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

package.json

{
  "name": "fruity",
  "version": "0.0.1",
  "private": true,
  "author": "Ari Lerner",
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "15.4.2",
    "react-native": "0.40.0",
    "react-native-firestack": "^2.3.9",
    "react-native-oauth": "^2.1.11"
  },
  "devDependencies": {
    "babel-jest": "18.0.0",
    "babel-preset-react-native": "1.9.1",
    "jest": "18.1.0",
    "react-test-renderer": "15.4.2"
  },
  "jest": {
    "preset": "react-native"
  }
}