cleaned up tabs components (#495)

* cleaned up tabs components this also makes the avatar small * linter fix
ApollosProject · Oct 21, 2021 · 3d65272 · 3d65272
1 parent 64a8f73
commit 3d65272
Showing 1 changed file with 26 additions and 50 deletions.
diff --git a/apolloschurchapp/src/tabs/index.js b/apolloschurchapp/src/tabs/index.js
@@ -1,12 +1,12 @@
 import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
 import { Image, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import {
   NavigationService,
   withTheme,
+  useTheme,
   Icon,
   Touchable,
 } from '@apollosproject/ui-kit';
@@ -33,70 +33,46 @@ const HeaderLogo = withTheme(({ theme }) => ({
       : require('./wordmark.dark.png'),
 }))(Image);
 
-const SearchIcon = withTheme(({ theme: { colors, sizing: { baseUnit } } }) => ({
-  name: 'search',
-  size: baseUnit * 2,
-  fill: colors.primary,
-}))(Icon);
-
-const SearchButton = ({ onPress }) => (
-  <Touchable onPress={onPress}>
-    <SearchIcon />
-  </Touchable>
-);
-
-SearchButton.propTypes = {
-  onPress: PropTypes.func,
-};
-
-const Avatar = withTheme(({ theme: { sizing: { baseUnit } } }) => ({
-  size: 'xsmall',
-  containerStyle: {
-    paddingBottom: baseUnit * 0.25,
-  },
-}))(UserAvatarConnected);
-
-const ProfileButton = ({ onPress }) => (
-  <Touchable onPress={onPress}>
-    <View>
-      <Avatar />
-    </View>
-  </Touchable>
-);
-
-ProfileButton.propTypes = {
-  onPress: PropTypes.func,
-};
-
-const HeaderLeft = () => {
+const ProfileButton = () => {
   const navigation = useNavigation();
   return (
-    <ProfileButton
+    <Touchable
       onPress={() => {
         navigation.navigate('UserSettingsNavigator');
       }}
-    />
+    >
+      <View>
+        <UserAvatarConnected size="xsmall" />
+      </View>
+    </Touchable>
   );
 };
-const HeaderCenter = () => <HeaderLogo source={require('./wordmark.png')} />;
-const HeaderRight = () => {
+
+const SearchButton = () => {
   const navigation = useNavigation();
+  const theme = useTheme();
   return (
-    <SearchButton
+    <Touchable
       onPress={() => {
         navigation.navigate('Search');
       }}
-    />
+    >
+      <Icon
+        name="search"
+        size={theme.sizing.baseUnit * 2}
+        fill={theme.colors.primary}
+      />
+    </Touchable>
   );
 };
 
 // we nest stack inside of tabs so we can use all the fancy native header features
 const HomeTab = createFeatureFeedTab({
   screenOptions: {
     headerHideShadow: true,
-    headerCenter: HeaderCenter,
-    headerRight: HeaderRight,
-    headerLeft: HeaderLeft,
+    headerCenter: HeaderLogo,
+    headerRight: SearchButton,
+    headerLeft: ProfileButton,
     headerLargeTitle: false,
   },
   tabName: 'Home',
@@ -105,23 +81,23 @@ const HomeTab = createFeatureFeedTab({
 
 const ReadTab = createFeatureFeedTab({
   options: {
-    headerLeft: HeaderLeft,
+    headerLeft: ProfileButton,
   },
   tabName: 'Read',
   feedName: 'READ',
 });
 
 const WatchTab = createFeatureFeedTab({
   options: {
-    headerLeft: HeaderLeft,
+    headerLeft: ProfileButton,
   },
   tabName: 'Watch',
   feedName: 'WATCH',
 });
 
 const PrayTab = createFeatureFeedTab({
   options: {
-    headerLeft: HeaderLeft,
+    headerLeft: ProfileButton,
   },
   tabName: 'Pray',
   feedName: 'PRAY',
@@ -143,7 +119,7 @@ const ConnectTabStackNavigator = () => (
       name={'Connect'}
       component={CustomConnectScreen}
       options={{
-        headerLeft: HeaderLeft,
+        headerLeft: ProfileButton,
       }}
     />
   </ConnectTabStack.Navigator>