Fixing bug with StatusBar on Android

0xflotus · Apr 8, 2019 · 56adb5b · 56adb5b
1 parent 3335fc3
commit 56adb5b
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 160 deletions.
diff --git a/src/components/common/author-detail/components/AuthorDetailComponent.js b/src/components/common/author-detail/components/AuthorDetailComponent.js
@@ -1,8 +1,8 @@
 // @flow
 
 import React, { PureComponent, Fragment } from 'react';
-import { StatusBar, Animated, View } from 'react-native';
-import styled, { withTheme } from 'styled-components';
+import { Animated, View } from 'react-native';
+import styled from 'styled-components';
 import LinearGradient from 'react-native-linear-gradient';
 import { StackActions } from 'react-navigation';
 
@@ -62,7 +62,6 @@ type Props = {
  navigation: Object,
  loading: boolean,
  error: boolean,
- theme: Object,
 };
 
 class AuthorDetailComponent extends PureComponent<Props, {}> {
@@ -188,28 +187,17 @@ class AuthorDetailComponent extends PureComponent<Props, {}> {
  );
  };
 
- getBarStyle = (theme: Object): string => (theme.colors.secondaryColor === '#111' ? 'light-content' : 'dark-content');
-
  render() {
- const {
- navigation, loading, author, theme,
- } = this.props;
+ const { navigation, loading, author } = this.props;
 
  const hasAuthorDefined = !!author;
- const barStyle = this.getBarStyle(theme);
 
  return (
  <Container>
- <StatusBar
- backgroundColor="transparent"
- barStyle={barStyle}
- translucent
- animated
- />
  {loading || !hasAuthorDefined ? <Loading /> : this.renderContent()}
  </Container>
  );
  }
 }
 
-export default withTheme(AuthorDetailComponent);
+export default AuthorDetailComponent;
diff --git a/src/components/common/podcast-detail/components/PodcastDetailComponent.js b/src/components/common/podcast-detail/components/PodcastDetailComponent.js
@@ -1,7 +1,7 @@
 // @flow
 
 import React, { Fragment } from 'react';
-import { StatusBar, ScrollView, Text } from 'react-native';
+import { ScrollView, Text } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import styled, { withTheme } from 'styled-components';
 
@@ -52,8 +52,6 @@ type Props = {
  podcast: Props,
 };
 
-getBarStyle = (theme: Object): string => (theme.colors.secondaryColor === '#111' ? 'light-content' : 'dark-content');
-
 const PodcastDetailComponent = ({
  onToggleAddPlaylistModal,
  shouldShowAuthorSection,
@@ -65,54 +63,45 @@ const PodcastDetailComponent = ({
  onPressPlay,
  navigation,
  podcast,
- theme,
-}: Props): Object => {
- const barStyle = getBarStyle(theme);
-
- return (
- <Fragment>
- <StatusBar
- backgroundColor={theme.colors.androidToolbarColor}
- barStyle={barStyle}
+}: Props): Object => (
+ <Fragment>
+ <Wrapper
+ showsVerticalScrollIndicator={false}
+ alwaysBounceVertical={false}
+ >
+ <PodcastInfo
+ imageURL={podcast.imageURL}
+ subject={podcast.subject}
+ title={podcast.title}
+ stars={podcast.stars}
  />
- <Wrapper
- showsVerticalScrollIndicator={false}
- alwaysBounceVertical={false}
- >
- <PodcastInfo
- imageURL={podcast.imageURL}
- subject={podcast.subject}
- title={podcast.title}
- stars={podcast.stars}
- />
- <ActionButtons
- onPressAddToPlaylist={onToggleAddPlaylistModal}
- isDownloadingPodcast={isDownloadingPodcast}
- onPressDownloadButton={onPressDownloadButton}
- isPodcastDownloaded={isPodcastDownloaded}
- onPressPlay={onPressPlay}
- />
- <BottomContent
- shouldShowAuthorSection={shouldShowAuthorSection}
- onPressDetail={() => {
- navigation.navigate(CONSTANTS.ROUTES.AUTHOR_DETAIL, {
- [CONSTANTS.PARAMS.AUTHOR_DETAIL]: {
- id: podcast.id,
- },
- });
- }}
- description={podcast.description}
- author={podcast.author}
+ <ActionButtons
+ onPressAddToPlaylist={onToggleAddPlaylistModal}
+ isDownloadingPodcast={isDownloadingPodcast}
+ onPressDownloadButton={onPressDownloadButton}
+ isPodcastDownloaded={isPodcastDownloaded}
+ onPressPlay={onPressPlay}
+ />
+ <BottomContent
+ shouldShowAuthorSection={shouldShowAuthorSection}
+ onPressDetail={() => {
+ navigation.navigate(CONSTANTS.ROUTES.AUTHOR_DETAIL, {
+ [CONSTANTS.PARAMS.AUTHOR_DETAIL]: {
+ id: podcast.id,
+ },
+ });
+ }}
+ description={podcast.description}
+ author={podcast.author}
+ />
+ {isAddPlaylistModalOpen && (
+ <PlaylistList
+ onToggleModal={onToggleAddPlaylistModal}
+ podcast={podcast}
  />
- {isAddPlaylistModalOpen && (
- <PlaylistList
- onToggleModal={onToggleAddPlaylistModal}
- podcast={podcast}
- />
- )}
- </Wrapper>
- </Fragment>
- );
-};
+ )}
+ </Wrapper>
+ </Fragment>
+);
 
