Skip to content

Instantly share code, notes, and snippets.

@puf
Created December 14, 2015 17:52
Show Gist options
  • Save puf/3364a8697f620be38fe7 to your computer and use it in GitHub Desktop.
Save puf/3364a8697f620be38fe7 to your computer and use it in GitHub Desktop.
Simple example of a React Native chat app for Android (using Firebase and ReactFire)
'use strict';
var React = require('react-native');
var Firebase = require('firebase');
var ReactFireMixin = require('reactfire');
var {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
TouchableHighlight,
} = React;
var CoolProject = React.createClass({
mixins: [ReactFireMixin],
getInitialState: function() {
return {
items: []
};
},
componentWillMount: function() {
Firebase.enableLogging(true);
thisref = new Firebase('https://nanochat.firebaseio.com/chat');
this.bindAsArray(ref, 'items');
},
_onPressButton: function() {
this.ref.push({ name: 'puf', message: this.state.text });
},
render: function() {
var createItem = function(item, index) {
return <Text>{item.name}: {item.message}</Text>
};
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native and Firebase!
</Text>
{this.state.items.map(createItem)}
<View style={styles.horizontal}>
<TextInput onChangeText={(text) => this.setState({ text: text})} value={this.state.text} />
<TouchableHighlight onPress={this._onPressButton}>
<Text>Send</Text>
</TouchableHighlight>
</View>
</View>
);
}
});
var 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,
},
});
AppRegistry.registerComponent('CoolProject', () => CoolProject);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment