Skip to content

Instantly share code, notes, and snippets.

@okcthulhu
Created September 8, 2016 20:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save okcthulhu/41a1445f10661efc9af0980ccd1ff8df to your computer and use it in GitHub Desktop.
Save okcthulhu/41a1445f10661efc9af0980ccd1ff8df to your computer and use it in GitHub Desktop.
Broken Listview
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');
import {
AppRegistry,
StyleSheet,
Text,
View,
ListView
} from 'react-native';
// Initialize firebase
const firebaseConfig = {
apiKey: 'AIzaSyANOkbGi4gEQmzLaY4PKFea_DCM1UHs_LQ',
authDomain: 'firereactnativedemo.firebaseapp.com',
databaseURL: 'https://firereactnativedemo.firebaseio.com',
storageBucket: 'firereactnativedemo.appspot.com',
serviceAccount: 'FireReactNativeDemo-bb33587a4946.json'
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
class GroceryApp extends Component {
constructor(props) {
super(props);
this.itemsRef = firebaseApp.database().ref();
this._renderItem = this._renderItem.bind(this);
var dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.state = {
dataSource: dataSource
};
}
componentDidMount() {
this.state = {
dataSource: this.listenForItems(this.itemsRef)
};
}
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
});
});
// items.push({title: "Pizza", _key: "Pizza"});
this.state = {
dataSource: this.state.dataSource.cloneWithRows(items)
};
});
}
_renderItem(item) {
return (
<ListItem item="{item}" onpress={() => {}} />
);
}
render() {
return (
<View style={styles.container}>
<StatusBar title="Grocery List" />
<ListView
style={styles.listview}
dataSource={this.state.dataSource}
renderRow={this._renderItem} />
<ActionButton title="Add" onpress={() => { } }/>
</View>
);
}
}
AppRegistry.registerComponent('GroceryApp', () => GroceryApp);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment