Full screen experience - Content scroll underneath transparent status bar #49
Conversation
| @@ -136,9 +135,10 @@ export class App extends Component { | |||
| renderScene({ id, data }, navigator) { | |||
| switch (id) { | |||
| case 'item': return <Item itemId={data.itemId} navigator={navigator}/>; | |||
| default: | |||
| var Component = this.routes[id].component; | |||
| default: { | |||
There was a problem hiding this comment.
Are the curly brackets needed? I'm just curious.
There was a problem hiding this comment.
Yes, it's to create a new scope to allow the use of const.
js/components/Header.js
Outdated
| @@ -81,11 +83,13 @@ Header.propTypes = { | |||
| navigator: PropTypes.object, | |||
| }; | |||
|
|
|||
| Header.HEIGHT = 54; | |||
| const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight; | |||
There was a problem hiding this comment.
Can we make the values 20 and 54 constants with self explained name?
There was a problem hiding this comment.
20 is the height of the status bar on iOS. In Android, we can just use StatusBar.currentHeight.
54 is the height we want the header to have. This should be pretty self explanatory already.
|
lgtm, left some nit comments. |
|
I'm not sure this is ok:
Perhaps we need to pad the list-item content in a bit more? |
|
Also on Android:
Overlapping components is not OK IMO. We may be able to pad in the list-item contents a little more and add some kind of semi-opaque black background to the system status-bar. But I fear that this might look strange still. |
There was a problem hiding this comment.
This isn't looking right at the moment. An Android status bar with lots of notification icons is going to look messy overlaid on top of the publisher profile and star components.
Wondering if there is a way to scroll the content under the status bar but have it offset by the height of the status-bar when scrollTop is 0. The hidden header UI will make this complex to implement.
|
I reckon it looks weird, but I thought that'd help for the discoverability of the hidden header. |
|
I was drinking a coffee and had an idea! All we have to do is increase the |
|
So in this update, I added a grey margin on top of the first item, but then scrolling down will reveal the header. I had to reduce the header to subtract the height of the status bar and fix the vertical positioning. It's not as hackish as it sounds and the result is nice. Let's land this now and we can always revisit it later. |
| @@ -121,7 +120,7 @@ export class App extends Component { | |||
| <View style={styles.container}> | |||
| <StatusBar | |||
| translucent={true} | |||
| backgroundColor="rgba(0, 0, 0, 0.2)" | |||
| backgroundColor="transparent" | |||
There was a problem hiding this comment.
Can we keep a bit of background color so that if status-bar icons are over a white background (in our app) they are still visible?
| if (y > Header.HEIGHT) return { | ||
| value: Header.HEIGHT, | ||
| offset: y - Header.HEIGHT, | ||
| }; |
There was a problem hiding this comment.
This is really funky syntax, can you find an alternative :-/
| @@ -436,6 +442,12 @@ export class Home extends Component { | |||
| ); | |||
| } | |||
|
|
|||
| renderHeader() { | |||
| return ( | |||
| <View style={styles.firstRow}/> | |||
There was a problem hiding this comment.
This element overhangs the header content and blocks the header buttons. 'Settings' button is difficult to press.
| inputRange: [0, Header.HEIGHT], | ||
| outputRange: [0, Header.HEIGHT], | ||
| inputRange: [0, Header.HEIGHT - Header.STATUS_BAR_HEIGHT], | ||
| outputRange: [0, Header.HEIGHT - Header.STATUS_BAR_HEIGHT], |
There was a problem hiding this comment.
Can you do this calculation once?
const MAX_Y = Header.HEIGHT - Header.STATUS_BAR_HEIGHT;
Full screen experience for added beauty.
See #43.