added api calls to get polygons from server

components/new-button.js

@@ -11,10 +11,16 @@ import {
 export default class WalkButton extends Component {
     constructor(props) {
         super(props);
-        this.erase = this.props.erase;
-        this.state = { value: this.props.value};
+        this.start = this.props.start;
+        this.stop = this.props.stop;
+        this.state = {
+            value: this.props.value,
+            activeWalk: false,  
+            buttonText: "Start Capture",
+            buttonColour: 'rgba(0,255,0,0.5)'
+        };
     }
-
+    
     formatValue() {
         return this.state.value;
     }
@@ -23,14 +29,31 @@ export default class WalkButton extends Component {
         return (
             <View style ={[{paddingVertical: 15}, {flex: 1}]}>
             <TouchableHighlight
-                onPress=  {() => this.erase()}
+                onPress=  {() => {
+                    if (this.state.activeWalk){
+                        console.log("state true to false")
+                        this.setState({
+                            activeWalk: false,
+                            buttonText: "Start Capture",
+                            buttonColour: 'rgba(0,255,0,0.5)'
+                        })
+                        this.start();
+                    }else{
+                        console.log("state false to true")
+                        this.setState({
+                            activeWalk: true,
+                            buttonText: "Stop Capture",
+                            buttonColour: 'rgba(255,0,0,0.5)'
+                        })
+                        this.stop()
+                    }}}
                 // style={sharedStyles.new}
             >
                     <Text style={{
                         paddingVertical: 10,
                         fontSize: 30, 
-                        backgroundColor: 'rgba(0,255,0,0.5)',
-                        textAlign: 'center'}}>Start Capture</Text>
+                        backgroundColor: this.state.buttonColour,
+                        textAlign: 'center'}}>{this.state.buttonText}</Text>
                     
             </TouchableHighlight>
             </View>