Skip to content

Instantly share code, notes, and snippets.

@nicholasstephan

nicholasstephan/ChatBite

Created February 7, 2016 00:49
Download ZIP

Revisions

  1. nicholasstephan created this gist Feb 7, 2016.
    204 changes: 204 additions & 0 deletions ChatBite
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,204 @@
    'use strict';

    import React, {
    AppRegistry,
    Component,
    StyleSheet,
    Text,
    View,
    Navigator,
    TouchableOpacity,
    ScrollView,
    } from 'react-native';

    import Firebase from 'firebase';



    class Chat extends Component {
    constructor() {
    super();
    this.state = {
    chatSnapshot: null,
    };
    }
    componentWillMount() {
    this._ref = new Firebase("https://nicholasstephan.firebaseio.com/chats/" + this.props.id + "/messages");
    this._ref.on('value', (snapshot) => {
    this.setState({chatSnapshot:snapshot});
    });
    }
    componentWillUnmount() {
    this._ref.off();
    }
    render() {
    let messages = [];

    if(this.state.chatSnapshot) {
    this.state.chatSnapshot.forEach((messageSnapshot) => {
    let id = messageSnapshot.key();
    let value = messageSnapshot.val();
    messages.push(
    <View
    key={id}
    style={{
    padding: 16,
    backgroundColor: 'lightgray',
    borderRadius: 4,
    margin: 8,
    }}>

    <Text
    style={{
    fontSize: 16,
    }}>
    {value.text}
    </Text>

    </View>
    );
    });
    }


    return (
    <View
    style={{
    flex: 1,
    backgroundColor: 'white',
    }}>

    <TouchableOpacity
    style={{
    flex: 0,
    padding: 16,
    paddingTop: 36,
    backgroundColor: 'slategray',
    }}
    onPress={() => this.props.navigator.pop()}>

    <Text
    style={{
    color: 'white'
    }}>
    Back
    </Text>

    </TouchableOpacity>


    <ScrollView
    style={{
    flex: 1,
    }}>

    {messages}

    </ScrollView>

    <View
    style={{
    flex: 0,
    height: 60,
    backgroundColor: 'slategray',
    }}>

    </View>

    </View>
    );
    }
    }


    class Chats extends Component {
    constructor() {
    super();
    this.state = {
    chats: [],
    };
    }
    componentWillMount() {
    fetch("https://nicholasstephan.firebaseio.com/chats.json").then(
    (result) => {
    let chats = JSON.parse(result._bodyText);
    this.setState({chats});
    },
    (err) => {
    console.error("Failed to get chats from firebase.");
    }
    );
    }
    render() {
    return (
    <View
    style={{
    flex: 1,
    backgroundColor:'white',
    }}>

    <View
    style={{
    flex: 0,
    padding: 16,
    paddingTop: 36,
    backgroundColor: 'slategray',
    }}>

    <Text
    style={{
    color: 'white',
    textAlign: 'center',
    }}>
    Chat
    </Text>

    </View>

    {this.state.chats.map((chat, id) => (
    <TouchableOpacity
    key={id}
    style={{
    padding:20,
    backgroundColor: 'silver',
    borderBottomWidth: 1,
    borderBottomColor: 'white',
    }}
    onPress={()=> {
    this.props.navigator.push({
    component: Chat,
    props: {
    id: id
    }
    });
    }}>
    <Text style={{fontSize:16}}>{chat.name}</Text>
    </TouchableOpacity>
    ))}
    </View>
    );
    }

    }


    class ChatBite extends Component {
    render() {
    return (
    <Navigator
    initialRoute={{component:Chats}}
    renderScene={(route, navigator)=> <route.component navigator={navigator} {...route.props}/>}
    sceneStyle={{
    flex: 1,
    }}
    style={{
    backgroundColor: 'black',
    }}
    />
    );
    }


    }

    AppRegistry.registerComponent('ChatBite', () => ChatBite);