import React from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';
import { Actions } from 'react-native-router-flux';

import Button from '../common/Button';
import Input from '../common/Input';
import { marginTop } from '../styles/layout';

export default class MainScreen extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      activity: null
    };
  }

  componentWillMount() {
    const memberRoute = `http://192.168.0.139:3000/members/${this.props.id}`;
    fetch(memberRoute).then((response) => {
      return response.json();
    }).then((json) => {
      console.log(json);
      this.setState({ activity: json.activity });
    }).catch((error) => {
      console.error(error);
    });
  }

  renderActivityLabel() {
    return (
      <View>
        <Text>{this.state.activity}</Text>
      </View>
    );
  }

  render() {
    return (
      <View>
        {this.renderActivityLabel()}
        <Button />
        <Button />
        <Button />
        <Button />
      </View>
    );
  }
}

const styles = StyleSheet.create({

});

@@ -137,16 +137,57 @@
 r-flux';
+%0Aimport MapView from 'react-native-maps';
 %0A%0Aimport
@@ -791,32 +791,324 @@
 );%0A    %7D);%0A  %7D%0A%0A
+  renderMap() %7B%0A    return (%0A      %3CMapView%0A        style=%7Bstyles.mapContainer%7D%0A        provider=%22google%22%0A        initialRegion=%7B%7B%0A          latitude: 37.78825,%0A          longitude: -122.4324,%0A          latitudeDelta: 0.0922,%0A          longitudeDelta: 0.0421,%0A        %7D%7D%0A      /%3E%0A    );%0A  %7D%0A%0A
   renderActivity
@@ -1241,34 +1241,139 @@
 rn (%0A      %3CView
-%3E%0A
+ style=%7Bstyles.fullContainer%7D%3E%0A        %7Bthis.renderMap()%7D%0A        %3CView style=%7Bstyles.contentContainer%7D%3E%0A  
         %7Bthis.re
@@ -1393,32 +1393,34 @@
 abel()%7D%0A        
+  
 %3CButton /%3E%0A     
@@ -1406,32 +1406,34 @@
      %3CButton /%3E%0A
+  
         %3CButton 
@@ -1435,32 +1435,34 @@
 tton /%3E%0A        
+  
 %3CButton /%3E%0A     
@@ -1448,32 +1448,34 @@
      %3CButton /%3E%0A
+  
         %3CButton 
@@ -1473,24 +1473,40 @@
  %3CButton /%3E%0A
+        %3C/View%3E%0A
       %3C/View
@@ -1556,13 +1556,154 @@
 reate(%7B%0A
+  fullContainer: %7B%0A    flex: 1,%0A    flexDirection: 'column',%0A  %7D,%0A  mapContainer: %7B%0A    flex: 1,%0A  %7D,%0A  contentContainer: %7B%0A    flex: 2,%0A  %7D,
 %0A%7D);%0A

Reorganize to contain basic map.