Fixing layout issues with statusbar on android

0xflotus · May 3, 2019 · 23519a2 · 23519a2
1 parent ab98460
commit 23519a2
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 22 deletions.
diff --git a/src/ThemeContextProvider.js b/src/ThemeContextProvider.js
@@ -103,7 +103,6 @@ class ThemeContextProvider extends Component<Props, State> {
  <StatusBar
  backgroundColor={appTheme.colors.androidToolbarColor}
  barStyle={isDarkThemeActivated ? 'light-content' : 'dark-content'}
- translucent
  animated
  />
  {children}

diff --git a/src/components/common/ScreenTitle.js b/src/components/common/ScreenTitle.js
@@ -6,7 +6,10 @@ import styled from 'styled-components';
 
 const Title = styled(Text)`
  width: 100%;
- margin-top: ${({ theme }) => theme.metrics.getWidthFromDP('15%')}px;
+ margin-top: ${({ theme }) => {
+ const percentage = Platform.OS === 'android' ? '8%' : '15%';
+ return theme.metrics.getWidthFromDP(percentage);
+ }}px;
  margin-left: ${({ theme }) => theme.metrics.largeSize}px;
  font-size: ${({ theme }) => theme.metrics.extraLargeSize * 1.7}px;
  font-family: CircularStd-Black;

diff --git a/src/components/common/player/components/PlayerComponent.js b/src/components/common/player/components/PlayerComponent.js
@@ -72,9 +72,8 @@ const PlayerComponent = ({
 }: Props): Object => (
  <Wrapper>
  <StatusBar
- backgroundColor="transparent"
+ backgroundColor="#111"
  barStyle="light-content"
- translucent
  animated
  />
  <BackgroundImage

diff --git a/src/components/common/player/components/PodcastImage.js b/src/components/common/player/components/PodcastImage.js
@@ -10,7 +10,6 @@ const Wrapper = styled(View)`
  width: 100%;
  justify-content: center;
  align-content: center;
- margin-top: ${({ theme }) => theme.metrics.mediumSize}px;
 `;
 
 const ImageContainer = styled(View)`

diff --git a/src/components/screens/home/routes.js b/src/components/screens/home/routes.js
@@ -37,7 +37,7 @@ const RootStack = createStackNavigator(
  ),
  navigationOptions: () => ({
  headerBackTitle: null,
- header: null,
+ headerTransparent: true,
  }),
  },
 

diff --git a/src/components/screens/search/components/SearchAuthorTextInput.js b/src/components/screens/search/components/SearchAuthorTextInput.js
@@ -13,7 +13,6 @@ const Wrapper = styled(View)`
  align-items: center;
  margin-vertical: ${({ theme }) => theme.metrics.largeSize}px;
  padding-horizontal: ${({ theme }) => theme.metrics.smallSize}px;
- height: ${({ theme }) => theme.metrics.getHeightFromDP('6%')};
  border-radius: 4px;
  background-color: ${({ theme }) => theme.colors.white};
 `;
@@ -35,6 +34,11 @@ const Input = styled(TextInput).attrs(({ theme }) => ({
  color: ${({ theme }) => theme.colors.darkText};
 `;
 
+const IconWrapper = styled(View)`
+ padding-top: ${({ theme }) => theme.metrics.mediumSize};
+ padding-bottom: ${({ theme }) => theme.metrics.getWidthFromDP('2.5%')};
+`;
+
 type Props = {
  onSearchForAuthor: Function,
  onToggleDarkLayer: Function,
@@ -58,11 +62,13 @@ const SearchAuthorTextInput = ({
  elevation: 4,
  }}
  >
- <Icon
- name="magnify"
- color={appStyles.colors.darkText}
- size={20}
- />
+ <IconWrapper>
+ <Icon
+ name="magnify"
+ color={appStyles.colors.darkText}
+ size={20}
+ />
+ </IconWrapper>
  <Input
  onChangeText={text => onTypeAuthorName(text)}
  onFocus={() => onToggleDarkLayer(true)}

diff --git a/src/routes/mainStack.js b/src/routes/mainStack.js
@@ -10,7 +10,6 @@ import HomeRoutes from '~/components/screens/home/routes';
 import SearchRoutes from '~/components/screens/search/routes';
 import LibraryRoutes from '~/components/screens/library/routes';
 import SettingsRoutes from '~/components/screens/settings/routes';
-import isEqualsOrLargestThanIphoneX from '~/utils/isEqualsOrLargestThanIphoneX';
 import appStyles from '~/styles';
 
 export const ROUTE_NAMES = {

diff --git a/src/routes/utils/navigationOptions.js b/src/routes/utils/navigationOptions.js
@@ -36,7 +36,6 @@ export const getPlayerNavigationOption = (navigation: Object): Object => {
  return {
  ...DEFAULT_HEADER_STYLE,
  headerStyle: {
- marginTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
  backgroundColor: 'transparent',
  borderBottomWidth: 0,
  },
@@ -69,7 +68,6 @@ export const getDefaultHeaderWithTitle = (
  headerTransparent: false,
  headerStyle: {
  backgroundColor: theme.colors.secondaryColor,
- marginTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
  borderBottomWidth: 0,
  elevation: 0,
  },
@@ -134,12 +132,5 @@ export const getHiddenHeaderLayout = (
  ...DEFAULT_HEADER_STYLE,
  headerTintColor: colorOverride || theme.colors.textColor,
  headerBackTitle: null,
- ...Platform.select({
- android: {
- headerStyle: {
- marginTop: StatusBar.currentHeight,
- },
- },
- }),
  };
 };