made join button, made menu buttons

App.js

@@ -17,7 +17,9 @@ import RunInfoNumeric from './components/run-info-num';
 
 import MapView from 'react-native-maps';
 import NewButton from "./components/new-button";
+import JoinButton from "./components/join-button";
 import CapturedArea from "./components/captured-area";
+import RoomInput from "./components/room-input";
 const instructions = Platform.select({
   ios: 'Press Cmd+R to reload,\n' +
     'Cmd+D or shake for dev menu',
@@ -93,7 +95,6 @@ export default class App extends Component<Props> {
                         strokeWidth={5}
                     />
                     {this.state.captures.map((capture, i) => {
-                        {console.log(capture);}
                         return <MapView.Polygon
                             key={i}
                             coordinates={capture.coordinates}
@@ -105,22 +106,23 @@ export default class App extends Component<Props> {
                     )
                     }
                 </MapView>
-                <View style={styles.infoWrapper}>
+                <RoomInput/>
+                <View style={styles.menu}>
+                
+                    <View style={styles.new}>
+                        <NewButton erase={() => {this.setState({walkMarkers: []})}}/>
+                    </View>
 
-                   {/*<RunInfoNumeric title = "Distance"*/}
-                                   {/*unit="km"*/}
-                                   {/*ref={(info) => this.distanceInfo = info}*/}
-                   {/*/>*/}
-                   {/*<RunInfoNumeric title = "Speed"*/}
-                                   {/*unit="km/h"*/}
-                                   {/*ref={(info) => this.speedInfo = info}*/}
-                   {/*/>*/}
-                   {/*<RunInfo title = "Direction"*/}
-                            {/*value = "NE"*/}
-                            {/*ref={(info) => this.directionInfo = info}*/}
-                   {/*/>*/}
-                   <NewButton erase={() => {this.setState({walkMarkers: []})}}/>
-                 </View>
+                    <View style={styles.infoWrapper}>
+                    
+                        <JoinButton join={() => {}}/>
+                        <JoinButton join={() => {}}/>
+                        <JoinButton join={() => {}}/>
+                        <JoinButton join={() => {}}/>
+                    
+                        
+                    </View>
+                </View>
            </View>
     );
   }
@@ -128,10 +130,29 @@ export default class App extends Component<Props> {
 
 const styles = StyleSheet.create({
     infoWrapper: {
+        // position: 'absolute',
+        // left: 0,
+        // bottom: 0,
+        // right: 0,
+        paddingVertical: 0,
+        flexDirection: 'row',
+        flex: 1
+    },
+    menu: {
+        
         position: 'absolute',
         left: 0,
         bottom: 0,
         right: 0,
+        flexDirection: 'column',
+        flex: 1
+    },
+    new: {
+        // position: 'absolute',
+        // left: 0,
+        // bottom: 60,
+        // right: 0,
+        paddingHorizontal: 10,
         flexDirection: 'row',
         flex: 1
     },

components/join-button.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import sharedStyles from '../shared-styles';
+import {
+    TouchableHighlight,
+    Platform,
+    StyleSheet,
+    Text,
+    View
+} from 'react-native';
+
+export default class JoinButton extends Component {
+    constructor(props) {
+        super(props);
+        this.join = this.props.join;
+        this.state = { value: this.props.value};
+    }
+
+    formatValue() {
+        return this.state.value;
+    }
+
+    render() {
+        return (
+            <View style ={[sharedStyles.runInfoWrapper, {flex: 1}]}>
+            <TouchableHighlight
+                onPress=  {() => this.join()}
+                // style={sharedStyles.new}
+            >
+                <Text style={{fontSize: 25, textAlign: 'center'}}>Join</Text>
+            </TouchableHighlight>
+            </View>
+
+        )
+    }
+}

components/new-button.js

@@ -21,12 +21,17 @@ export default class NewButton extends Component {
 
     render() {
         return (
-            <View style ={[sharedStyles.runInfoWrapper, {flex: 1}]}>
+            <View style ={[{paddingVertical: 15}, {flex: 1}]}>
             <TouchableHighlight
                 onPress=  {() => this.erase()}
                 // style={sharedStyles.new}
             >
-                    <Text style={{fontSize: 25, textAlign: 'center'}}>New</Text>
+                                        <Text style={{
+                        paddingVertical: 10,
+                        fontSize: 30, 
+                        backgroundColor: 'rgba(0,255,0,0.5)',
+                        textAlign: 'center'}}>Start Capture</Text>
+                    
             </TouchableHighlight>
             </View>
 

shared-styles.js

@@ -2,7 +2,7 @@ import { StyleSheet} from 'react-native';
 
 export default StyleSheet.create({
     runInfoWrapper: {
-        backgroundColor: 'rgba(255,255,255,0.75)',
+        backgroundColor: 'rgba(255,255,255,1)',
         paddingVertical: 15
     },
     runInfoTitle: {