Skip to content
This repository has been archived by the owner on Feb 15, 2019. It is now read-only.

support transucent status bar #104

Closed
wants to merge 4 commits into from
Closed

support transucent status bar #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fc539ae
support transucent status bar
chirag04 Sep 20, 2016
860ca60
keep is consistent with tabbar etc
chirag04 Sep 22, 2016
9d4192e
updates
chirag04 Sep 22, 2016
4c52e4a
use 25 as height
chirag04 Sep 26, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions src/ExNavigationBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,9 +242,10 @@ export default class ExNavigationBar extends PureComponent {
});

const backgroundComponents = scenesProps.map(this._renderBackground, this);
const wrapperStyle = [styles.wrapper, { paddingTop: APPBAR_HEIGHT + this.props.statusBarHeight }];

return (
<View pointerEvents={this.props.visible ? 'auto' : 'none'} style={styles.wrapper}>
<View pointerEvents={this.props.visible ? 'auto' : 'none'} style={wrapperStyle}>
{isTranslucent && <Components.BlurView style={[styles.translucentUnderlay, {height}]} />}

<Animated.View style={containerStyle}>
Expand Down Expand Up @@ -370,7 +371,6 @@ export default class ExNavigationBar extends PureComponent {
}
}


ExNavigationBar.DEFAULT_HEIGHT = APPBAR_HEIGHT + STATUSBAR_HEIGHT;
ExNavigationBar.DEFAULT_HEIGHT_WITHOUT_STATUS_BAR = APPBAR_HEIGHT;
ExNavigationBar.DEFAULT_BACKGROUND_COLOR = BACKGROUND_COLOR;
Expand All @@ -386,7 +386,6 @@ const styles = StyleSheet.create({
top: 0,
left: 0,
right: 0,
paddingTop: ExNavigationBar.DEFAULT_HEIGHT,
// TODO(brentvatne): come up with a better solution for making the
// elevation show up properly on Android
paddingBottom: Platform.OS === 'android' ? 16 : 0,
Expand Down
42 changes: 33 additions & 9 deletions src/ExNavigationStack.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,10 @@ const DEFAULT_ROUTE_CONFIG: ExNavigationConfig = {
styles: Platform.OS === 'ios' ? NavigationStyles.SlideHorizontal : NavigationStyles.Fade,
};

const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : (global.__exponent ? 24 : 0);
const DEFAULT_STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 25;
const STATUSBAR_HEIGHT = Platform.OS === 'ios'
? DEFAULT_STATUSBAR_HEIGHT
: (global.__exponent ? DEFAULT_STATUSBAR_HEIGHT : 0);

type TransitionFn = (
transitionProps: NavigationTransitionProps,
Expand Down Expand Up @@ -458,6 +461,16 @@ class ExNavigationStack extends PureComponent<any, Props, State> {
);
}

_getNavigationBarHeight(latestRouteConfig) {
let height = NavigationBar.DEFAULT_HEIGHT;

if (latestRouteConfig.statusBar && latestRouteConfig.statusBar.translucent) {
height = NavigationBar.DEFAULT_HEIGHT_WITHOUT_STATUS_BAR + DEFAULT_STATUSBAR_HEIGHT;
};

return height;
}

_renderAlertBar = (props: ExNavigationSceneRendererProps) => {
const latestRoute = this._getRouteAtIndex(props.scenes, props.scenes.length - 1);
const latestRouteConfig: ExNavigationConfig = latestRoute.config;
Expand All @@ -467,8 +480,13 @@ class ExNavigationStack extends PureComponent<any, Props, State> {

const AlertBarComponent = this.props.alertBarComponent || this.context.alertBarComponent || ExNavigationAlertBar;

const alertBarContainerStyle = [
styles.alertBarContainer,
{ top: navigationBarIsVisible ? this._getNavigationBarHeight(latestRouteConfig): 0 },
];

return (
<View style={[styles.alertBarContainer, navigationBarIsVisible ? null : {top: 0}]}>
<View style={alertBarContainerStyle}>
<AlertBarComponent
style={navigationBarIsVisible ? null : {paddingTop: STATUSBAR_HEIGHT}}
getNavigatorContext={this._getNavigatorContext}
Expand Down Expand Up @@ -503,11 +521,17 @@ class ExNavigationStack extends PureComponent<any, Props, State> {
latestRouteConfig.navigationBar &&
latestRouteConfig.navigationBar.visible !== false;

// TODO: add height and statusBarHeight options here
// pass the statusBarHeight to headerComponent if statusBar is translucent
let statusBarHeight = STATUSBAR_HEIGHT;
if (latestRouteConfig.statusBar && latestRouteConfig.statusBar.translucent) {
statusBarHeight = DEFAULT_STATUSBAR_HEIGHT;
}

// TODO: add height here
return (
<HeaderComponent
{...props}
statusBarHeight={statusBarHeight}
getNavigatorContext={this._getNavigatorContext}
navigatorUID={this.state.navigatorUID}
visible={navigationBarIsVisible}
Expand Down Expand Up @@ -690,7 +714,12 @@ class ExNavigationStack extends PureComponent<any, Props, State> {
if (hasCustomHeight) {
style = ([...style, {marginTop: customHeight}] : Array<number|Object>);
} else {
style = [...style, isTranslucent ? styles.withNavigationBarTranslucent : styles.withNavigationBarOpaque];
style = [
...style,
isTranslucent ?
styles.withNavigationBarTranslucent
: { paddingTop: this._getNavigationBarHeight(routeConfig) },
];
}
} else {
style = [...style, styles.withoutNavigationBar];
Expand Down Expand Up @@ -800,13 +829,8 @@ const styles = StyleSheet.create({
withNavigationBarTranslucent: {
paddingTop: 0,
},
withNavigationBarOpaque: {
// TODO: needs to be dynamic based off of current navbar height
paddingTop: NavigationBar.DEFAULT_HEIGHT,
},
alertBarContainer: {
position: 'absolute',
top: NavigationBar.DEFAULT_HEIGHT,
left: 0,
right: 0,
},
Expand Down