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
.push()
/items
<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
var storageRef = firebase.storage.ref("folderName/file.jpg");
let storageRef = FIRStorage.reference().child("folderName/file.jpg")
StorageReference storageRef = FirebaseStorage.getInstance().reference().child("folderName/file.jpg");
var storageRef = firebase.storage.ref("folderName/file.jpg"); var fileUpload = document.getElementById("fileUpload"); fileUpload.on(‘change’, function(evt) { var firstFile = evt.target.file[0]; // get the first file uploaded var uploadTask = storageRef.put(firstFile); });
let storageRef = FIRStorage.reference().child("folderName/file.jpg"); let localFile: NSURL = // get a file; // Upload the file to the path "folderName/file.jpg" let uploadTask = storageRef.putFile(localFile, metadata: nil)
StorageReference storageRef = FirebaseStorage.getInstance().reference().child("folderName/file.jpg"); Uri file = Uri.fromFile(new File("path/to/folderName/file.jpg")); UploadTask uploadTask = storageRef.putFile(file);
<input type="file" />
UploadTask
DownloadTasks
var storageRef = firebase.storage.ref("folderName/file.jpg"); var fileUpload = document.getElementById("fileUpload"); fileUpload.on(‘change’, function(evt) { var firstFile = evt.target.file[0]; // get the first file uploaded var uploadTask = storageRef.put(firstFile); uploadTask.on(‘state_changed’, function progress(snapshot) { console.log(snapshot.totalBytesTransferred); // progress of upload }); });
let storageRef = FIRStorage.reference().child("folderName/file.jpg"); let localFile: NSURL = // get a file; // Upload the file to the path "folderName/file.jpg" let uploadTask = storageRef.putFile(localFile, metadata: nil) let observer = uploadTask.observeStatus(.Progress) { snapshot in print(snapshot.progress) // NSProgress object }
StorageReference storageRef = FirebaseStorage.getInstance().reference().child("folderName/file.jpg"); Uri file = Uri.fromFile(new File("path/to/images/file.jpg")); UploadTask uploadTask = storageRef.putFile(file); uploadTask.addOnProgressListener(new OnProgressListener() { @Override public void onProgress(UploadTask.TaskSnapshot snapshot) { System.out.println(snapshot.getBytesTransferred().toString()); } });
var storageRef = firebase.storage.ref("folderName/file.jpg"); storageRef.getDownloadURL().then(function(url) { console.log(url); });
let storageRef = FIRStorage.reference().child("folderName/file.jpg"); storageRef.downloadURLWithCompletion { (URL, error) -> Void in if (error != nil) { // Handle any errors } else { // Get the download URL for 'images/stars.jpg' } }
StorageReference storageRef = FirebaseStorage.getInstance().reference().child("folderName/file.jpg"); storageRef.getDownloadUrl().addOnSuccessListener(new OnSuccessListener() { @Override public void onSuccess(Uri uri) { // Got the download URL for 'users/me/profile.png' } }).addOnFailureListener(new OnFailureListener() { @Override public void onFailure(@NonNull Exception exception) { // Handle any errors } });
// Only a user can upload their profile picture, but anyone can view it service firebase.storage { match /b//o { match /users/{userId}/profilePicture.png { allow read; allow write: if request.auth.uid == userId; } } }
