refHandle = postRef.observeEventType(FIRDataEventType.Value, withBlock: { (snapshot) in let postDict = snapshot.value as! [String : AnyObject] // … })
firebase.database().ref('posts/' + postId).on('value', function(snapshot) { var post = snapshot.val(); // … });
mPostReference.addValueEventListener(new ValueEventListener() { @Override public void onDataChange(DataSnapshot dataSnapshot) { // Get Post object and use the values to update the UI Post post = dataSnapshot.getValue(Post.class); // … } @Override public void onCancelled(DatabaseError databaseError) { // Getting Post failed, log a message Log.w(TAG, "loadPost:onCancelled", databaseError.toException()); // … } });
main.html
// Initialize Firebase var config = { apiKey: "<qwertyuiopasdfghjklzxcvbnm>", databaseURL: "https://<my-app-id>.firebaseio.com", storageBucket: "<my-app-id>.appspot.com" }; firebase.initializeApp(config);
authDomain
firebase.js
<script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>
www.gstatic.com
*.firebaseio.com
www.googleapis.com
manifest.json
"Content_security_policy": "script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'"
"permissions": [ "identity" ], "oauth2": { // Use your Client ID Below. "client_id": "1234567890-abcdefjhijk.apps.googleusercontent.com", "scopes": [ "https://www.googleapis.com/auth/userinfo.email", "https://www.googleapis.com/auth/userinfo.profile" ] },
var credential = firebase.auth.GoogleAuthProvider.credential(null, token); firebase.auth().signInWithCredential(credential);
brew install watchman npm install -g react-native-cli
react-native init GroceryApp # or whatever you want
atom GroceryApp # if you’re into Atom
react-native run-ios
Cmd+R
npm
npm install firebase --save
index.ios.js
import * as firebase from 'firebase';
// Initialize Firebase const firebaseConfig = { apiKey: "<your-api-key>", authDomain: "<your-auth-domain>", databaseURL: "<your-database-url>", storageBucket: "<your-storage-bucket>",, }; const firebaseApp = firebase.initializeApp(firebaseConfig);
const
React.createClass()
class GroceryApp extends Component { render() { return ( <View style="{styles.container}"> </View> ); } }
StyleSheet
var styles = StyleSheet.create({ container: { backgroundColor: '#f2f2f2', flex: 1, }, });
<View style="{styles.container}"> I’m a container lol! </View>
styles.js
module.exports
require()
const styles = require('./styles.js')
components
GroceryApp
'use strict'; import React, {Component} from 'react'; import ReactNative from 'react-native'; const styles = require('../styles.js') const constants = styles.constants; const { StyleSheet, Text, View, TouchableHighlight} = ReactNative; class ActionButton extends Component { render() { return ( <View style={styles.action}> <TouchableHighlight underlayColor={constants.actionColor} onPress={this.props.onPress}> <Text style={styles.actionText}>{this.props.title}</Text> </TouchableHighlight> </View> ); } } module.exports = ActionButton;
import React, {Component} from 'react'; import ReactNative from 'react-native'; const styles = require('../styles.js') const { View, TouchableHighlight, Text } = ReactNative; class ListItem extends Component { render() { return ( <TouchableHighlight onPress={this.props.onPress}> <View style={styles.li}> <Text style={styles.liText}>{this.props.item.title}</Text> </View> </TouchableHighlight> ); } } module.exports = ListItem;
'use strict'; import React, {Component} from 'react'; import ReactNative from 'react-native'; const styles = require('../styles.js') const { StyleSheet, Text, View} = ReactNative; class StatusBar extends Component { render() { return ( <View> <View style={styles.statusbar}/> <View style={styles.navbar}> <Text style={styles.navbarTitle}>{this.props.title}</Text> </View> </View> ); } } module.exports = StatusBar;
import React, {Component} from 'react'; import ReactNative from 'react-native'; import * as firebase from 'firebase'; const StatusBar = require('./components/StatusBar'); const ActionButton = require('./components/ActionButton'); const ListItem = require('./components/ListItem'); const styles = require('./styles.js');
_renderItem(item) { return ( <ListItem item="{item}" onpress="{()" ==""> {}} /> ); } render() { return ( <View style="{styles.container}"> <StatusBar title="Grocery List"> <ListView datasource="{this.state.dataSource}" renderrow="{this._renderItem.bind(this)}" style="{styles.listview}/"> <ActionButton title="Add" onpress="{()" ==""> {}} /> </View> ); }
render()
_renderItem()
constructor(props) { super(props); this.state = { dataSource: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }) }; }
state
ListView.DataSource
ListView
componentDidMount()
componentDidMount() { this.setState({ dataSource: this.state.dataSource.cloneWithRows([{ title: 'Pizza' }]) }) }
setState()
this.itemsRef = firebaseApp.database().ref();
listenForItems(itemsRef) { itemsRef.on('value', (snap) => { // get children as an array var items = []; snap.forEach((child) => { items.push({ title: child.val().title, _key: child.key }); }); this.setState({ dataSource: this.state.dataSource.cloneWithRows(items) }); }); }
DataSnapshot
forEach(child)
.forEach
_key
.key()
dataSource.cloneWithRows(items)
cloneWithRows()
DataSource
componentDidMount() { this.listenForItems(this.itemsRef); }
ActionButton
AlertIOS
_addItem() { AlertIOS.prompt( 'Add New Item', null, [ { text: 'Add', onPress: (text) => { this.itemsRef.push({ title: text }) } }, ], 'plain-text' ); }
text
style
onPress
plain-text
secure-text
/items
.push()
<ActionButton title="Add" onpress="{this._addItem.bind(this)}"> </ActionButton>
_renderItem(item)
_renderItem(item) { const onPress = () => { AlertIOS.prompt( 'Complete', null, [ {text: 'Complete', onPress: (text) => this.itemsRef.child(item._key).remove()}, {text: 'Cancel', onPress: (text) => console.log('Cancel')} ], 'default' ); }; return ( <ListItem item="{item}" onpress="{onPress}"> ); }
.child(key)
item
.remove()
ListItem
import ReactNative from "react-native"; import firebase from "firebase"; // Initialize Firebase const firebaseConfig = { apiKey: "<YOUR-API-KEY>", authDomain: "<YOUR-AUTH-DOMAIN>", databaseURL: "<YOUR-DATABASE-URL>", storageBucket: "<YOUR-STORAGE-BUCKET>" }; firebase.initializeApp(firebaseConfig);
signInWithPopup()
signInWithRedirect()
linkWithPopup()
linkWithRedirect()
signInWithCredential()
import firebase from "firebase"; firebase.initializeApp({ databaseURL: "<YOUR-DATABASE-URL>", });
