Align back button

src/Index.tsx

@@ -118,7 +118,7 @@ export const Index: React.FC = () => {
               }
             })}
           >
-            {() => <></>}
+            {() => null}
           </Tab.Screen>
           <Tab.Screen
             name='Screen-Notifications'

src/components/Header/Left.tsx

@@ -15,14 +15,23 @@ const HeaderLeft: React.FC<Props> = ({ onPress, text, icon }) => {
   const { theme } = useTheme()
 
   return (
-    <Pressable onPress={onPress} style={styles.base}>
+    <Pressable
+      onPress={onPress}
+      style={[
+        styles.base,
+        {
+          backgroundColor: theme.backgroundGradientStart,
+          ...(icon && { height: 44, width: 44 })
+        }
+      ]}
+    >
       {text ? (
         <Text style={[styles.text, { color: theme.primary }]}>{text}</Text>
       ) : (
         <Feather
           name={icon || 'chevron-left'}
           color={theme.primary}
-          size={StyleConstants.Font.Size.L}
+          size={StyleConstants.Spacing.L}
         />
       )}
     </Pressable>
@@ -31,7 +40,10 @@ const HeaderLeft: React.FC<Props> = ({ onPress, text, icon }) => {
 
 const styles = StyleSheet.create({
   base: {
-    paddingRight: StyleConstants.Spacing.S
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 100
   },
   text: {
     fontSize: StyleConstants.Font.Size.M

src/components/Header/Right.tsx

@@ -29,7 +29,16 @@ const HeaderRight: React.FC<PropsText | PropsIcon> = ({
   const { theme } = useTheme()
 
   return (
-    <Pressable {...(!disabled && { onPress })} style={styles.base}>
+    <Pressable
+      {...(!disabled && { onPress })}
+      style={[
+        styles.base,
+        {
+          backgroundColor: theme.backgroundGradientStart,
+          ...(icon && { height: 44, width: 44 })
+        }
+      ]}
+    >
       {text && (
         <Text
           style={[
@@ -44,7 +53,7 @@ const HeaderRight: React.FC<PropsText | PropsIcon> = ({
         <Feather
           name={icon}
           color={disabled ? theme.secondary : theme.primary}
-          size={StyleConstants.Font.Size.L}
+          size={StyleConstants.Spacing.L}
         />
       )}
     </Pressable>
@@ -53,7 +62,10 @@ const HeaderRight: React.FC<PropsText | PropsIcon> = ({
 
 const styles = StyleSheet.create({
   base: {
-    paddingLeft: StyleConstants.Spacing.S
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 100
   },
   text: {
     fontSize: StyleConstants.Font.Size.M

src/components/Timelines.tsx

@@ -15,6 +15,7 @@ import {
 import { useTheme } from '@utils/styles/ThemeManager'
 import { useNavigation } from '@react-navigation/native'
 import getCurrentTab from '@utils/getCurrentTab'
+import { HeaderRight } from './Header'
 
 const Stack = createNativeStackNavigator()
 
@@ -112,12 +113,7 @@ const Timelines: React.FC<Props> = ({ name, content }) => {
                 </View>
               ),
               headerRight: () => (
-                <Feather
-                  name='search'
-                  size={24}
-                  color={theme.secondary}
-                  onPress={onPressSearch}
-                />
+                <HeaderRight icon='search' onPress={onPressSearch} />
               )
             })
         }}

src/components/Timelines/Timeline/Shared/Card.tsx

@@ -41,9 +41,7 @@ const TimelineCard: React.FC<Props> = ({ card }) => {
           >
             {card.description}
           </Text>
-        ) : (
-          <></>
-        )}
+        ) : null}
         <Text numberOfLines={1} style={{ color: theme.secondary }}>
           {card.url}
         </Text>

src/screens/Me.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { createNativeStackNavigator } from 'react-native-screens/native-stack'
 import { useTranslation } from 'react-i18next'
-import { useSelector } from 'react-redux'
 
 import ScreenMeRoot from '@screens/Me/Root'
 import ScreenMeConversations from '@screens/Me/Cconversations'
@@ -12,71 +11,102 @@ import sharedScreens from '@screens/Shared/sharedScreens'
 import ScreenMeListsList from '@screens/Me/Root/Lists/List'
 import ScreenMeSettings from '@screens/Me/Settings'
 
-import { RootState } from 'src/store'
+import { HeaderLeft } from '@root/components/Header'
+import { useNavigation } from '@react-navigation/native'
 
 const Stack = createNativeStackNavigator()
 
 const ScreenMe: React.FC = () => {
+  const navigation = useNavigation()
   const { t } = useTranslation()
-  const localRegistered = useSelector(
-    (state: RootState) => state.instances.local.url
-  )
 
   return (
     <Stack.Navigator>
       <Stack.Screen
         name='Screen-Me-Root'
         component={ScreenMeRoot}
-        options={
-          // localRegistered ?
-          {
-            headerTranslucent: true,
-            headerStyle: { backgroundColor: 'rgba(255, 255, 255, 0)' },
-            headerCenter: () => <></>
-          }
-          // : { headerTitle: t('meRoot:heading') }
-        }
+        options={{
+          headerTranslucent: true,
+          headerStyle: { backgroundColor: 'rgba(255, 255, 255, 0)' },
+          headerCenter: () => null
+        }}
       />
       <Stack.Screen
         name='Screen-Me-Conversations'
         component={ScreenMeConversations}
         options={{
-          headerTitle: t('meConversations:heading')
+          headerTitle: t('meConversations:heading'),
+          headerLeft: () => (
+            <HeaderLeft
+              icon='chevron-left'
+              onPress={() => navigation.goBack()}
+            />
+          )
         }}
       />
       <Stack.Screen
         name='Screen-Me-Bookmarks'
         component={ScreenMeBookmarks}
         options={{
-          headerTitle: t('meBookmarks:heading')
+          headerTitle: t('meBookmarks:heading'),
+          headerLeft: () => (
+            <HeaderLeft
+              icon='chevron-left'
+              onPress={() => navigation.goBack()}
+            />
+          )
         }}
       />
       <Stack.Screen
         name='Screen-Me-Favourites'
         component={ScreenMeFavourites}
         options={{
-          headerTitle: t('meFavourites:heading')
+          headerTitle: t('meFavourites:heading'),
+          headerLeft: () => (
+            <HeaderLeft
+              icon='chevron-left'
+              onPress={() => navigation.goBack()}
+            />
+          )
         }}
       />
       <Stack.Screen
         name='Screen-Me-Lists'
         component={ScreenMeLists}
         options={{
-          headerTitle: t('meLists:heading')
+          headerTitle: t('meLists:heading'),
+          headerLeft: () => (
+            <HeaderLeft
+              icon='chevron-left'
+              onPress={() => navigation.goBack()}
+            />
+          )
         }}
       />
       <Stack.Screen
         name='Screen-Me-Lists-List'
         component={ScreenMeListsList}
         options={({ route }: any) => ({
-          headerTitle: t('meListsList:heading', { list: route.params.title })
+          headerTitle: t('meListsList:heading', { list: route.params.title }),
+          headerLeft: () => (
+            <HeaderLeft
+              icon='chevron-left'
+              onPress={() => navigation.goBack()}
+            />
+          )
         })}
       />
       <Stack.Screen
         name='Screen-Me-Settings'
         component={ScreenMeSettings}
         options={{
-          headerTitle: t('meSettings:heading')
+          headerTitle: t('meSettings:heading'),
+          headerLeft: () => (
+            <HeaderLeft
+              icon='chevron-left'
+              onPress={() => navigation.goBack()}
+            />
+          )
         }}
       />
 

src/screens/Shared/sharedScreens.tsx

@@ -8,8 +8,11 @@ import Compose from '@screens/Shared/Compose'
 import ComposeEditAttachment from '@screens/Shared/Compose/EditAttachment'
 import ScreenSharedSearch from '@screens/Shared/Search'
 import { useTranslation } from 'react-i18next'
+import { useNavigation } from '@react-navigation/native'
+import { HeaderLeft } from '@root/components/Header'
 
 const sharedScreens = (Stack: any) => {
+  const navigation = useNavigation()
   const { t } = useTranslation()
 
   return [
@@ -20,7 +23,10 @@ const sharedScreens = (Stack: any) => {
       options={{
         headerTranslucent: true,
         headerStyle: { backgroundColor: 'rgba(255, 255, 255, 0)' },
-        headerCenter: () => <></>
+        headerCenter: () => null,
+        headerLeft: () => (
+          <HeaderLeft icon='chevron-left' onPress={() => navigation.goBack()} />
+        )
       }}
     />,
     <Stack.Screen
@@ -28,7 +34,10 @@ const sharedScreens = (Stack: any) => {
       name='Screen-Shared-Hashtag'
       component={ScreenSharedHashtag}
       options={({ route }: any) => ({
-        title: `#${decodeURIComponent(route.params.hashtag)}`
+        title: `#${decodeURIComponent(route.params.hashtag)}`,
+        headerLeft: () => (
+          <HeaderLeft icon='chevron-left' onPress={() => navigation.goBack()} />
+        )
       })}
     />,
     <Stack.Screen
@@ -36,7 +45,10 @@ const sharedScreens = (Stack: any) => {
       name='Screen-Shared-Toot'
       component={ScreenSharedToot}
       options={() => ({
-        title: t('sharedToot:heading')
+        title: t('sharedToot:heading'),
+        headerLeft: () => (
+          <HeaderLeft icon='chevron-left' onPress={() => navigation.goBack()} />
+        )
       })}
     />,
     <Stack.Screen
@@ -60,7 +72,7 @@ const sharedScreens = (Stack: any) => {
       name='Screen-Shared-Compose-EditAttachment'
       component={ComposeEditAttachment}
       options={{
-        stackPresentation: 'modal',
+        stackPresentation: 'modal'
       }}
     />,
     <Stack.Screen