nat
/
resin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve look of feed interruption

This commit is contained in:
Nat 2021-05-30 10:28:54 -03:00
parent cae19ce896
commit 9b712e595d
2 changed files with 44 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/navigation/navigators.js
View File

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

47
src/components/pages/feed.js
View File

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