-export default withTheme(PodcastDetailComponent);
+export default PodcastDetailComponent;
diff --git a/src/components/screens/search/components/SearchComponent.js b/src/components/screens/search/components/SearchComponent.js
@@ -1,8 +1,8 @@
 // @flow
 
 import React from 'react';
-import { StatusBar, View } from 'react-native';
-import styled, { withTheme } from 'styled-components';
+import { View } from 'react-native';
+import styled from 'styled-components';
 
 import ScreenTitle from '~/components/common/ScreenTitle';
 import SearchAuthorTextInput from './SearchAuthorTextInput';
@@ -48,38 +48,27 @@ const SearchComponent = ({
  isTextInputFocused,
  onTypeAuthorName,
  navigation,
- theme,
-}: Props): Object => {
- const barStyle = theme.colors.secondaryColor === '#111' ? 'light-content' : 'dark-content';
-
- return (
- <Container>
- <StatusBar
- backgroundColor="transparent"
- barStyle={barStyle}
- translucent
- animated
- />
- <ScreenTitle
- title="Search"
+}: Props): Object => (
+ <Container>
+ <ScreenTitle
+ title="Search"
+ />
+ <SearchAuthorTextInputWrapper>
+ <SearchAuthorTextInput
+ onSearchForAuthor={onSearchForAuthor}
+ onToggleDarkLayer={onToggleDarkLayer}
+ onTypeAuthorName={onTypeAuthorName}
  />
- <SearchAuthorTextInputWrapper>
- <SearchAuthorTextInput
- onSearchForAuthor={onSearchForAuthor}
- onToggleDarkLayer={onToggleDarkLayer}
- onTypeAuthorName={onTypeAuthorName}
- />
- </SearchAuthorTextInputWrapper>
- <SubjectsListWrapper
+ </SearchAuthorTextInputWrapper>
+ <SubjectsListWrapper
+ isTextInputFocused={isTextInputFocused}
+ >
+ <SubjectsList
  isTextInputFocused={isTextInputFocused}
- >
- <SubjectsList
- isTextInputFocused={isTextInputFocused}
- navigation={navigation}
- />
- </SubjectsListWrapper>
- </Container>
- );
-};
+ navigation={navigation}
+ />
+ </SubjectsListWrapper>
+ </Container>
+);
 
-export default withTheme(SearchComponent);
+export default SearchComponent;
diff --git a/src/components/screens/search/components/subject-detail/components/FeaturedListItem.js b/src/components/screens/search/components/subject-detail/components/FeaturedListItem.js
@@ -67,11 +67,11 @@ const FeaturedListitem = ({ onPress, podcast }: Props): Object => (
  shadowColor: '#000',
  shadowOffset: {
  width: 0,
- height: 4,
+ height: 1,
  },
- shadowOpacity: 0.32,
- shadowRadius: 5.46,
- elevation: 9,
+ shadowOpacity: 0.22,
+ shadowRadius: 2.22,
+ elevation: 3,
  }}
  >
  <UpperContent>

diff --git a/src/components/screens/search/components/subject-detail/components/SubjectDetailComponent.js b/src/components/screens/search/components/subject-detail/components/SubjectDetailComponent.js
@@ -1,7 +1,7 @@
 // @flow
 
 import React, { Component, Fragment } from 'react';
-import { Animated, StatusBar, View } from 'react-native';
+import { Animated, View } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import styled, { withTheme } from 'styled-components';
 
@@ -17,7 +17,7 @@ const TAB_ITEMS = [
  { id: 'authors', title: 'Authors' },
 ];
 
