Tracking should work, need to implement endtoend

App.js

@@ -6,8 +6,7 @@ import Login from "./components/Login";
 
 export default class App extends React.Component {
   state = {
-    userLocation: null,
-    usersHistory: []
+    userLocation: null
   };
 
   userTrackingHandler = () => {

components/GameList.js

 import React, { Component, Fragment } from "react";
-import { FlatList, Button } from "react-native";
+import { FlatList, Button, Picker, Text, StyleSheet } from "react-native";
+
+import LocationTracker from "./LocationTracker";
 
 class GameList extends Component {
   constructor(props) {
     super(props);
     this.state = {
       games: [],
+      tracking: false,
       selectedGame: null,
       editForm: false
     };
+
+    intervalID = 0;
   }
 
   componentDidMount() {
@@ -28,17 +33,69 @@ class GameList extends Component {
       });
   }
 
+  handleTrackingChange() {
+    this.setState({ tracking: !this.state.tracking });
+  }
+
+  startTracking() {
+    this.intervalID = setInterval(() => {
+      console.log("Nyt träkätää nim birusti.");
+    }, 3000);
+  }
+
+  stopTracking() {
+    clearInterval(this.intervalID);
+    console.log("Nyt lopetetaa seuranta.");
+  }
+
+  componentDidUpdate() {
+    if (this.state.tracking) {
+      this.startTracking();
+    } else if (!this.state.tracking) {
+      this.stopTracking();
+    }
+  }
+  componentWillUnmount() {
+    clearInterval(this.intervalID);
+  }
   render() {
-    return (
-      <Fragment>
-        {this.state.games.length > 0 && (
-          <FlatList
-            data={this.state.games}
-            renderItem={({ item }) => <Button title={item.name} />}
+    if (this.state.games.length > 0) {
+      const items = (
+        <Fragment>
+          <Picker
+            style={styles.picker}
+            selectedValue={this.state.selectedGame}
+            onValueChange={(selectedGame, itemIndex) =>
+              this.setState({ selectedGame })
+            }
+          >
+            {this.state.games.map(game => (
+              <Picker.Item label={game.name} value={game.id} />
+            ))}
+          </Picker>
+          <LocationTracker
+            tracking={this.state.tracking}
+            handleTrackingChange={this.handleTrackingChange.bind(this)}
           />
-        )}
-      </Fragment>
-    );
+        </Fragment>
+      );
+      return <Fragment>{items}</Fragment>;
+    } else return null;
   }
 }
+
+const styles = StyleSheet.create({
+  picker: {
+    width: 200,
+    height: 100
+  }
+});
+
 export default GameList;
+
+// {this.state.games.length > 0 && (
+//           <FlatList
+//             data={this.state.games}
+//             renderItem={({ item }) => <Button title={item.name} />}
+//           />
+//         )}

components/LocationTracker.js

+import React, { Fragment } from "react";
+import { Switch, Text, StyleSheet } from "react-native";
+
+const LocationTracker = props => {
+  return (
+    <Fragment>
+      <Text style={styles.titleText}>Tracking:</Text>
+      <Switch
+        style={styles.switch}
+        value={props.tracking}
+        onValueChange={props.handleTrackingChange}
+      />
+    </Fragment>
+  );
+};
+
+const styles = StyleSheet.create({
+  switch: {},
+  titleText: {
+    fontSize: 40,
+    fontWeight: "bold",
+    textAlign: "center",
+    textAlignVertical: "center"
+  }
+});
+
+export default LocationTracker;