Improve look of feed interruption

src/components/navigation/navigators.js

@@ -9,7 +9,7 @@ import TrayJsx from "src/components/navigation/tray";
 export const ScreenWithTrayJsx = (props) => {
     return (
         <SafeAreaView style = { { flex: 1 } }>
-            <ScrollView>
+            <ScrollView contentContainerStyle = { props.contentContainerStyle }>
                 <StatusBarSpace
                     color = {
                         props.statusBarColor

src/components/pages/feed.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Dimensions, View, Image, Text } from "react-native";
+import { Ionicons } from '@expo/vector-icons';
 
 import TimelineViewJsx from "src/components/posts/timeline-view";
 import { ScreenWithTrayJsx } from "src/components/navigation/navigators";
@@ -57,7 +58,7 @@ const FeedJsx = (props) => {
             })
             .then(() =>
                 setState({...state,
-                    posts: posts,
+                    posts,
                     loaded: true,
                 })
             );
@@ -68,25 +69,35 @@ const FeedJsx = (props) => {
             { state.loaded
                 ? <ScreenWithTrayJsx
                         active = "Feed"
+                        contentContainerStyle = {
+                            state.posts.length == 0
+                                ? styles.ifCaughtUp
+                                : {}
+                        }
                         navigation = { props.navigation }>
 
                     <TimelineViewJsx
                             navigation = { props.navigation }
                             posts = { state.posts } />
-                    <View style = { styles.interruptionOuter }>
+                    <View style = {
+                            state.posts.length == 0
+                                ? {}
+                                : styles.interruption.topBorder
+                          }>
 
-                        <View style = { styles.interruption }>
-                            <Image
-                                source = { checkmark }
-                                style = { styles.checkmark }/>
+                        <View style = { styles.interruption.inner }>
+                            <Ionicons
+                                name="ios-checkmark-circle-outline"
+                                size= { 150 }
+                                color="black" />
 
-                            <Text style = { styles.interruptionHeader }>
+                            <Text style = { styles.interruption.header }>
                                 You're all caught up.
                             </Text>
                             <Text> Wow, it sure is a lovely day outside 🌳 </Text>
 
                             <TouchableWithoutFeedback
-                                    style = { styles.buttonOlder }
+                                    style = { styles.interruption.button }
                                     onPress = {
                                         () => props.navigation.navigate("OlderPosts")
                                     }>
@@ -107,32 +118,34 @@ const styles = {
     timeline: {
         height: screen_height - (screen_height / 12)
     },
-    interruptionOuter: {
+    ifCaughtUp: {
+        flexGrow: 1,
+        justifyContent: "center",
+    },
+    interruption: {
+        topBorder: {
             borderTopWidth: 1,
             borderTopColor: "#CCC",
         },
-    interruption: {
+        inner: {
             marginTop: 10,
             marginBottom: 10,
 
             justifyContent: "center",
             alignItems: "center",
         },
-    interruptionHeader: {
+        header: {
             fontSize: 21
         },
-    checkmark: {
-        width: screen_width * 0.3,
-        height: screen_width * 0.3
-    },
-    buttonOlder: {
+        button: {
             borderWidth: 1,
             borderColor: "#888",
             borderRadius: 5,
 
             margin: 30,
             padding: 5
-    }
+        },
+    },
 };
 
 export default FeedJsx;