From c5e95cdb76e19596324ed2be1623dc9b526ff25e Mon Sep 17 00:00:00 2001 From: rikochet Date: Fri, 24 Aug 2018 21:11:06 +0800 Subject: [PATCH 1/2] add Statusbar marginTop for navTransparent When using navTransparent feature, the headerStyle is removed causing the navbar to be obstructed by the Statusbar. This fix adds marginTop to the headerStyle to that the navbar is aligned below the Statusbar. --- src/navigationStore.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/navigationStore.js b/src/navigationStore.js index fcf0b0991..26ce313fa 100644 --- a/src/navigationStore.js +++ b/src/navigationStore.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Image, Animated, Easing } from 'react-native'; +import { Statusbar, Image, Animated, Easing } from 'react-native'; import { createBottomTabNavigator, createMaterialTopTabNavigator, @@ -326,7 +326,7 @@ function createNavigationOptions(params) { if (navTransparent) { res.headerTransparent = true; - res.headerStyle = {}; + res.headerStyle = { marginTop: StatusBar.currentHeight }; } if (backToInitial) { From 7966f456129ba3199109f10a265675f375e45515 Mon Sep 17 00:00:00 2001 From: rikochet Date: Sat, 25 Aug 2018 13:37:49 +0800 Subject: [PATCH 2/2] fix typo --- src/navigationStore.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/navigationStore.js b/src/navigationStore.js index 26ce313fa..b6e21722b 100644 --- a/src/navigationStore.js +++ b/src/navigationStore.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Statusbar, Image, Animated, Easing } from 'react-native'; +import { StatusBar, Image, Animated, Easing } from 'react-native'; import { createBottomTabNavigator, createMaterialTopTabNavigator,