Refactoring into components

App.js

@@ -1,22 +1,22 @@
-import React from "react";
+import React, { Component } from "react";
 import {
-  FlatList,
   ActivityIndicator,
-  StyleSheet,
-  Text,
   View,
   ScrollView,
   RefreshControl,
-  Linking
+  StyleSheet
 } from "react-native";
-import { Card, Header } from "react-native-elements";
 import moment from "moment/min/moment-with-locales";
+import "moment/locale/sv";
+import Footer from "./components/Footer";
+import BouyCard from "./components/BouyCard";
+import Header from "./components/Header";
 
-export default class FetchExample extends React.Component {
+export default class FetchExample extends Component {
   constructor(props) {
     super(props);
     this.state = { isLoading: true };
-    moment.locale("sv-SE");
+    moment.locale("sv");
   }
 
   componentDidMount() {
@@ -26,7 +26,7 @@ export default class FetchExample extends React.Component {
         this.setState(
           {
             isLoading: false,
-            dataSource: responseJson.sort(this.bouySort)
+            dataSource: responseJson.sort(this._bouySort)
           },
           function() {}
         );
@@ -36,13 +36,13 @@ export default class FetchExample extends React.Component {
       });
   }
 
-  bouySort(a, b) {
+  _bouySort(a, b) {
     if (a.name < b.name) return -1;
     if (a.name > b.name) return 1;
     return 0;
   }
 
-  onRefresh = () => {
+  _onRefresh = () => {
     this.componentDidMount();
   };
 
@@ -57,62 +57,28 @@ export default class FetchExample extends React.Component {
 
     return (
       <View style={{ flex: 1, paddingTop: 20 }}>
-        <Header
-          centerComponent={{
-            text: "Badtemperaturer i Karlskrona kommun",
-            style: { color: "#fff" }
-          }}
-        />
+        <Header />
         <ScrollView
           contentContainerStyle={{ paddingBottom: 20 }}
           refreshControl={
             <RefreshControl
               refreshing={this.state.isLoading}
-              onRefresh={this.onRefresh}
+              onRefresh={this._onRefresh}
             />
           }
         >
           {this.state.dataSource.map((item, i) => (
-            <Card key={i}>
-              <Text h1 style={{ fontWeight: "bold", fontSize: 20 }}>
-                {item.name}
-              </Text>
-              <Text style={{ fontWeight: "bold", fontSize: 40 }}>
-                {Math.round(item.temperature)}°C
-              </Text>
-              <Text style={{ color: "gray", fontSize: 10 }}>
-                Uppdaterad {moment(new Date(item.time)).fromNow()}
-              </Text>
-            </Card>
+            <BouyCard key={i} item={item} />
           ))}
-          <Text
-            style={{
-              textAlign: "center",
-              color: "gray",
-              paddingTop: 20,
-              padding: 15
-            }}
-          >
-            Byggd av Andreas Cederström med data från Karlskrona kommun och All
-            Binary. Mer info på{" "}
-            <Text
-              style={{ color: "blue" }}
-              onPress={() => Linking.openURL("https://buoy.ioe.allbin.se")}
-            >
-              https://buoy.ioe.allbin.se
-            </Text>
-          </Text>
+          <Footer />
         </ScrollView>
       </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center"
+  link: {
+    color: "blue"
   }
 });

app.json

@@ -1,7 +1,7 @@
 {
   "expo": {
     "name": "Badtemperatur i Karlskrona",
-    "icon": "./icon.png",
+    "icon": "./assets/icon.png",
     "description":
       "Visa aktuella badtemperaturer vid stränderna i Karlskrona kommun.",
     "githubUrl": "https://github.com/cederstrom/karlskrona-badtemperatur",
@@ -11,6 +11,10 @@
     "sdkVersion": "27.0.0",
     "android": {
       "package": "com.cederstrom.badtemp"
+    },
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "cover"
     }
   }
 }

components/BouyCard.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { Text } from "react-native";
+import { Card } from "react-native-elements";
+import moment from "moment/min/moment-with-locales";
+
+export default class BouyCard extends React.Component {
+  constructor(props) {
+    super(props);
+    this.item = this.props.item;
+  }
+
+  render() {
+    return (
+      <Card>
+        <Text h1 style={{ fontWeight: "bold", fontSize: 20 }}>
+          {this.item.name}
+        </Text>
+        <Text style={{ fontWeight: "bold", fontSize: 35 }}>
+          {Math.round(this.item.temperature)}°C
+        </Text>
+        <Text style={{ color: "gray", fontSize: 10 }}>
+          Uppdaterad {moment(new Date(this.item.time)).fromNow()}
+        </Text>
+      </Card>
+    );
+  }
+}

components/Footer.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { Text, StyleSheet, Linking, View } from "react-native";
+
+export default class Footer extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <View>
+        <Text style={styles.footer}>
+          Byggd av{" "}
+          <Text
+            style={styles.link}
+            onPress={() =>
+              Linking.openURL(
+                "https://github.com/cederstrom/karlskrona-badtemperatur"
+              )
+            }
+          >
+            Andreas Cederström
+          </Text>
+          {". "}
+          Baserad på data från Karlskrona kommun och All Binary. Mer info på{" "}
+          <Text
+            style={styles.link}
+            onPress={() => Linking.openURL("https://buoy.ioe.allbin.se")}
+          >
+            https://buoy.ioe.allbin.se
+          </Text>
+        </Text>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  footer: {
+    textAlign: "center",
+    color: "gray",
+    paddingTop: 20,
+    paddingBottom: 20,
+    padding: 15
+  },
+  link: {
+    color: "blue"
+  }
+});

components/Header.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Header } from "react-native-elements";
+
+export default class FetchExample extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <Header
+        centerComponent={{
+          text: "Badtemperaturer i Karlskrona",
+          style: { color: "#fff", fontSize: 20 }
+        }}
+      />
+    );
+  }
+}