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

Fix centering issue with the timeline interruption

This commit is contained in:
Nat 2022-05-16 17:53:02 -07:00
parent 985cbe6ca1
commit 00414df2a3
1 changed files with 22 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -69,13 +69,13 @@ const Feed = (props) => {
}); });
let endOfTimelineMessage = <></>; let endOfTimelineMessage = <></>;
if (state.postsRendered || state.loaded && state.posts.length == 0) { if (state.postsRendered) {
// Only render the timeline interruption if all of the posts have been // Only render the timeline interruption if all of the posts have been
// rendered in the feed. // rendered in the feed.
endOfTimelineMessage = <> endOfTimelineMessage = <>
<View style = { <View style = {
state.posts.length == 0 state.posts.length == 0
? styles.ifCaughtUp ? styles.interruption.container
: styles.interruption.topBorder : styles.interruption.topBorder
}> }>
<View style = { styles.interruption.inner }> <View style = { styles.interruption.inner }>
@ -103,17 +103,14 @@ const Feed = (props) => {
return ( return (
<> <>
<StatusBarSpace />
{ state.loaded { state.loaded
? state.posts.length > 0 ? <ScrollView contentContainerStyles = { styles.container }>
? <ScrollView> <TimelineView
<TimelineView navigation = { props.navigation }
navigation = { props.navigation } posts = { state.posts }
posts = { state.posts } onTimelineLoaded = { _handleTimelineLoaded }/>
onTimelineLoaded = { _handleTimelineLoaded }/> { endOfTimelineMessage }
{ endOfTimelineMessage } </ScrollView>
</ScrollView>
: endOfTimelineMessage
: <></> : <></>
} }
</> </>
@ -123,14 +120,20 @@ const Feed = (props) => {
const screen_width = Dimensions.get("window").width; const screen_width = Dimensions.get("window").width;
const screen_height = Dimensions.get("window").height; const screen_height = Dimensions.get("window").height;
const styles = { const styles = {
timeline: {
height: screen_height - (screen_height / 12)
},
ifCaughtUp: {
flexGrow: 1,
justifyContent: "center",
},
interruption: { interruption: {
container: {
/* HACK: The space between the top of the screen and the bottom
* tabs bar is about `screen_height - 100. See issue #7359 on the
* react-navigation github repository. There is supposed to be
* a way make a ScrollView's height at least the available viewport
* using flexGrow, which we need as a container to use
* justifyContent, but that doesn't seem to work here for some
* reason. It'll be slightly off-center but the user never should
* be able to accidentally scroll on this page.
*/
height: screen_height - 100,
justifyContent: "center",
},
topBorder: { topBorder: {
borderTopWidth: 1, borderTopWidth: 1,
borderTopColor: "#CCC", borderTopColor: "#CCC",