From 863b8390ceff35cfe277c6a50800001d403e4a37 Mon Sep 17 00:00:00 2001 From: Guillaume Marty Date: Tue, 31 Jan 2017 14:38:29 +0000 Subject: [PATCH 1/2] Full screen experience - Content scroll underneath transparent status bar --- js/App.js | 9 ++++----- js/components/Header.js | 6 +++++- js/components/ListItem.js | 3 +-- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/js/App.js b/js/App.js index 6ffe919..f787270 100644 --- a/js/App.js +++ b/js/App.js @@ -5,7 +5,6 @@ import { View, StatusBar, StyleSheet, - Platform, AppState, } from 'react-native'; @@ -121,7 +120,7 @@ export class App extends Component { ; - default: - var Component = this.routes[id].component; + default: { + const Component = this.routes[id].component; return ; + } } } } @@ -155,7 +155,6 @@ const styles = StyleSheet.create({ scene: { backgroundColor: '#333', - paddingTop: Platform.OS === 'ios' ? 20 : 24, }, }); diff --git a/js/components/Header.js b/js/components/Header.js index ca56cd7..cc79c28 100644 --- a/js/components/Header.js +++ b/js/components/Header.js @@ -5,6 +5,8 @@ import { Text, StyleSheet, TouchableOpacity, + Platform, + StatusBar, } from 'react-native'; export default class Header extends Component { @@ -81,11 +83,13 @@ Header.propTypes = { navigator: PropTypes.object, }; -Header.HEIGHT = 54; +const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight; +Header.HEIGHT = 54 + STATUS_BAR_HEIGHT; const styles = StyleSheet.create({ header: { backgroundColor: '#333', + paddingTop: STATUS_BAR_HEIGHT, height: Header.HEIGHT, flexDirection: 'row', alignItems: 'center', diff --git a/js/components/ListItem.js b/js/components/ListItem.js index 2cecd00..ad15b69 100644 --- a/js/components/ListItem.js +++ b/js/components/ListItem.js @@ -114,8 +114,7 @@ const styles = StyleSheet.create({ image: { flex: 1, - paddingVertical: 10, - paddingHorizontal: 12, + padding: 12, width: null, height: null, resizeMode: 'cover', From a9581256a2095d7ecb7b88ea2c75e5d03599f6ef Mon Sep 17 00:00:00 2001 From: Guillaume Marty Date: Wed, 1 Feb 2017 12:55:11 +0000 Subject: [PATCH 2/2] Add a padding on top of the 1st item --- js/components/Header.js | 6 +++--- js/scenes/Home.js | 33 +++++++++++++++++++++++++++------ 2 files changed, 30 insertions(+), 9 deletions(-) diff --git a/js/components/Header.js b/js/components/Header.js index cc79c28..f751bca 100644 --- a/js/components/Header.js +++ b/js/components/Header.js @@ -83,13 +83,13 @@ Header.propTypes = { navigator: PropTypes.object, }; -const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight; -Header.HEIGHT = 54 + STATUS_BAR_HEIGHT; +Header.STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight; +Header.HEIGHT = 54 + Header.STATUS_BAR_HEIGHT; const styles = StyleSheet.create({ header: { backgroundColor: '#333', - paddingTop: STATUS_BAR_HEIGHT, + paddingTop: Header.STATUS_BAR_HEIGHT, height: Header.HEIGHT, flexDirection: 'row', alignItems: 'center', diff --git a/js/scenes/Home.js b/js/scenes/Home.js index 56e153c..7bde537 100644 --- a/js/scenes/Home.js +++ b/js/scenes/Home.js @@ -31,6 +31,7 @@ export class Home extends Component { // never bind functions in render(), it // messes with react's diffing logic this.onSettingsPress = this.onSettingsPress.bind(this); + this.renderHeader = this.renderHeader.bind(this); this.renderRow = this.renderRow.bind(this); this.onPanEnd = this.onPanEnd.bind(this); this.onScroll = this.onScroll.bind(this); @@ -46,20 +47,20 @@ export class Home extends Component { // create a clamped property that we can // use for translating the list view this.translateY = this.state.listY.interpolate({ - inputRange: [0, Header.HEIGHT], - outputRange: [0, Header.HEIGHT], + inputRange: [0, Header.HEIGHT - Header.STATUS_BAR_HEIGHT], + outputRange: [0, Header.HEIGHT - Header.STATUS_BAR_HEIGHT], extrapolate: 'clamp', }); // fades the header in/out in sync with list position this.opacity = this.translateY.interpolate({ - inputRange: [0, Header.HEIGHT], + inputRange: [0, Header.HEIGHT - Header.STATUS_BAR_HEIGHT], outputRange: [0, 1], }); // scales the header in/out in sync with list position this.scale = this.translateY.interpolate({ - inputRange: [0, Header.HEIGHT], + inputRange: [0, Header.HEIGHT - Header.STATUS_BAR_HEIGHT], outputRange: [0.95, 1], }); @@ -364,7 +365,10 @@ export class Home extends Component { * @param {Number} y */ clamp(y) { - if (y > Header.HEIGHT) return { value: Header.HEIGHT, offset: y - Header.HEIGHT }; + if (y > Header.HEIGHT) return { + value: Header.HEIGHT, + offset: y - Header.HEIGHT, + }; else if (y < 0) return { value: 0, offset: y }; else return { value: y, offset: 0 }; } @@ -391,7 +395,8 @@ export class Home extends Component { title="Home" action="Settings" navigator={this.navigator} - onActionPress={this.onSettingsPress}/> + onActionPress={this.onSettingsPress} + style={styles.header}/> + ); + } + renderRow({ value: { id, imageUri, createdByUser, timeCreated } }) { const publisherImageUri = createdByUser.imageUri; const publisherName = createdByUser.name; @@ -483,6 +495,15 @@ const styles = StyleSheet.create({ flex: 1, }, + firstRow: { + height: Header.STATUS_BAR_HEIGHT, + }, + + header: { + height: 54, + marginTop: Header.STATUS_BAR_HEIGHT / 2, + }, + listContainer: { flex: 1, position: 'absolute',