-const HEADER_HEIGHT = appStyles.metrics.getHeightFromDP('20%');
+const HEADER_HEIGHT = appStyles.metrics.getHeightFromDP('25%');
 
 const Container = styled(View)`
  flex: 1;
@@ -84,8 +84,6 @@ class SubjectDetail extends Component<Props, {}> {
  });
  };
 
- getBarStyle = (theme: Object): string => (theme.colors.secondaryColor === '#111' ? 'light-content' : 'dark-content');
-
  renderHeader = (thumbnailImageURL: string, imageURL: string): Object => (
  <Header>
  <ProgressiveImage
@@ -123,16 +121,8 @@ class SubjectDetail extends Component<Props, {}> {
  const { data } = subject;
  const { thumbnailImageURL, imageURL, items } = data;
 
- const barStyle = this.getBarStyle(theme);
-
  return (
  <Fragment>
- <StatusBar
- backgroundColor="transparent"
- barStyle={barStyle}
- translucent
- animated
- />
  {this.renderHeader(thumbnailImageURL, imageURL)}
  <SmokeShadow />
  <Animated.View

diff --git a/...mponents/screens/search/components/subject-detail/components/trending/TrendingListItem.js b/...mponents/screens/search/components/subject-detail/components/trending/TrendingListItem.js
@@ -2,14 +2,14 @@
 
 import React from 'react';
 import {
- TouchableOpacity, Platform, View, Text,
+ TouchableWithoutFeedback, Platform, View, Text,
 } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import styled from 'styled-components';
 
 import AuthorInfo from '~/components/common/AuthorInfo';
 
-const ButtonWrapper = styled(TouchableOpacity)`
+const ButtonWrapper = styled(View)`
  width: ${({ theme }) => theme.metrics.getWidthFromDP('45%')}px;
  margin-bottom: ${({ theme }) => theme.metrics.largeSize}px;
 `;
@@ -77,37 +77,39 @@ const TrendingListItem = ({
  title,
  side,
 }: Props): Object => (
- <ButtonWrapper
+ <TouchableWithoutFeedback
  onPress={onPress}
  >
- <PodcastImage
- uri={podcastImage}
- index={index}
- side={side}
- />
- <BottomContent
- style={{
- shadowColor: '#000',
- shadowOffset: {
- width: 0,
- height: 4,
- },
- shadowOpacity: 0.32,
- shadowRadius: 5.46,
- elevation: 9,
- }}
- >
- <PodcastTitle>{title}</PodcastTitle>
- <AuthorInfoWrapper>
- <AuthorInfo
- imageURL={author.thumbnailImageURL}
- numberOfLines={2}
- name={author.name}
- textColor="dark"
- />
- </AuthorInfoWrapper>
- </BottomContent>
- </ButtonWrapper>
+ <ButtonWrapper>
+ <PodcastImage
+ uri={podcastImage}
+ index={index}
+ side={side}
+ />
+ <BottomContent
+ style={{
+ shadowColor: '#000',
+ shadowOffset: {
+ width: 0,
+ height: 1,
+ },
+ shadowOpacity: 0.22,
+ shadowRadius: 2.22,
+ elevation: 3,
+ }}
+ >
+ <PodcastTitle>{title}</PodcastTitle>
+ <AuthorInfoWrapper>
+ <AuthorInfo
+ imageURL={author.thumbnailImageURL}
+ numberOfLines={2}
+ name={author.name}
+ textColor="dark"
+ />
+ </AuthorInfoWrapper>
+ </BottomContent>
+ </ButtonWrapper>
+ </TouchableWithoutFeedback>
 );
 
 export default TrendingListItem;
diff --git a/src/components/screens/settings/Settings.js b/src/components/screens/settings/Settings.js
@@ -45,7 +45,7 @@ const Row = styled(View)`
 
 const TextWrapper = styled(View)`
  width: 75%;
- margin-bottom: ${({ theme }) => theme.metrics.extraLargeSize}px;
+ margin-bottom: ${({ theme }) => theme.metrics.extraLargeSize * 1.5}px;
 `;
 
 const OptiontTitle = styled(Text)`
@@ -57,7 +57,7 @@ const OptiontTitle = styled(Text)`
 
 const OptionDescription = styled(Text)`
  font-family: CircularStd-Medium;
- font-size: ${({ theme }) => theme.metrics.largeSize}px;
+ font-size: ${({ theme }) => theme.metrics.mediumSize * 1.3}px;
  color: ${({ theme }) => theme.colors.subTextColor};
 `;