fabioespinosa/Firebase Simple Group Chat FBDC

## Firebase Simple Group Chat FBDC
import React, { Component } from 'react';
import {
	Container,
	Header,
	Content,
	List,
	ListItem,
	Left,
	Body,
	Right,
	Thumbnail,
	Text,
	Input,
	Button
} from 'native-base';
import firebase from 'firebase';

export default class ListAvatarExample extends Component {
	state = {
		texto: '',
		mensajes: []
	};

	componentDidMount() {
		const config = {
			apiKey: '',
			authDomain: '',
			databaseURL: '',
			projectId: '',
			storageBucket: '',
			messagingSenderId: ''
		};
		firebase.initializeApp(config);

		firebase
			.database()
			.ref('/mensajes')
			.on('value', snapshot => {
				const mensajes = [];
				Object.keys(snapshot.val()).forEach(key => {
					mensajes.push(snapshot.val()[key]);
				});
				console.log(mensajes);
				this.setState({ mensajes: mensajes.reverse() });
			});
	}

	enviar = () => {
		const obj = {};

		this.state.mensajes.forEach((mensaje, index) => {
			obj[index] = mensaje;
		});
		obj['nuevo'] = this.state.texto;
		firebase
			.database()
			.ref('/mensajes')
			.set(obj);
	};

	render() {
		return (
			<Container>
				<Header />
				<Content>
					<Input
						onChangeText={texto => {
							this.setState({ texto });
						}}
						value={this.state.texto}
					/>
					<Button onPress={this.enviar}>
						<Text>Enviar</Text>
					</Button>
					<List>
						{this.state.mensajes.map(mensaje => {
							return (
								<ListItem avatar>
									<Left>{/* <Thumbnail source={{ uri: 'Image URL' }} /> */}</Left>
									<Body>
										{/* <Text>Kumar Pratik</Text> */}
										<Text note>{mensaje}</Text>
									</Body>
									<Right>{/* <Text note>3:43 pm</Text> */}</Right>
								</ListItem>
							);
						})}
					</List>
				</Content>
			</Container>
		);
	}
}
	import React, { Component } from 'react';
	import {
	Container,
	Header,
	Content,
	List,
	ListItem,
	Left,
	Body,
	Right,
	Thumbnail,
	Text,
	Input,
	Button
	} from 'native-base';
	import firebase from 'firebase';

	export default class ListAvatarExample extends Component {
	state = {
	texto: '',
	mensajes: []
	};

	componentDidMount() {
	const config = {
	apiKey: '',
	authDomain: '',
	databaseURL: '',
	projectId: '',
	storageBucket: '',
	messagingSenderId: ''
	};
	firebase.initializeApp(config);

	firebase
	.database()
	.ref('/mensajes')
	.on('value', snapshot => {
	const mensajes = [];
	Object.keys(snapshot.val()).forEach(key => {
	mensajes.push(snapshot.val()[key]);
	});
	console.log(mensajes);
	this.setState({ mensajes: mensajes.reverse() });
	});
	}

	enviar = () => {
	const obj = {};

	this.state.mensajes.forEach((mensaje, index) => {
	obj[index] = mensaje;
	});
	obj['nuevo'] = this.state.texto;
	firebase
	.database()
	.ref('/mensajes')
	.set(obj);
	};

	render() {
	return (
	<Container>
	<Header />
	<Content>
	<Input
	onChangeText={texto => {
	this.setState({ texto });
	}}
	value={this.state.texto}
	/>
	<Button onPress={this.enviar}>
	<Text>Enviar</Text>
	</Button>
	<List>
	{this.state.mensajes.map(mensaje => {
	return (
	<ListItem avatar>
	<Left>{/* <Thumbnail source={{ uri: 'Image URL' }} /> */}</Left>
	<Body>
	{/* <Text>Kumar Pratik</Text> */}
	<Text note>{mensaje}</Text>
	</Body>
	<Right>{/* <Text note>3:43 pm</Text> */}</Right>
	</ListItem>
	);
	})}
	</List>
	</Content>
	</Container>
	);
	}
	}