Merge pull request #77 from tooot-app/main

Candidate v0.7 nightly 210319
2025-04-17 03:37:21 +02:00 · 2021-03-21 23:30:06 +01:00 · 2021-03-21 23:30:06 +01:00 · a4fff0b59e
commit a4fff0b59e
parent f1ee62f918 63e8fb00e4
71 changed files with 1555 additions and 226 deletions
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@ -16,8 +16,6 @@ jobs:
        id: branch
      - name: -- Step 1 -- Checkout code
        uses: actions/checkout@v2
-        with:
-          submodules: true
      - name: -- Step 2 -- Setup node
        uses: actions/setup-node@v2
        with:
--- a/.gitmodules
+++ b/.gitmodules
@ -1,3 +0,0 @@
-[submodule "src/modules/react-native-image-viewing"]
-	path = src/modules/react-native-image-viewing
-	url = https://github.com/xmflsct/react-native-image-viewing.git
--- a/src/@types/react-navigation.d.ts
+++ b/src/@types/react-navigation.d.ts
@ -1,4 +1,6 @@
 declare namespace Nav {
+  import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
+
  type RootStackParamList = {
    'Screen-Tabs': undefined
    'Screen-Actions':
@ -58,7 +60,6 @@ declare namespace Nav {
        url: Mastodon.AttachmentImage['url']
        width?: number
        height?: number
-        preview_url: Mastodon.AttachmentImage['preview_url']
        remote_url?: Mastodon.AttachmentImage['remote_url']
      }[]
      id: Mastodon.Attachment['id']
@ -90,7 +91,7 @@ declare namespace Nav {
    'Tab-Shared-Search': { text: string | undefined }
    'Tab-Shared-Toot': {
      toot: Mastodon.Status
-      rootQueryKey: any
+      rootQueryKey?: QueryKeyTimeline
    }
    'Tab-Shared-Users':
      | {
--- a/src/Screens.tsx
+++ b/src/Screens.tsx
@ -45,7 +45,7 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
    dark = 'light-content'
  }

-  const routeNameRef = useRef<string | undefined>()
+  const routeRef = useRef<{ name?: string; params?: {} }>()

  const isConnected = useNetInfo().isConnected
  useEffect(() => {
@ -114,35 +114,37 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
  }, [instanceActive])

  // Callbacks
-  const navigationContainerOnReady = useCallback(
-    () =>
-      (routeNameRef.current = navigationRef.current?.getCurrentRoute()?.name),
-    []
-  )
+  const navigationContainerOnReady = useCallback(() => {
+    const currentRoute = navigationRef.current?.getCurrentRoute()
+    routeRef.current = {
+      name: currentRoute?.name,
+      params: currentRoute?.params
+    }
+  }, [])
  const navigationContainerOnStateChange = useCallback(() => {
-    const previousRouteName = routeNameRef.current
-    const currentRouteName = navigationRef.current?.getCurrentRoute()?.name
+    const previousRoute = routeRef.current
+    const currentRoute = navigationRef.current?.getCurrentRoute()

-    const matchTabName = currentRouteName?.match(/(Tab-.*)-Root/)
+    const matchTabName = currentRoute?.name?.match(/(Tab-.*)-Root/)
    if (matchTabName) {
      //@ts-ignore
      dispatch(updatePreviousTab(matchTabName[1]))
    }

-    if (previousRouteName !== currentRouteName) {
-      Analytics.setCurrentScreen(currentRouteName)
+    if (previousRoute?.name !== currentRoute?.name) {
+      Analytics.setCurrentScreen(currentRoute?.name)
      Sentry.Native.setContext('page', {
-        previous: previousRouteName,
-        current: currentRouteName
+        previous: previousRoute,
+        current: currentRoute
      })
    }

-    routeNameRef.current = currentRouteName
+    routeRef.current = currentRoute
  }, [])

  return (
    <>
-      <StatusBar barStyle={barStyle[mode]} backgroundColor={theme.background} />
+      <StatusBar barStyle={barStyle[mode]} backgroundColor={theme.backgroundDefault} />
      <NavigationContainer
        ref={navigationRef}
        theme={themes[mode]}
--- a/src/api/instance.ts
+++ b/src/api/instance.ts
@ -1,5 +1,5 @@
 import { RootState } from '@root/store'
-import axios from 'axios'
+import axios, { AxiosRequestConfig } from 'axios'
 import chalk from 'chalk'
 import li from 'li'

@ -14,7 +14,10 @@ export type Params = {
  }
  headers?: { [key: string]: string }
  body?: FormData
-  onUploadProgress?: (progressEvent: any) => void
+  extras?: Omit<
+    AxiosRequestConfig,
+    'method' | 'url' | 'params' | 'headers' | 'data'
+  >
 }

 const apiInstance = async <T = unknown>({
@ -24,7 +27,7 @@ const apiInstance = async <T = unknown>({
  params,
  headers,
  body,
-  onUploadProgress
+  extras
 }: Params): Promise<{ body: T; links: { prev?: string; next?: string } }> => {
  const { store } = require('@root/store')
  const state = store.getState() as RootState
@ -70,7 +73,7 @@ const apiInstance = async <T = unknown>({
      })
    },
    ...(body && { data: body }),
-    ...(onUploadProgress && { onUploadProgress: onUploadProgress })
+    ...extras
  })
    .then(response => {
      let prev
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@ -81,7 +81,7 @@ const Button: React.FC<Props> = ({
          if (destructive) {
            return theme.red
          } else {
-            return theme.primary
+            return theme.primaryDefault
          }
        }
      }
@ -97,16 +97,16 @@ const Button: React.FC<Props> = ({
        if (destructive) {
          return theme.red
        } else {
-          return theme.primary
+          return theme.primaryDefault
        }
      }
    }
  }, [mode, loading, disabled])
  const colorBackground = useMemo(() => {
    if (overlay) {
-      return theme.backgroundOverlay
+      return theme.backgroundOverlayInvert
    } else {
-      return theme.background
+      return theme.backgroundDefault
    }
  }, [mode])

--- a/src/components/GracefullyImage.tsx
+++ b/src/components/GracefullyImage.tsx
@ -102,7 +102,11 @@ const GracefullyImage = React.memo(

    return (
      <Pressable
-        style={[style, dimension, { backgroundColor: theme.shimmerDefault }]}
+        style={[
+          style,
+          dimension,
+          { backgroundColor: theme.backgroundOverlayDefault }
+        ]}
        {...(onPress
          ? hidden
            ? { disabled: true }
--- a/src/components/Hashtag.tsx
+++ b/src/components/Hashtag.tsx
@ -29,7 +29,7 @@ const ComponentHashtag: React.FC<Props> = ({

  return (
    <Pressable style={styles.itemDefault} onPress={customOnPress || onPress}>
-      <Text style={[styles.itemHashtag, { color: theme.primary }]}>
+      <Text style={[styles.itemHashtag, { color: theme.primaryDefault }]}>
        #{hashtag.name}
      </Text>
    </Pressable>
--- a/src/components/Header/Center.tsx
+++ b/src/components/Header/Center.tsx
@ -17,7 +17,7 @@ const HeaderCenter = React.memo(
      <Text
        style={[
          styles.text,
-          { color: inverted ? theme.primaryOverlay : theme.primary }
+          { color: inverted ? theme.primaryOverlay : theme.primaryDefault }
        ]}
        children={content}
      />
--- a/src/components/Header/Left.tsx
+++ b/src/components/Header/Left.tsx
@ -25,7 +25,7 @@ const HeaderLeft: React.FC<Props> = ({
      case 'icon':
        return (
          <Icon
-            color={theme.primary}
+            color={theme.primaryDefault}
            name={content || 'ChevronLeft'}
            size={StyleConstants.Spacing.M * 1.25}
          />
@ -33,7 +33,7 @@ const HeaderLeft: React.FC<Props> = ({
      case 'text':
        return (
          <Text
-            style={[styles.text, { color: theme.primary }]}
+            style={[styles.text, { color: theme.primaryDefault }]}
            children={content}
          />
        )
@ -47,7 +47,7 @@ const HeaderLeft: React.FC<Props> = ({
      style={[
        styles.base,
        {
-          backgroundColor: theme.backgroundGradientStart,
+          backgroundColor: theme.backgroundOverlayDefault,
          ...(type === 'icon' && {
            height: 44,
            width: 44,
--- a/src/components/Header/Right.tsx
+++ b/src/components/Header/Right.tsx
@ -47,7 +47,7 @@ const HeaderRight: React.FC<Props> = ({
              name={content}
              style={{ opacity: loading ? 0 : 1 }}
              size={StyleConstants.Spacing.M * 1.25}
-              color={disabled ? theme.secondary : theme.primary}
+              color={disabled ? theme.secondary : theme.primaryDefault}
            />
            {loading && loadingSpinkit}
          </>
@ -59,7 +59,7 @@ const HeaderRight: React.FC<Props> = ({
              style={[
                styles.text,
                {
-                  color: disabled ? theme.secondary : theme.primary,
+                  color: disabled ? theme.secondary : theme.primaryDefault,
                  opacity: loading ? 0 : 1
                }
              ]}
@ -79,7 +79,7 @@ const HeaderRight: React.FC<Props> = ({
      style={[
        styles.base,
        {
-          backgroundColor: theme.backgroundGradientStart,
+          backgroundColor: theme.backgroundOverlayDefault,
          ...(type === 'icon' && {
            height: 44,
            width: 44,
--- a/src/components/Instance.tsx
+++ b/src/components/Instance.tsx
@ -142,7 +142,7 @@ const ComponentInstance: React.FC<Props> = ({
            style={[
              styles.textInput,
              {
-                color: theme.primary,
+                color: theme.primaryDefault,
                borderBottomColor: instanceQuery.isError
                  ? theme.red
                  : theme.border
--- a/src/components/Instance/Info.tsx
+++ b/src/components/Instance/Info.tsx
@ -17,9 +17,9 @@ const InstanceInfo = React.memo(

    return (
      <View style={[styles.base, style]}>
-        <Text style={[styles.header, { color: theme.primary }]}>{header}</Text>
+        <Text style={[styles.header, { color: theme.primaryDefault }]}>{header}</Text>
        {content ? (
-          <Text style={[styles.content, { color: theme.primary }]}>
+          <Text style={[styles.content, { color: theme.primaryDefault }]}>
            {content}
          </Text>
        ) : (
--- a/src/components/Menu/Row.tsx
+++ b/src/components/Menu/Row.tsx
@ -28,7 +28,7 @@ export interface Props {

 const MenuRow: React.FC<Props> = ({
  iconFront,
-  iconFrontColor = 'primary',
+  iconFrontColor = 'primaryDefault',
  title,
  description,
  content,
@ -73,7 +73,7 @@ const MenuRow: React.FC<Props> = ({
            )}
            <View style={styles.main}>
              <Text
-                style={[styles.title, { color: theme.primary }]}
+                style={[styles.title, { color: theme.primaryDefault }]}
                numberOfLines={1}
              >
                {title}
--- a/src/components/Message.tsx
+++ b/src/components/Message.tsx
@ -87,18 +87,18 @@ const Message = React.memo(
        position='top'
        floating
        style={{
-          backgroundColor: theme.background,
-          shadowColor: theme.primary,
+          backgroundColor: theme.backgroundDefault,
+          shadowColor: theme.primaryDefault,
          shadowOffset: { width: 0, height: 0 },
          shadowOpacity: mode === 'light' ? 0.16 : 0.24,
          shadowRadius: 4
        }}
        titleStyle={{
-          color: theme.primary,
+          color: theme.primaryDefault,
          ...StyleConstants.FontStyle.M,
          fontWeight: StyleConstants.Font.Weight.Bold
        }}
-        textStyle={{ color: theme.primary, ...StyleConstants.FontStyle.S }}
+        textStyle={{ color: theme.primaryDefault, ...StyleConstants.FontStyle.S }}
        // @ts-ignore
        textProps={{ numberOfLines: 2 }}
      />
--- a/src/components/Parse/Emojis.tsx
+++ b/src/components/Parse/Emojis.tsx
@ -38,7 +38,7 @@ const ParseEmojis = React.memo(
    const styles = useMemo(() => {
      return StyleSheet.create({
        text: {
-          color: theme.primary,
+          color: theme.primaryDefault,
          fontSize: adaptedFontsize,
          lineHeight: adaptedLineheight,
          ...(fontBold && { fontWeight: StyleConstants.Font.Weight.Bold })
--- a/src/components/Parse/HTML.tsx
+++ b/src/components/Parse/HTML.tsx
@ -83,7 +83,7 @@ const renderNode = ({
            <Text
              key={index}
              style={{
-                color: accountIndex !== -1 ? theme.blue : theme.primary,
+                color: accountIndex !== -1 ? theme.blue : theme.primaryDefault,
                fontSize: adaptedFontsize,
                lineHeight: adaptedLineheight
              }}
@ -121,7 +121,7 @@ const renderNode = ({
            onPress={async () => {
              analytics('status_link_press')
              !disableDetails && !shouldBeTag
-                ? await openLink(href)
+                ? await openLink(href, navigation)
                : navigation.push('Tab-Shared-Hashtag', {
                    hashtag: content.substring(1)
                  })
@ -258,14 +258,14 @@ const ParseHTML = React.memo(
                  justifyContent: 'center',
                  marginTop: expanded ? 0 : -adaptedLineheight,
                  minHeight: 44,
-                  backgroundColor: theme.background
+                  backgroundColor: theme.backgroundDefault
                }}
              >
                <Text
                  style={{
                    textAlign: 'center',
                    ...StyleConstants.FontStyle.S,
-                    color: theme.primary
+                    color: theme.primaryDefault
                  }}
                  children={t(`HTML.expanded.${expanded.toString()}`, {
                    hint: expandHint
--- a/src/components/Separator.tsx
+++ b/src/components/Separator.tsx
@ -15,7 +15,7 @@ const ComponentSeparator = React.memo(
    return (
      <View
        style={{
-          backgroundColor: theme.background,
+          backgroundColor: theme.backgroundDefault,
          borderTopColor: theme.border,
          borderTopWidth: StyleSheet.hairlineWidth,
          marginLeft:
--- a/src/components/Timeline.tsx
+++ b/src/components/Timeline.tsx
@ -115,8 +115,8 @@ const Timeline: React.FC<Props> = ({
      refreshControl: (
        <RefreshControl
          enabled
-          colors={[theme.primary]}
-          progressBackgroundColor={theme.background}
+          colors={[theme.primaryDefault]}
+          progressBackgroundColor={theme.backgroundDefault}
          refreshing={isFetching || isLoading}
          onRefresh={() => refetch()}
        />
--- a/src/components/Timeline/Conversation.tsx
+++ b/src/components/Timeline/Conversation.tsx
@ -95,7 +95,7 @@ const TimelineConversation: React.FC<Props> = ({
    <Pressable
      style={[
        styles.base,
-        { backgroundColor: theme.background },
+        { backgroundColor: theme.backgroundDefault },
        conversation.unread && {
          borderLeftWidth: StyleConstants.Spacing.XS,
          borderLeftColor: theme.blue,
--- a/src/components/Timeline/Default.tsx
+++ b/src/components/Timeline/Default.tsx
@ -65,7 +65,7 @@ const TimelineDefault: React.FC<Props> = ({
      style={[
        styles.statusView,
        {
-          backgroundColor: theme.background,
+          backgroundColor: theme.backgroundDefault,
          paddingBottom:
            disableDetails && disableOnPress
              ? StyleConstants.Spacing.Global.PagePadding
@ -141,8 +141,8 @@ const TimelineDefault: React.FC<Props> = ({
            ([actualStatus.account] as Mastodon.Account[] & Mastodon.Mention[])
              .concat(actualStatus.mentions)
              .filter(d => d?.id !== instanceAccount?.id),
-            d => d.id
-          ).map(d => d.acct)}
+            d => d?.id
+          ).map(d => d?.acct)}
          reblog={item.reblog ? true : false}
        />
      )}
--- a/src/components/Timeline/Empty.tsx
+++ b/src/components/Timeline/Empty.tsx
@ -35,9 +35,9 @@ const TimelineEmpty = React.memo(
              <Icon
                name='Frown'
                size={StyleConstants.Font.Size.L}
-                color={theme.primary}
+                color={theme.primaryDefault}
              />
-              <Text style={[styles.error, { color: theme.primary }]}>
+              <Text style={[styles.error, { color: theme.primaryDefault }]}>
                {t('empty.error.message')}
              </Text>
              <Button
@ -56,9 +56,9 @@ const TimelineEmpty = React.memo(
              <Icon
                name='Smartphone'
                size={StyleConstants.Font.Size.L}
-                color={theme.primary}
+                color={theme.primaryDefault}
              />
-              <Text style={[styles.error, { color: theme.primary }]}>
+              <Text style={[styles.error, { color: theme.primaryDefault }]}>
                {t('empty.success.message')}
              </Text>
            </>
@ -67,7 +67,7 @@ const TimelineEmpty = React.memo(
    }, [mode, i18n.language, status])
    return (
      <View
-        style={[styles.base, { backgroundColor: theme.background }]}
+        style={[styles.base, { backgroundColor: theme.backgroundDefault }]}
        children={children}
      />
    )
--- a/src/components/Timeline/Notifications.tsx
+++ b/src/components/Timeline/Notifications.tsx
@ -56,7 +56,7 @@ const TimelineNotifications: React.FC<Props> = ({
      style={[
        styles.notificationView,
        {
-          backgroundColor: theme.background,
+          backgroundColor: theme.backgroundDefault,
          paddingBottom: notification.status
            ? 0
            : StyleConstants.Spacing.Global.PagePadding
@ -138,9 +138,9 @@ const TimelineNotifications: React.FC<Props> = ({
            ([notification.status.account] as Mastodon.Account[] &
              Mastodon.Mention[])
              .concat(notification.status.mentions)
-              .filter(d => d.id !== instanceAccount?.id),
-            d => d.id
-          ).map(d => d.acct)}
+              .filter(d => d?.id !== instanceAccount?.id),
+            d => d?.id
+          ).map(d => d?.acct)}
          reblog={false}
        />
      ) : null}
--- a/src/components/Timeline/Refresh.tsx
+++ b/src/components/Timeline/Refresh.tsx
@ -254,7 +254,7 @@ const TimelineRefresh: React.FC<Props> = ({
          <>
            <View style={styles.container1}>
              <Text
-                style={[styles.explanation, { color: theme.primary }]}
+                style={[styles.explanation, { color: theme.primaryDefault }]}
                onLayout={onLayout}
                children={t('refresh.fetchPreviousPage')}
              />
@ -271,14 +271,14 @@ const TimelineRefresh: React.FC<Props> = ({
                  <Icon
                    name='ArrowLeft'
                    size={StyleConstants.Font.Size.M}
-                    color={theme.primary}
+                    color={theme.primaryDefault}
                  />
                }
              />
            </View>
            <View style={styles.container2}>
              <Text
-                style={[styles.explanation, { color: theme.primary }]}
+                style={[styles.explanation, { color: theme.primaryDefault }]}
                onLayout={onLayout}
                children={t('refresh.refetch')}
              />
--- a/src/components/Timeline/Shared/Actioned.tsx
+++ b/src/components/Timeline/Shared/Actioned.tsx
@ -23,7 +23,7 @@ const TimelineActioned = React.memo(
      StackNavigationProp<Nav.TabLocalStackParamList>
    >()
    const name = account.display_name || account.username
-    const iconColor = theme.primary
+    const iconColor = theme.primaryDefault

    const content = (content: string) => (
      <ParseEmojis content={content} emojis={account.emojis} size='S' />
--- a/src/components/Timeline/Shared/Actions.tsx
+++ b/src/components/Timeline/Shared/Actions.tsx
@ -30,7 +30,7 @@ const TimelineActions = React.memo(
    const { mode, theme } = useTheme()
    const iconColor = theme.secondary
    const iconColorAction = (state: boolean) =>
-      state ? theme.primary : theme.secondary
+      state ? theme.primaryDefault : theme.secondary

    const queryClient = useQueryClient()
    const mutation = useTimelineMutation({
@ -194,22 +194,23 @@ const TimelineActions = React.memo(
      ),
      [status.replies_count]
    )
-    const childrenReblog = useMemo(
-      () => (
+    const childrenReblog = useMemo(() => {
+      const color = (state: boolean) => (state ? theme.green : theme.secondary)
+      return (
        <>
          <Icon
            name='Repeat'
            color={
              status.visibility === 'private' || status.visibility === 'direct'
                ? theme.disabled
-                : iconColorAction(status.reblogged)
+                : color(status.reblogged)
            }
            size={StyleConstants.Font.Size.L}
          />
          {status.reblogs_count > 0 && (
            <Text
              style={{
-                color: iconColorAction(status.reblogged),
+                color: color(status.reblogged),
                fontSize: StyleConstants.Font.Size.M,
                marginLeft: StyleConstants.Spacing.XS
              }}
@ -218,21 +219,21 @@ const TimelineActions = React.memo(
            </Text>
          )}
        </>
-      ),
-      [status.reblogged, status.reblogs_count]
-    )
-    const childrenFavourite = useMemo(
-      () => (
+      )
+    }, [status.reblogged, status.reblogs_count])
+    const childrenFavourite = useMemo(() => {
+      const color = (state: boolean) => (state ? theme.red : theme.secondary)
+      return (
        <>
          <Icon
            name='Heart'
-            color={iconColorAction(status.favourited)}
+            color={color(status.favourited)}
            size={StyleConstants.Font.Size.L}
          />
          {status.favourites_count > 0 && (
            <Text
              style={{
-                color: iconColorAction(status.favourited),
+                color: color(status.favourited),
                fontSize: StyleConstants.Font.Size.M,
                marginLeft: StyleConstants.Spacing.XS,
                marginTop: 0
@ -242,19 +243,18 @@ const TimelineActions = React.memo(
            </Text>
          )}
        </>
-      ),
-      [status.favourited, status.favourites_count]
-    )
-    const childrenBookmark = useMemo(
-      () => (
+      )
+    }, [status.favourited, status.favourites_count])
+    const childrenBookmark = useMemo(() => {
+      const color = (state: boolean) => (state ? theme.yellow : theme.secondary)
+      return (
        <Icon
          name='Bookmark'
-          color={iconColorAction(status.bookmarked)}
+          color={color(status.bookmarked)}
          size={StyleConstants.Font.Size.L}
        />
-      ),
-      [status.bookmarked]
-    )
+      )
+    }, [status.bookmarked])

    return (
      <View
--- a/src/components/Timeline/Shared/Attachment.tsx
+++ b/src/components/Timeline/Shared/Attachment.tsx
@ -48,7 +48,6 @@ const TimelineAttachment = React.memo(
              imageUrls.push({
                id: attachment.id,
                url: attachment.url,
-                preview_url: attachment.preview_url,
                remote_url: attachment.remote_url,
                width: attachment.meta?.original?.width,
                height: attachment.meta?.original?.height
--- a/src/components/Timeline/Shared/Attachment/Audio.tsx
+++ b/src/components/Timeline/Shared/Attachment/Audio.tsx
@ -100,7 +100,7 @@ const AttachmentAudio: React.FC<Props> = ({
          alignSelf: 'flex-end',
          width: '100%',
          height: StyleConstants.Spacing.M + StyleConstants.Spacing.S * 2,
-          backgroundColor: theme.backgroundOverlay,
+          backgroundColor: theme.backgroundOverlayInvert,
          paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
          borderRadius: 100,
          opacity: sensitiveShown ? 0.35 : undefined
--- a/src/components/Timeline/Shared/Attachment/Unsupported.tsx
+++ b/src/components/Timeline/Shared/Attachment/Unsupported.tsx
@ -47,7 +47,7 @@ const AttachmentUnsupported: React.FC<Props> = ({
          <Text
            style={[
              styles.text,
-              { color: attachment.blurhash ? theme.background : theme.primary }
+              { color: attachment.blurhash ? theme.backgroundDefault : theme.primaryDefault }
            ]}
          >
            {t('shared.attachment.unsupported.text')}
--- a/src/components/Timeline/Shared/Card.tsx
+++ b/src/components/Timeline/Shared/Card.tsx
@ -1,6 +1,7 @@
 import analytics from '@components/analytics'
 import GracefullyImage from '@components/GracefullyImage'
 import openLink from '@components/openLink'
+import { useNavigation } from '@react-navigation/native'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
@ -13,13 +14,14 @@ export interface Props {
 const TimelineCard = React.memo(
  ({ card }: Props) => {
    const { theme } = useTheme()
+    const navigation = useNavigation()

    return (
      <Pressable
        style={[styles.card, { borderColor: theme.border }]}
        onPress={async () => {
          analytics('timeline_shared_card_press')
-          await openLink(card.url)
+          await openLink(card.url, navigation)
        }}
        testID='base'
      >
@ -34,7 +36,7 @@ const TimelineCard = React.memo(
        <View style={styles.right}>
          <Text
            numberOfLines={2}
-            style={[styles.rightTitle, { color: theme.primary }]}
+            style={[styles.rightTitle, { color: theme.primaryDefault }]}
            testID='title'
          >
            {card.title}
@ -42,7 +44,7 @@ const TimelineCard = React.memo(
          {card.description ? (
            <Text
              numberOfLines={1}
-              style={[styles.rightDescription, { color: theme.primary }]}
+              style={[styles.rightDescription, { color: theme.primaryDefault }]}
              testID='description'
            >
              {card.description}
--- a/src/components/Timeline/Shared/Poll.tsx
+++ b/src/components/Timeline/Shared/Poll.tsx
@ -186,7 +186,7 @@ const TimelinePoll: React.FC<Props> = ({
          <Text style={styles.optionText}>
            <ParseEmojis content={option.title} emojis={poll.emojis} />
          </Text>
-          <Text style={[styles.optionPercentage, { color: theme.primary }]}>
+          <Text style={[styles.optionPercentage, { color: theme.primaryDefault }]}>
            {poll.votes_count
              ? Math.round(
                  (option.votes_count /
@ -246,7 +246,7 @@ const TimelinePoll: React.FC<Props> = ({
            style={styles.optionSelection}
            name={isSelected(index)}
            size={StyleConstants.Font.Size.M}
-            color={theme.primary}
+            color={theme.primaryDefault}
          />
          <Text style={styles.optionText}>
            <ParseEmojis content={option.title} emojis={poll.emojis} />
--- a/src/components/openLink.ts
+++ b/src/components/openLink.ts
@ -1,9 +1,127 @@
+import apiInstance from '@api/instance'
+import { NavigationProp, ParamListBase } from '@react-navigation/native'
+import { navigationRef } from '@root/Screens'
 import { store } from '@root/store'
+import { SearchResult } from '@utils/queryHooks/search'
+import { getInstanceUrl } from '@utils/slices/instancesSlice'
 import { getSettingsBrowser } from '@utils/slices/settingsSlice'
 import * as Linking from 'expo-linking'
 import * as WebBrowser from 'expo-web-browser'

-const openLink = async (url: string) => {
+// https://social.xmflsct.com/web/statuses/105590085754428765 <- default
+// https://social.xmflsct.com/@tooot/105590085754428765 <- pretty
+const matcherStatus = new RegExp(
+  /http[s]?:\/\/(.*)\/(web\/statuses|@.*)\/([0-9]*)/
+)
+
+// https://social.xmflsct.com/web/accounts/14195 <- default
+// https://social.xmflsct.com/@tooot <- pretty
+const matcherAccount = new RegExp(
+  /http[s]?:\/\/(.*)\/(web\/accounts\/([0-9]*)|@.*)/
+)
+
+export let loadingLink = false
+
+const openLink = async (
+  url: string,
+  navigation?: NavigationProp<
+    ParamListBase,
+    string,
+    Readonly<{
+      key: string
+      index: number
+      routeNames: string[]
+      history?: unknown[] | undefined
+      routes: any[]
+      type: string
+      stale: false
+    }>,
+    {},
+    {}
+  >
+) => {
+  if (loadingLink) {
+    return
+  }
+
+  const handleNavigation = (
+    page: 'Tab-Shared-Toot' | 'Tab-Shared-Account',
+    options: {}
+  ) => {
+    if (navigation) {
+      // @ts-ignore
+      navigation.push(page, options)
+    } else {
+      navigationRef.current?.navigate(page, options)
+    }
+  }
+
+  // If a tooot can be found
+  const matchedStatus = url.match(matcherStatus)
+  if (matchedStatus) {
+    // If the link in current instance
+    const instanceUrl = getInstanceUrl(store.getState())
+    if (matchedStatus[1] === instanceUrl) {
+      handleNavigation('Tab-Shared-Toot', {
+        toot: { id: matchedStatus[3] }
+      })
+      return
+    }
+
+    loadingLink = true
+    let response
+    try {
+      response = await apiInstance<SearchResult>({
+        version: 'v2',
+        method: 'get',
+        url: 'search',
+        params: { type: 'statuses', q: url, limit: 1, resolve: true }
+      })
+    } catch {}
+    if (response && response.body && response.body.statuses.length) {
+      handleNavigation('Tab-Shared-Toot', {
+        toot: response.body.statuses[0]
+      })
+      loadingLink = false
+      return
+    }
+  }
+
+  // If an account can be found
+  const matchedAccount = url.match(matcherAccount)
+  console.log(matchedAccount)
+  if (matchedAccount) {
+    // If the link in current instance
+    const instanceUrl = getInstanceUrl(store.getState())
+    if (matchedAccount[1] === instanceUrl) {
+      if (matchedAccount[3] && matchedAccount[3].match(/[0-9]*/)) {
+        handleNavigation('Tab-Shared-Account', {
+          account: { id: matchedAccount[3] }
+        })
+        return
+      }
+    }
+
+    loadingLink = true
+    let response
+    try {
+      response = await apiInstance<SearchResult>({
+        version: 'v2',
+        method: 'get',
+        url: 'search',
+        params: { type: 'accounts', q: url, limit: 1, resolve: true }
+      })
+    } catch {}
+    if (response && response.body && response.body.accounts.length) {
+      handleNavigation('Tab-Shared-Account', {
+        account: response.body.accounts[0]
+      })
+      loadingLink = false
+      return
+    }
+  }
+
+  loadingLink = false
  switch (getSettingsBrowser(store.getState())) {
    case 'internal':
      await WebBrowser.openBrowserAsync(url, {
--- a/src/modules/react-native-image-viewing
+++ b/src/modules/react-native-image-viewing
@ -1 +0,0 @@
-Subproject commit bba2f756a9d45c79a5ebf7e5e3124eac49b0c9f7
--- a/src/screens/Actions/Root.tsx
+++ b/src/screens/Actions/Root.tsx
@ -185,7 +185,7 @@ const ScreenActionsRoot = React.memo(
          <Animated.View
            style={[
              styles.overlay,
-              { backgroundColor: theme.backgroundOverlay }
+              { backgroundColor: theme.backgroundOverlayInvert }
            ]}
          >
            <PanGestureHandler onGestureEvent={onGestureEvent}>
@ -194,7 +194,7 @@ const ScreenActionsRoot = React.memo(
                  styles.container,
                  styleTop,
                  {
-                    backgroundColor: theme.background,
+                    backgroundColor: theme.backgroundDefault,
                    paddingBottom: insets.bottom || StyleConstants.Spacing.L
                  }
                ]}
--- a/src/screens/Announcements.tsx
+++ b/src/screens/Announcements.tsx
@ -74,8 +74,8 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
          style={[
            styles.announcement,
            {
-              borderColor: theme.primary,
-              backgroundColor: theme.background
+              borderColor: theme.primaryDefault,
+              backgroundColor: theme.backgroundDefault
            }
          ]}
        >
@ -102,10 +102,10 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
                  style={[
                    styles.reaction,
                    {
-                      borderColor: reaction.me ? theme.disabled : theme.primary,
+                      borderColor: reaction.me ? theme.disabled : theme.primaryDefault,
                      backgroundColor: reaction.me
                        ? theme.disabled
-                        : theme.background
+                        : theme.backgroundDefault
                    }
                  ]}
                  onPress={() => {
@ -130,7 +130,7 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
                  )}
                  {reaction.count ? (
                    <Text
-                      style={[styles.reactionCount, { color: theme.primary }]}
+                      style={[styles.reactionCount, { color: theme.primaryDefault }]}
                    >
                      {reaction.count}
                    </Text>
@ -138,13 +138,13 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
                </Pressable>
              ))}
              {/* <Pressable
-                style={[styles.reaction, { borderColor: theme.primary }]}
+                style={[styles.reaction, { borderColor: theme.primaryDefault }]}
                onPress={() => invisibleTextInputRef.current?.focus()}
              >
                <Icon
                  name='Plus'
                  size={StyleConstants.Font.Size.M}
-                  color={theme.primary}
+                  color={theme.primaryDefault}
                />
              </Pressable> */}
            </View>
@ -202,7 +202,7 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
      blurType={mode}
      blurAmount={20}
      style={styles.base}
-      reducedTransparencyFallbackColor={theme.background}
+      reducedTransparencyFallbackColor={theme.backgroundDefault}
    >
      <SafeAreaView style={styles.base}>
        <View
@ -245,8 +245,8 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
                  style={[
                    styles.indicator,
                    {
-                      borderColor: theme.primary,
-                      backgroundColor: i === index ? theme.primary : undefined,
+                      borderColor: theme.primaryDefault,
+                      backgroundColor: i === index ? theme.primaryDefault : undefined,
                      marginLeft:
                        i === query.data.length ? 0 : StyleConstants.Spacing.S
                    }
--- a/src/screens/Compose/DraftsList/Root.tsx
+++ b/src/screens/Compose/DraftsList/Root.tsx
@ -55,7 +55,7 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
    ({ item }: { item: ComposeStateDraft }) => {
      return (
        <Pressable
-          style={[styles.draft, { backgroundColor: theme.background }]}
+          style={[styles.draft, { backgroundColor: theme.backgroundDefault }]}
          onPress={async () => {
            setCheckingAttachments(true)
            let tempDraft = item
@ -103,7 +103,7 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
            <HeaderSharedCreated created_at={item.timestamp} />
            <Text
              numberOfLines={2}
-              style={[styles.text, { color: theme.primary }]}
+              style={[styles.text, { color: theme.primaryDefault }]}
            >
              {item.text ||
                item.spoiler ||
@ -181,7 +181,7 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
        visible={checkingAttachments}
        children={
          <View
-            style={[styles.modal, { backgroundColor: theme.backgroundOverlay }]}
+            style={[styles.modal, { backgroundColor: theme.backgroundOverlayInvert }]}
            children={
              <Text
                children='检查附件在服务器的状态…'
--- a/src/screens/Compose/EditAttachment/Image.tsx
+++ b/src/screens/Compose/EditAttachment/Image.tsx
@ -144,7 +144,7 @@ const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
                <G>
                  <Path
                    d='M1000,0 L1000,1000 L0,1000 L0,0 L1000,0 Z M500,475 C486.192881,475 475,486.192881 475,500 C475,513.807119 486.192881,525 500,525 C513.807119,525 525,513.807119 525,500 C525,486.192881 513.807119,475 500,475 Z'
-                    fill={theme.backgroundOverlay}
+                    fill={theme.backgroundOverlayInvert}
                  />
                  <Circle
                    stroke={theme.primaryOverlay}
@ -160,7 +160,7 @@ const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
          </Animated.View>
        </PanGestureHandler>
      </View>
-      <Text style={[styles.imageFocusText, { color: theme.primary }]}>
+      <Text style={[styles.imageFocusText, { color: theme.primaryDefault }]}>
        {t('content.editAttachment.content.imageFocus')}
      </Text>
    </>
--- a/src/screens/Compose/EditAttachment/Root.tsx
+++ b/src/screens/Compose/EditAttachment/Root.tsx
@ -61,13 +61,13 @@ const ComposeEditAttachmentRoot: React.FC<Props> = ({ index }) => {
    <ScrollView ref={scrollViewRef}>
      {mediaDisplay}
      <View style={styles.altTextContainer}>
-        <Text style={[styles.altTextInputHeading, { color: theme.primary }]}>
+        <Text style={[styles.altTextInputHeading, { color: theme.primaryDefault }]}>
          {t('content.editAttachment.content.altText.heading')}
        </Text>
        <TextInput
          style={[
            styles.altTextInput,
-            { borderColor: theme.border, color: theme.primary }
+            { borderColor: theme.border, color: theme.primaryDefault }
          ]}
          onFocus={() => scrollViewRef.current?.scrollToEnd()}
          autoCapitalize='none'
--- a/src/screens/Compose/Posting.tsx
+++ b/src/screens/Compose/Posting.tsx
@ -14,7 +14,7 @@ const ComposePosting = React.memo(
        animationType='fade'
        visible={composeState.posting}
        children={
-          <View style={{ flex: 1, backgroundColor: theme.backgroundOverlay }} />
+          <View style={{ flex: 1, backgroundColor: theme.backgroundOverlayInvert }} />
        }
      />
    )
--- a/src/screens/Compose/Root/Actions.tsx
+++ b/src/screens/Compose/Root/Actions.tsx
@ -20,7 +20,7 @@ const ComposeActions: React.FC = () => {
    if (composeState.poll.active) return theme.disabled

    if (composeState.attachments.uploads.length) {
-      return theme.primary
+      return theme.primaryDefault
    } else {
      return theme.secondary
    }
@ -43,7 +43,7 @@ const ComposeActions: React.FC = () => {
    if (composeState.attachments.uploads.length) return theme.disabled

    if (composeState.poll.active) {
-      return theme.primary
+      return theme.primaryDefault
    } else {
      return theme.secondary
    }
@ -144,7 +144,7 @@ const ComposeActions: React.FC = () => {
    if (!composeState.emoji.emojis) return theme.disabled

    if (composeState.emoji.active) {
-      return theme.primary
+      return theme.primaryDefault
    } else {
      return theme.secondary
    }
@ -166,7 +166,7 @@ const ComposeActions: React.FC = () => {
    <View
      style={[
        styles.additions,
-        { backgroundColor: theme.background, borderTopColor: theme.border }
+        { backgroundColor: theme.backgroundDefault, borderTopColor: theme.border }
      ]}
    >
      <Pressable
@ -196,7 +196,7 @@ const ComposeActions: React.FC = () => {
            name='AlertTriangle'
            size={24}
            color={
-              composeState.spoiler.active ? theme.primary : theme.secondary
+              composeState.spoiler.active ? theme.primaryDefault : theme.secondary
            }
          />
        }
--- a/src/screens/Compose/Root/Footer/Attachments.tsx
+++ b/src/screens/Compose/Root/Footer/Attachments.tsx
@ -130,8 +130,8 @@ const ComposeAttachments: React.FC = () => {
              style={[
                styles.duration,
                {
-                  color: theme.background,
-                  backgroundColor: theme.backgroundOverlay
+                  color: theme.backgroundDefault,
+                  backgroundColor: theme.backgroundOverlayInvert
                }
              ]}
            >
@ -142,7 +142,7 @@ const ComposeAttachments: React.FC = () => {
            <View
              style={[
                styles.uploading,
-                { backgroundColor: theme.backgroundOverlay }
+                { backgroundColor: theme.backgroundOverlayInvert }
              ]}
            >
              <Circle
@ -196,7 +196,7 @@ const ComposeAttachments: React.FC = () => {
          styles.container,
          {
            width: DEFAULT_HEIGHT,
-            backgroundColor: theme.backgroundOverlay
+            backgroundColor: theme.backgroundOverlayInvert
          }
        ]}
        onPress={async () => {
@ -238,9 +238,9 @@ const ComposeAttachments: React.FC = () => {
        <Icon
          name={composeState.attachments.sensitive ? 'CheckCircle' : 'Circle'}
          size={StyleConstants.Font.Size.L}
-          color={theme.primary}
+          color={theme.primaryDefault}
        />
-        <Text style={[styles.sensitiveText, { color: theme.primary }]}>
+        <Text style={[styles.sensitiveText, { color: theme.primaryDefault }]}>
          {t('content.root.footer.attachments.sensitive')}
        </Text>
      </Pressable>
--- a/src/screens/Compose/Root/Footer/Poll.tsx
+++ b/src/screens/Compose/Root/Footer/Poll.tsx
@ -54,7 +54,7 @@ const ComposePoll: React.FC = () => {
                  styles.textInput,
                  {
                    borderColor: theme.border,
-                    color: hasConflict ? theme.red : theme.primary
+                    color: hasConflict ? theme.red : theme.primaryDefault
                  }
                ]}
                placeholder={
--- a/src/screens/Compose/Root/Header/SpoilerInput.tsx
+++ b/src/screens/Compose/Root/Header/SpoilerInput.tsx
@ -17,7 +17,7 @@ const ComposeSpoilerInput: React.FC = () => {
      style={[
        styles.spoilerInput,
        {
-          color: theme.primary,
+          color: theme.primaryDefault,
          borderBottomColor: theme.border
        }
      ]}
--- a/src/screens/Compose/Root/Header/TextInput.tsx
+++ b/src/screens/Compose/Root/Header/TextInput.tsx
@ -17,7 +17,7 @@ const ComposeTextInput: React.FC = () => {
      style={[
        styles.textInput,
        {
-          color: theme.primary,
+          color: theme.primaryDefault,
          borderBottomColor: theme.border
        }
      ]}
--- a/src/screens/Compose/utils/post.ts
+++ b/src/screens/Compose/utils/post.ts
@ -15,7 +15,7 @@ const composePost = async (
        url: `statuses/${composeState.replyToStatus.id}`
      })
    } catch (err) {
-      if (err.status == 404) {
+      if (err.status && err.status == 404) {
        return Promise.reject({ removeReply: true })
      }
    }
--- a/src/screens/ImageViewer/@types/extensions.d.ts
+++ b/src/screens/ImageViewer/@types/extensions.d.ts
@ -0,0 +1,7 @@
+import * as rn from "react-native";
+
+declare module "react-native" {
+  class VirtualizedList<ItemT> extends React.Component<
+    VirtualizedListProps<ItemT>
+  > {}
+}
--- a/src/screens/ImageViewer/@types/index.ts
+++ b/src/screens/ImageViewer/@types/index.ts
@ -0,0 +1,17 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export type Dimensions = {
+  width: number
+  height: number
+}
+
+export type Position = {
+  x: number
+  y: number
+}
--- a/src/screens/ImageViewer/Root.tsx
+++ b/src/screens/ImageViewer/Root.tsx
@ -0,0 +1,133 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React, { ComponentType, useCallback, useEffect } from 'react'
+import {
+  Animated,
+  Dimensions,
+  StyleSheet,
+  View,
+  VirtualizedList
+} from 'react-native'
+import ImageItem from './components/ImageItem'
+import useAnimatedComponents from './hooks/useAnimatedComponents'
+import useImageIndexChange from './hooks/useImageIndexChange'
+import useRequestClose from './hooks/useRequestClose'
+
+type Props = {
+  images: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls']
+  imageIndex: number
+  onRequestClose: () => void
+  onLongPress?: (
+    image: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls'][0]
+  ) => void
+  onImageIndexChange?: (imageIndex: number) => void
+  backgroundColor?: string
+  swipeToCloseEnabled?: boolean
+  delayLongPress?: number
+  HeaderComponent: ComponentType<{ imageIndex: number }>
+}
+
+const DEFAULT_BG_COLOR = '#000'
+const DEFAULT_DELAY_LONG_PRESS = 800
+const SCREEN = Dimensions.get('screen')
+const SCREEN_WIDTH = SCREEN.width
+
+function ImageViewer ({
+  images,
+  imageIndex,
+  onRequestClose,
+  onLongPress = () => {},
+  onImageIndexChange,
+  backgroundColor = DEFAULT_BG_COLOR,
+  swipeToCloseEnabled,
+  delayLongPress = DEFAULT_DELAY_LONG_PRESS,
+  HeaderComponent
+}: Props) {
+  const imageList = React.createRef<
+    VirtualizedList<
+      Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls'][0]
+    >
+  >()
+  const [opacity, onRequestCloseEnhanced] = useRequestClose(onRequestClose)
+  const [currentImageIndex, onScroll] = useImageIndexChange(imageIndex, SCREEN)
+  const [headerTransform, toggleBarsVisible] = useAnimatedComponents()
+
+  useEffect(() => {
+    if (onImageIndexChange) {
+      onImageIndexChange(currentImageIndex)
+    }
+  }, [currentImageIndex])
+
+  const onZoom = useCallback(
+    (isScaled: boolean) => {
+      // @ts-ignore
+      imageList?.current?.setNativeProps({ scrollEnabled: !isScaled })
+      toggleBarsVisible(!isScaled)
+    },
+    [imageList]
+  )
+
+  return (
+    <View style={[styles.container, { opacity, backgroundColor }]}>
+      <Animated.View style={[styles.header, { transform: headerTransform }]}>
+        {React.createElement(HeaderComponent, {
+          imageIndex: currentImageIndex
+        })}
+      </Animated.View>
+      <VirtualizedList
+        ref={imageList}
+        data={images}
+        horizontal
+        pagingEnabled
+        windowSize={2}
+        initialNumToRender={1}
+        maxToRenderPerBatch={1}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        initialScrollIndex={
+          imageIndex > images.length - 1 ? images.length - 1 : imageIndex
+        }
+        getItem={(_, index) => images[index]}
+        getItemCount={() => images.length}
+        getItemLayout={(_, index) => ({
+          length: SCREEN_WIDTH,
+          offset: SCREEN_WIDTH * index,
+          index
+        })}
+        renderItem={({ item: imageSrc }) => (
+          <ImageItem
+            onZoom={onZoom}
+            imageSrc={imageSrc}
+            onRequestClose={onRequestCloseEnhanced}
+            onLongPress={onLongPress}
+            delayLongPress={delayLongPress}
+            swipeToCloseEnabled={swipeToCloseEnabled}
+          />
+        )}
+        onMomentumScrollEnd={onScroll}
+        keyExtractor={imageSrc => imageSrc.url}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000'
+  },
+  header: {
+    position: 'absolute',
+    width: '100%',
+    zIndex: 1,
+    top: 0
+  }
+})
+
+export default ImageViewer
--- a/src/screens/ImageViewer/components/ImageItem.android.tsx
+++ b/src/screens/ImageViewer/components/ImageItem.android.tsx
@ -0,0 +1,117 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import GracefullyImage from '@components/GracefullyImage'
+import React, { useState, useCallback } from 'react'
+import { Animated, Dimensions, StyleSheet } from 'react-native'
+import usePanResponder from '../hooks/usePanResponder'
+import { getImageStyles, getImageTransform } from '../utils'
+
+const SCREEN = Dimensions.get('window')
+const SCREEN_WIDTH = SCREEN.width
+const SCREEN_HEIGHT = SCREEN.height
+
+type Props = {
+  imageSrc: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls'][0]
+  onRequestClose: () => void
+  onZoom: (isZoomed: boolean) => void
+  onLongPress: (
+    image: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls'][0]
+  ) => void
+  delayLongPress: number
+  swipeToCloseEnabled?: boolean
+  doubleTapToZoomEnabled?: boolean
+}
+
+const ImageItem = ({
+  imageSrc,
+  onZoom,
+  onRequestClose,
+  onLongPress,
+  delayLongPress,
+  doubleTapToZoomEnabled = true
+}: Props) => {
+  const imageContainer = React.createRef<any>()
+  const [imageDimensions, setImageDimensions] = useState({
+    width: imageSrc.width || 0,
+    height: imageSrc.height || 0
+  })
+  const [translate, scale] = getImageTransform(imageDimensions, SCREEN)
+
+  const onZoomPerformed = (isZoomed: boolean) => {
+    onZoom(isZoomed)
+    if (imageContainer?.current) {
+      // @ts-ignore
+      imageContainer.current.setNativeProps({
+        scrollEnabled: !isZoomed
+      })
+    }
+  }
+
+  const onLongPressHandler = useCallback(() => {
+    onLongPress(imageSrc)
+  }, [imageSrc, onLongPress])
+
+  const [panHandlers, scaleValue, translateValue] = usePanResponder({
+    initialScale: scale || 1,
+    initialTranslate: translate || { x: 0, y: 0 },
+    onZoom: onZoomPerformed,
+    doubleTapToZoomEnabled,
+    onLongPress: onLongPressHandler,
+    delayLongPress,
+    onRequestClose
+  })
+
+  const imagesStyles = getImageStyles(
+    imageDimensions,
+    translateValue,
+    scaleValue
+  )
+
+  return (
+    <Animated.ScrollView
+      ref={imageContainer}
+      style={styles.listItem}
+      pagingEnabled
+      nestedScrollEnabled
+      showsHorizontalScrollIndicator={false}
+      showsVerticalScrollIndicator={false}
+      contentContainerStyle={styles.imageScrollContainer}
+      scrollEnabled={false}
+    >
+      <Animated.View
+        {...panHandlers}
+        style={imagesStyles}
+        children={
+          <GracefullyImage
+            uri={{
+              original: imageSrc.url,
+              remote: imageSrc.remote_url
+            }}
+            {...((!imageSrc.width || !imageSrc.height) && {
+              setImageDimensions
+            })}
+            style={{ flex: 1 }}
+          />
+        }
+      />
+    </Animated.ScrollView>
+  )
+}
+
+const styles = StyleSheet.create({
+  listItem: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT
+  },
+  imageScrollContainer: {
+    height: SCREEN_HEIGHT * 2
+  }
+})
+
+export default React.memo(ImageItem)
--- a/src/screens/ImageViewer/components/ImageItem.d.ts
+++ b/src/screens/ImageViewer/components/ImageItem.d.ts
@ -0,0 +1,32 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React from "react";
+import { GestureResponderEvent } from "react-native";
+import { ImageSource } from "../@types";
+
+declare type Props = {
+  imageSrc: ImageSource;
+  onRequestClose: () => void;
+  onZoom: (isZoomed: boolean) => void;
+  onLongPress: (image: ImageSource) => void;
+  delayLongPress: number;
+  swipeToCloseEnabled?: boolean;
+  doubleTapToZoomEnabled?: boolean;
+};
+
+declare const _default: React.MemoExoticComponent<({
+  imageSrc,
+  onZoom,
+  onRequestClose,
+  onLongPress,
+  delayLongPress,
+  swipeToCloseEnabled,
+}: Props) => JSX.Element>;
+
+export default _default;
--- a/src/screens/ImageViewer/components/ImageItem.ios.tsx
+++ b/src/screens/ImageViewer/components/ImageItem.ios.tsx
@ -0,0 +1,175 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import GracefullyImage from '@components/GracefullyImage'
+import React, { createRef, useCallback, useRef, useState } from 'react'
+import {
+  Animated,
+  Dimensions,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollView,
+  StyleSheet
+} from 'react-native'
+import {
+  LongPressGestureHandler,
+  State,
+  TapGestureHandler
+} from 'react-native-gesture-handler'
+import useDoubleTapToZoom from '../hooks/useDoubleTapToZoom'
+import { getImageStyles, getImageTransform } from '../utils'
+
+const SWIPE_CLOSE_OFFSET = 75
+const SWIPE_CLOSE_VELOCITY = 0.55
+const SCREEN = Dimensions.get('screen')
+const SCREEN_WIDTH = SCREEN.width
+const SCREEN_HEIGHT = SCREEN.height
+
+type Props = {
+  imageSrc: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls'][0]
+  onRequestClose: () => void
+  onZoom: (scaled: boolean) => void
+  onLongPress: (
+    image: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls'][0]
+  ) => void
+  swipeToCloseEnabled?: boolean
+}
+
+const doubleTap = createRef()
+
+const ImageItem = ({
+  imageSrc,
+  onZoom,
+  onRequestClose,
+  onLongPress,
+  swipeToCloseEnabled = true
+}: Props) => {
+  const scrollViewRef = useRef<ScrollView>(null)
+  const [scaled, setScaled] = useState(false)
+  const [imageDimensions, setImageDimensions] = useState({
+    width: imageSrc.width || 0,
+    height: imageSrc.height || 0
+  })
+  const handleDoubleTap = useDoubleTapToZoom(scrollViewRef, scaled, SCREEN)
+
+  const [translate, scale] = getImageTransform(imageDimensions, SCREEN)
+  const scrollValueY = new Animated.Value(0)
+  const scaleValue = new Animated.Value(scale || 1)
+  const translateValue = new Animated.ValueXY(translate)
+  const maxScale = scale && scale > 0 ? Math.max(1 / scale, 1) : 1
+
+  const imageOpacity = scrollValueY.interpolate({
+    inputRange: [-SWIPE_CLOSE_OFFSET, 0, SWIPE_CLOSE_OFFSET],
+    outputRange: [0.5, 1, 0.5]
+  })
+  const imagesStyles = getImageStyles(
+    imageDimensions,
+    translateValue,
+    scaleValue
+  )
+  const imageStylesWithOpacity = { ...imagesStyles, opacity: imageOpacity }
+
+  const onScrollEndDrag = useCallback(
+    ({ nativeEvent }: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const velocityY = nativeEvent?.velocity?.y ?? 0
+      const scaled = nativeEvent?.zoomScale > 1
+
+      onZoom(scaled)
+      setScaled(scaled)
+
+      if (
+        !scaled &&
+        swipeToCloseEnabled &&
+        Math.abs(velocityY) > SWIPE_CLOSE_VELOCITY
+      ) {
+        onRequestClose()
+      }
+    },
+    [scaled]
+  )
+
+  const onScroll = ({
+    nativeEvent
+  }: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const offsetY = nativeEvent?.contentOffset?.y ?? 0
+
+    if (nativeEvent?.zoomScale > 1) {
+      return
+    }
+
+    scrollValueY.setValue(offsetY)
+  }
+
+  return (
+    <LongPressGestureHandler
+      onHandlerStateChange={({ nativeEvent }) => {
+        if (nativeEvent.state === State.ACTIVE) {
+          onLongPress(imageSrc)
+        }
+      }}
+    >
+      <TapGestureHandler
+        onHandlerStateChange={({ nativeEvent }) =>
+          nativeEvent.state === State.ACTIVE && onRequestClose()
+        }
+        waitFor={doubleTap}
+      >
+        <TapGestureHandler
+          ref={doubleTap}
+          onHandlerStateChange={handleDoubleTap}
+          numberOfTaps={2}
+        >
+          <ScrollView
+            ref={scrollViewRef}
+            style={styles.listItem}
+            pinchGestureEnabled
+            nestedScrollEnabled={true}
+            showsHorizontalScrollIndicator={false}
+            showsVerticalScrollIndicator={false}
+            maximumZoomScale={maxScale}
+            contentContainerStyle={styles.imageScrollContainer}
+            scrollEnabled={swipeToCloseEnabled}
+            onScrollEndDrag={onScrollEndDrag}
+            scrollEventThrottle={1}
+            {...(swipeToCloseEnabled && {
+              onScroll
+            })}
+          >
+            <Animated.View
+              style={imageStylesWithOpacity}
+              children={
+                <GracefullyImage
+                  uri={{
+                    original: imageSrc.url,
+                    remote: imageSrc.remote_url
+                  }}
+                  {...((!imageSrc.width || !imageSrc.height) && {
+                    setImageDimensions
+                  })}
+                  style={{ flex: 1 }}
+                />
+              }
+            />
+          </ScrollView>
+        </TapGestureHandler>
+      </TapGestureHandler>
+    </LongPressGestureHandler>
+  )
+}
+
+const styles = StyleSheet.create({
+  listItem: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT
+  },
+  imageScrollContainer: {
+    height: SCREEN_HEIGHT
+  }
+})
+
+export default React.memo(ImageItem)
--- a/src/screens/ImageViewer/hooks/useAnimatedComponents.ts
+++ b/src/screens/ImageViewer/hooks/useAnimatedComponents.ts
@ -0,0 +1,40 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { Animated } from 'react-native'
+
+const INITIAL_POSITION = { x: 0, y: 0 }
+const ANIMATION_CONFIG = {
+  duration: 200,
+  useNativeDriver: true
+}
+
+const useAnimatedComponents = () => {
+  const headerTranslate = new Animated.ValueXY(INITIAL_POSITION)
+
+  const toggleVisible = (isVisible: boolean) => {
+    if (isVisible) {
+      Animated.parallel([
+        Animated.timing(headerTranslate.y, { ...ANIMATION_CONFIG, toValue: 0 })
+      ]).start()
+    } else {
+      Animated.parallel([
+        Animated.timing(headerTranslate.y, {
+          ...ANIMATION_CONFIG,
+          toValue: -300
+        })
+      ]).start()
+    }
+  }
+
+  const headerTransform = headerTranslate.getTranslateTransform()
+
+  return [headerTransform, toggleVisible] as const
+}
+
+export default useAnimatedComponents
--- a/src/screens/ImageViewer/hooks/useDoubleTapToZoom.ts
+++ b/src/screens/ImageViewer/hooks/useDoubleTapToZoom.ts
@ -0,0 +1,64 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React, { useCallback } from 'react'
+import { ScrollView } from 'react-native'
+import {
+  HandlerStateChangeEvent,
+  State,
+  TapGestureHandlerEventPayload
+} from 'react-native-gesture-handler'
+import { Dimensions } from '../@types'
+
+/**
+ * This is iOS only.
+ * Same functionality for Android implemented inside usePanResponder hook.
+ */
+function useDoubleTapToZoom (
+  scrollViewRef: React.RefObject<ScrollView>,
+  scaled: boolean,
+  screen: Dimensions
+) {
+  const handleDoubleTap = useCallback(
+    ({
+      nativeEvent
+    }: HandlerStateChangeEvent<TapGestureHandlerEventPayload>) => {
+      if (nativeEvent.state === State.ACTIVE) {
+        const scrollResponderRef = scrollViewRef?.current?.getScrollResponder()
+
+        const { absoluteX, absoluteY } = nativeEvent
+        let targetX = 0
+        let targetY = 0
+        let targetWidth = screen.width
+        let targetHeight = screen.height
+
+        // Zooming in
+        // TODO: Add more precise calculation of targetX, targetY based on touch
+        if (!scaled) {
+          targetX = absoluteX / 2
+          targetY = absoluteY / 2
+          targetWidth = screen.width / 2
+          targetHeight = screen.height / 2
+        }
+
+        scrollResponderRef?.scrollResponderZoomTo({
+          x: targetX,
+          y: targetY,
+          width: targetWidth,
+          height: targetHeight,
+          animated: true
+        })
+      }
+    },
+    [scaled]
+  )
+
+  return handleDoubleTap
+}
+
+export default useDoubleTapToZoom
--- a/src/screens/ImageViewer/hooks/useImageIndexChange.ts
+++ b/src/screens/ImageViewer/hooks/useImageIndexChange.ts
@ -0,0 +1,31 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { useState } from 'react'
+import { NativeSyntheticEvent, NativeScrollEvent } from 'react-native'
+import { Dimensions } from '../@types'
+
+const useImageIndexChange = (imageIndex: number, screen: Dimensions) => {
+  const [currentImageIndex, setImageIndex] = useState(imageIndex)
+  const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const {
+      nativeEvent: {
+        contentOffset: { x: scrollX }
+      }
+    } = event
+
+    if (screen.width) {
+      const nextIndex = Math.round(scrollX / screen.width)
+      setImageIndex(nextIndex < 0 ? 0 : nextIndex)
+    }
+  }
+
+  return [currentImageIndex, onScroll] as const
+}
+
+export default useImageIndexChange
--- a/src/screens/ImageViewer/hooks/usePanResponder.ts
+++ b/src/screens/ImageViewer/hooks/usePanResponder.ts
@ -0,0 +1,407 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { useMemo, useEffect } from 'react'
+import {
+  Animated,
+  Dimensions,
+  GestureResponderEvent,
+  GestureResponderHandlers,
+  NativeTouchEvent,
+  PanResponderGestureState
+} from 'react-native'
+import { Position } from '../@types'
+import {
+  createPanResponder,
+  getDistanceBetweenTouches,
+  getImageTranslate,
+  getImageDimensionsByTranslate
+} from '../utils'
+
+const SCREEN = Dimensions.get('window')
+const SCREEN_WIDTH = SCREEN.width
+const SCREEN_HEIGHT = SCREEN.height
+const MIN_DIMENSION = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT)
+
+const SCALE_MAX = 1
+const DOUBLE_TAP_DELAY = 300
+const OUT_BOUND_MULTIPLIER = 0.75
+
+type Props = {
+  initialScale: number
+  initialTranslate: Position
+  onZoom: (isZoomed: boolean) => void
+  doubleTapToZoomEnabled: boolean
+  onLongPress: () => void
+  delayLongPress: number
+  onRequestClose: () => void
+}
+
+const usePanResponder = ({
+  initialScale,
+  initialTranslate,
+  onZoom,
+  doubleTapToZoomEnabled,
+  onLongPress,
+  delayLongPress,
+  onRequestClose
+}: Props): Readonly<[
+  GestureResponderHandlers,
+  Animated.Value,
+  Animated.ValueXY
+]> => {
+  let numberInitialTouches = 1
+  let initialTouches: NativeTouchEvent[] = []
+  let currentScale = initialScale
+  let currentTranslate = initialTranslate
+  let tmpScale = 0
+  let tmpTranslate: Position | null = null
+  let isDoubleTapPerformed = false
+  let lastTapTS: number | null = null
+  let timer: number | null = null
+  let longPressHandlerRef: number | null = null
+
+  const meaningfulShift = MIN_DIMENSION * 0.01
+  const scaleValue = new Animated.Value(initialScale)
+  const translateValue = new Animated.ValueXY(initialTranslate)
+
+  const imageDimensions = getImageDimensionsByTranslate(
+    initialTranslate,
+    SCREEN
+  )
+
+  const getBounds = (scale: number) => {
+    const scaledImageDimensions = {
+      width: imageDimensions.width * scale,
+      height: imageDimensions.height * scale
+    }
+    const translateDelta = getImageTranslate(scaledImageDimensions, SCREEN)
+
+    const left = initialTranslate.x - translateDelta.x
+    const right = left - (scaledImageDimensions.width - SCREEN.width)
+    const top = initialTranslate.y - translateDelta.y
+    const bottom = top - (scaledImageDimensions.height - SCREEN.height)
+
+    return [top, left, bottom, right]
+  }
+
+  const getTranslateInBounds = (translate: Position, scale: number) => {
+    const inBoundTranslate = { x: translate.x, y: translate.y }
+    const [topBound, leftBound, bottomBound, rightBound] = getBounds(scale)
+
+    if (translate.x > leftBound) {
+      inBoundTranslate.x = leftBound
+    } else if (translate.x < rightBound) {
+      inBoundTranslate.x = rightBound
+    }
+
+    if (translate.y > topBound) {
+      inBoundTranslate.y = topBound
+    } else if (translate.y < bottomBound) {
+      inBoundTranslate.y = bottomBound
+    }
+
+    return inBoundTranslate
+  }
+
+  const fitsScreenByWidth = () =>
+    imageDimensions.width * currentScale < SCREEN_WIDTH
+  const fitsScreenByHeight = () =>
+    imageDimensions.height * currentScale < SCREEN_HEIGHT
+
+  useEffect(() => {
+    scaleValue.addListener(({ value }) => {
+      if (typeof onZoom === 'function') {
+        onZoom(value !== initialScale)
+      }
+    })
+
+    return () => scaleValue.removeAllListeners()
+  })
+
+  const cancelLongPressHandle = () => {
+    longPressHandlerRef && clearTimeout(longPressHandlerRef)
+  }
+
+  const handlers = {
+    onGrant: (
+      _: GestureResponderEvent,
+      gestureState: PanResponderGestureState
+    ) => {
+      numberInitialTouches = gestureState.numberActiveTouches
+
+      if (gestureState.numberActiveTouches > 1) return
+
+      longPressHandlerRef = setTimeout(onLongPress, delayLongPress)
+    },
+    onStart: (
+      event: GestureResponderEvent,
+      gestureState: PanResponderGestureState
+    ) => {
+      initialTouches = event.nativeEvent.touches
+      numberInitialTouches = gestureState.numberActiveTouches
+
+      if (gestureState.numberActiveTouches > 1) return
+
+      const tapTS = Date.now()
+      !timer &&
+        (timer = setTimeout(() => onRequestClose(), DOUBLE_TAP_DELAY + 50))
+      // Handle double tap event by calculating diff between first and second taps timestamps
+
+      isDoubleTapPerformed = Boolean(
+        lastTapTS && tapTS - lastTapTS < DOUBLE_TAP_DELAY
+      )
+
+      if (doubleTapToZoomEnabled && isDoubleTapPerformed) {
+        clearTimeout(timer)
+        const isScaled = currentTranslate.x !== initialTranslate.x // currentScale !== initialScale;
+        const { pageX: touchX, pageY: touchY } = event.nativeEvent.touches[0]
+        const targetScale = SCALE_MAX
+        const nextScale = isScaled ? initialScale : targetScale
+        const nextTranslate = isScaled
+          ? initialTranslate
+          : getTranslateInBounds(
+              {
+                x:
+                  initialTranslate.x +
+                  (SCREEN_WIDTH / 2 - touchX) * (targetScale / currentScale),
+                y:
+                  initialTranslate.y +
+                  (SCREEN_HEIGHT / 2 - -touchY) * (targetScale / currentScale)
+              },
+              targetScale
+            )
+
+        onZoom(!isScaled)
+
+        Animated.parallel(
+          [
+            Animated.timing(translateValue.x, {
+              toValue: nextTranslate.x,
+              duration: 300,
+              useNativeDriver: true
+            }),
+            Animated.timing(translateValue.y, {
+              toValue: nextTranslate.y,
+              duration: 300,
+              useNativeDriver: true
+            }),
+            Animated.timing(scaleValue, {
+              toValue: nextScale,
+              duration: 300,
+              useNativeDriver: true
+            })
+          ],
+          { stopTogether: false }
+        ).start(() => {
+          currentScale = nextScale
+          currentTranslate = nextTranslate
+        })
+
+        lastTapTS = null
+        timer = null
+      } else {
+        lastTapTS = Date.now()
+      }
+    },
+    onMove: (
+      event: GestureResponderEvent,
+      gestureState: PanResponderGestureState
+    ) => {
+      const { dx, dy } = gestureState
+
+      if (Math.abs(dx) >= meaningfulShift || Math.abs(dy) >= meaningfulShift) {
+        cancelLongPressHandle()
+        timer && clearTimeout(timer)
+      }
+
+      // Don't need to handle move because double tap in progress (was handled in onStart)
+      if (doubleTapToZoomEnabled && isDoubleTapPerformed) {
+        cancelLongPressHandle()
+        timer && clearTimeout(timer)
+        return
+      }
+
+      if (
+        numberInitialTouches === 1 &&
+        gestureState.numberActiveTouches === 2
+      ) {
+        numberInitialTouches = 2
+        initialTouches = event.nativeEvent.touches
+      }
+
+      const isTapGesture =
+        numberInitialTouches == 1 && gestureState.numberActiveTouches === 1
+      const isPinchGesture =
+        numberInitialTouches === 2 && gestureState.numberActiveTouches === 2
+
+      if (isPinchGesture) {
+        cancelLongPressHandle()
+        timer && clearTimeout(timer)
+
+        const initialDistance = getDistanceBetweenTouches(initialTouches)
+        const currentDistance = getDistanceBetweenTouches(
+          event.nativeEvent.touches
+        )
+
+        let nextScale = (currentDistance / initialDistance) * currentScale
+
+        /**
+         * In case image is scaling smaller than initial size ->
+         * slow down this transition by applying OUT_BOUND_MULTIPLIER
+         */
+        if (nextScale < initialScale) {
+          nextScale =
+            nextScale + (initialScale - nextScale) * OUT_BOUND_MULTIPLIER
+        }
+
+        /**
+         * In case image is scaling down -> move it in direction of initial position
+         */
+        if (currentScale > initialScale && currentScale > nextScale) {
+          const k = (currentScale - initialScale) / (currentScale - nextScale)
+
+          const nextTranslateX =
+            nextScale < initialScale
+              ? initialTranslate.x
+              : currentTranslate.x -
+                (currentTranslate.x - initialTranslate.x) / k
+
+          const nextTranslateY =
+            nextScale < initialScale
+              ? initialTranslate.y
+              : currentTranslate.y -
+                (currentTranslate.y - initialTranslate.y) / k
+
+          translateValue.x.setValue(nextTranslateX)
+          translateValue.y.setValue(nextTranslateY)
+
+          tmpTranslate = { x: nextTranslateX, y: nextTranslateY }
+        }
+
+        scaleValue.setValue(nextScale)
+        tmpScale = nextScale
+      }
+
+      if (isTapGesture && currentScale > initialScale) {
+        const { x, y } = currentTranslate
+        const { dx, dy } = gestureState
+        const [topBound, leftBound, bottomBound, rightBound] = getBounds(
+          currentScale
+        )
+
+        let nextTranslateX = x + dx
+        let nextTranslateY = y + dy
+
+        if (nextTranslateX > leftBound) {
+          nextTranslateX =
+            nextTranslateX - (nextTranslateX - leftBound) * OUT_BOUND_MULTIPLIER
+        }
+
+        if (nextTranslateX < rightBound) {
+          nextTranslateX =
+            nextTranslateX -
+            (nextTranslateX - rightBound) * OUT_BOUND_MULTIPLIER
+        }
+
+        if (nextTranslateY > topBound) {
+          nextTranslateY =
+            nextTranslateY - (nextTranslateY - topBound) * OUT_BOUND_MULTIPLIER
+        }
+
+        if (nextTranslateY < bottomBound) {
+          nextTranslateY =
+            nextTranslateY -
+            (nextTranslateY - bottomBound) * OUT_BOUND_MULTIPLIER
+        }
+
+        if (fitsScreenByWidth()) {
+          nextTranslateX = x
+        }
+
+        if (fitsScreenByHeight()) {
+          nextTranslateY = y
+        }
+
+        translateValue.x.setValue(nextTranslateX)
+        translateValue.y.setValue(nextTranslateY)
+
+        tmpTranslate = { x: nextTranslateX, y: nextTranslateY }
+      }
+    },
+    onRelease: () => {
+      cancelLongPressHandle()
+
+      if (isDoubleTapPerformed) {
+        isDoubleTapPerformed = false
+      }
+
+      if (tmpScale > 0) {
+        if (tmpScale < initialScale || tmpScale > SCALE_MAX) {
+          tmpScale = tmpScale < initialScale ? initialScale : SCALE_MAX
+          Animated.timing(scaleValue, {
+            toValue: tmpScale,
+            duration: 100,
+            useNativeDriver: true
+          }).start()
+        }
+
+        currentScale = tmpScale
+        tmpScale = 0
+      }
+
+      if (tmpTranslate) {
+        const { x, y } = tmpTranslate
+        const [topBound, leftBound, bottomBound, rightBound] = getBounds(
+          currentScale
+        )
+
+        let nextTranslateX = x
+        let nextTranslateY = y
+
+        if (!fitsScreenByWidth()) {
+          if (nextTranslateX > leftBound) {
+            nextTranslateX = leftBound
+          } else if (nextTranslateX < rightBound) {
+            nextTranslateX = rightBound
+          }
+        }
+
+        if (!fitsScreenByHeight()) {
+          if (nextTranslateY > topBound) {
+            nextTranslateY = topBound
+          } else if (nextTranslateY < bottomBound) {
+            nextTranslateY = bottomBound
+          }
+        }
+
+        Animated.parallel([
+          Animated.timing(translateValue.x, {
+            toValue: nextTranslateX,
+            duration: 100,
+            useNativeDriver: true
+          }),
+          Animated.timing(translateValue.y, {
+            toValue: nextTranslateY,
+            duration: 100,
+            useNativeDriver: true
+          })
+        ]).start()
+
+        currentTranslate = { x: nextTranslateX, y: nextTranslateY }
+        tmpTranslate = null
+      }
+    }
+  }
+
+  const panResponder = useMemo(() => createPanResponder(handlers), [handlers])
+
+  return [panResponder.panHandlers, scaleValue, translateValue]
+}
+
+export default usePanResponder
--- a/src/screens/ImageViewer/hooks/useRequestClose.ts
+++ b/src/screens/ImageViewer/hooks/useRequestClose.ts
@ -0,0 +1,23 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { useState } from 'react'
+
+const useRequestClose = (onRequestClose: () => void) => {
+  const [opacity, setOpacity] = useState(1)
+
+  return [
+    opacity,
+    () => {
+      setOpacity(0)
+      onRequestClose()
+    }
+  ] as const
+}
+
+export default useRequestClose
--- a/src/screens/ImageViewer/utils.ts
+++ b/src/screens/ImageViewer/utils.ts
@ -0,0 +1,146 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {
+  Animated,
+  GestureResponderEvent,
+  PanResponder,
+  PanResponderGestureState,
+  PanResponderInstance,
+  NativeTouchEvent
+} from 'react-native'
+import { Dimensions, Position } from './@types'
+
+export const getImageTransform = (
+  image: Dimensions | null,
+  screen: Dimensions
+) => {
+  if (!image?.width || !image?.height) {
+    return [] as const
+  }
+
+  const wScale = screen.width / image.width
+  const hScale = screen.height / image.height
+  const scale = Math.min(wScale, hScale)
+  const { x, y } = getImageTranslate(image, screen)
+
+  return [{ x, y }, scale] as const
+}
+
+export const getImageStyles = (
+  image: Dimensions | null,
+  translate: Animated.ValueXY,
+  scale?: Animated.Value
+) => {
+  if (!image?.width || !image?.height) {
+    return { width: 0, height: 0 }
+  }
+
+  const transform = translate.getTranslateTransform()
+
+  if (scale) {
+    transform.push({ scale }, { perspective: new Animated.Value(1000) })
+  }
+
+  return {
+    width: image.width,
+    height: image.height,
+    transform
+  }
+}
+
+export const getImageTranslate = (
+  image: Dimensions,
+  screen: Dimensions
+): Position => {
+  const getTranslateForAxis = (axis: 'x' | 'y'): number => {
+    const imageSize = axis === 'x' ? image.width : image.height
+    const screenSize = axis === 'x' ? screen.width : screen.height
+
+    return (screenSize - imageSize) / 2
+  }
+
+  return {
+    x: getTranslateForAxis('x'),
+    y: getTranslateForAxis('y')
+  }
+}
+
+export const getImageDimensionsByTranslate = (
+  translate: Position,
+  screen: Dimensions
+): Dimensions => ({
+  width: screen.width - translate.x * 2,
+  height: screen.height - translate.y * 2
+})
+
+export const getImageTranslateForScale = (
+  currentTranslate: Position,
+  targetScale: number,
+  screen: Dimensions
+): Position => {
+  const { width, height } = getImageDimensionsByTranslate(
+    currentTranslate,
+    screen
+  )
+
+  const targetImageDimensions = {
+    width: width * targetScale,
+    height: height * targetScale
+  }
+
+  return getImageTranslate(targetImageDimensions, screen)
+}
+
+type HandlerType = (
+  event: GestureResponderEvent,
+  state: PanResponderGestureState
+) => void
+
+type PanResponderProps = {
+  onGrant: HandlerType
+  onStart?: HandlerType
+  onMove: HandlerType
+  onRelease?: HandlerType
+  onTerminate?: HandlerType
+}
+
+export const createPanResponder = ({
+  onGrant,
+  onStart,
+  onMove,
+  onRelease,
+  onTerminate
+}: PanResponderProps): PanResponderInstance =>
+  PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onStartShouldSetPanResponderCapture: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponderCapture: () => true,
+    onPanResponderGrant: onGrant,
+    onPanResponderStart: onStart,
+    onPanResponderMove: onMove,
+    onPanResponderRelease: onRelease,
+    onPanResponderTerminate: onTerminate,
+    onPanResponderTerminationRequest: () => false,
+    onShouldBlockNativeResponder: () => false
+  })
+
+export const getDistanceBetweenTouches = (
+  touches: NativeTouchEvent[]
+): number => {
+  const [a, b] = touches
+
+  if (a == null || b == null) {
+    return 0
+  }
+
+  return Math.sqrt(
+    Math.pow(a.pageX - b.pageX, 2) + Math.pow(a.pageY - b.pageY, 2)
+  )
+}
--- a/src/screens/ImagesViewer.tsx
+++ b/src/screens/ImagesViewer.tsx
@ -4,7 +4,6 @@ import { HeaderCenter, HeaderLeft, HeaderRight } from '@components/Header'
 import { useActionSheet } from '@expo/react-native-action-sheet'
 import CameraRoll from '@react-native-community/cameraroll'
 import { StackScreenProps } from '@react-navigation/stack'
-import ImageView from '@root/modules/react-native-image-viewing/src/index'
 import { findIndex } from 'lodash'
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@ -19,6 +18,38 @@ import {
  SafeAreaProvider,
  useSafeAreaInsets
 } from 'react-native-safe-area-context'
+import ImageViewer from './ImageViewer/Root'
+
+const saveImage = async (
+  image: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls'][0]
+) => {
+  const hasAndroidPermission = async () => {
+    const permission = PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
+
+    const hasPermission = await PermissionsAndroid.check(permission)
+    if (hasPermission) {
+      return true
+    }
+
+    const status = await PermissionsAndroid.request(permission)
+    return status === 'granted'
+  }
+
+  if (Platform.OS === 'android' && !(await hasAndroidPermission())) {
+    return
+  }
+  CameraRoll.save(image.url)
+    .then(() => haptics('Success'))
+    .catch(() => {
+      if (image.remote_url) {
+        CameraRoll.save(image.remote_url)
+          .then(() => haptics('Success'))
+          .catch(() => haptics('Error'))
+      } else {
+        haptics('Error')
+      }
+    })
+}

 const HeaderComponent = React.memo(
  ({
@ -28,43 +59,12 @@ const HeaderComponent = React.memo(
  }: {
    navigation: ScreenImagesViewerProp['navigation']
    currentIndex: number
-    imageUrls: {
-      url: string
-      width?: number | undefined
-      height?: number | undefined
-      preview_url: string
-      remote_url?: string | undefined
-    }[]
+    imageUrls: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls']
  }) => {
    const insets = useSafeAreaInsets()
    const { t } = useTranslation('screenImageViewer')
    const { showActionSheetWithOptions } = useActionSheet()

-    const hasAndroidPermission = async () => {
-      const permission = PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
-
-      const hasPermission = await PermissionsAndroid.check(permission)
-      if (hasPermission) {
-        return true
-      }
-
-      const status = await PermissionsAndroid.request(permission)
-      return status === 'granted'
-    }
-
-    const saveImage = async () => {
-      if (Platform.OS === 'android' && !(await hasAndroidPermission())) {
-        return
-      }
-      CameraRoll.save(
-        imageUrls[currentIndex].url ||
-          imageUrls[currentIndex].remote_url ||
-          imageUrls[currentIndex].preview_url
-      )
-        .then(() => haptics('Success'))
-        .catch(() => haptics('Error'))
-    }
-
    const onPress = useCallback(() => {
      analytics('imageviewer_more_press')
      showActionSheetWithOptions(
@ -80,7 +80,7 @@ const HeaderComponent = React.memo(
          switch (buttonIndex) {
            case 0:
              analytics('imageviewer_more_save_press')
-              saveImage()
+              saveImage(imageUrls[currentIndex])
              break
            case 1:
              analytics('imageviewer_more_share_press')
@ -147,11 +147,12 @@ const ScreenImagesViewer = ({
  return (
    <SafeAreaProvider>
      <StatusBar backgroundColor='rgb(0,0,0)' />
-      <ImageView
+      <ImageViewer
        images={imageUrls}
        imageIndex={initialIndex}
        onImageIndexChange={index => setCurrentIndex(index)}
        onRequestClose={() => navigation.goBack()}
+        onLongPress={saveImage}
        HeaderComponent={() => (
          <HeaderComponent
            navigation={navigation}
--- a/src/screens/Tabs.tsx
+++ b/src/screens/Tabs.tsx
@ -96,7 +96,7 @@ const ScreenTabs = React.memo(
    )
    const tabBarOptions = useMemo(
      () => ({
-        activeTintColor: theme.primary,
+        activeTintColor: theme.primaryDefault,
        inactiveTintColor: theme.secondary,
        showLabel: false,
        ...(Platform.OS === 'android' && { keyboardHidesTabBar: true })
--- a/src/screens/Tabs/Me/Fontsize.tsx
+++ b/src/screens/Tabs/Me/Fontsize.tsx
@ -90,7 +90,8 @@ const ScreenMeSettingsFontsize: React.FC<StackScreenProps<
                  initialSize === size
                    ? StyleConstants.Font.Weight.Bold
                    : undefined,
-                color: initialSize === size ? theme.primary : theme.secondary,
+                color:
+                  initialSize === size ? theme.primaryDefault : theme.secondary,
                borderWidth: StyleSheet.hairlineWidth,
                borderColor: theme.border
              }
@ -105,7 +106,7 @@ const ScreenMeSettingsFontsize: React.FC<StackScreenProps<

  return (
    <ScrollView scrollEnabled={false}>
-      <Text style={[styles.header, { color: theme.primary }]}>
+      <Text style={[styles.header, { color: theme.primaryDefault }]}>
        {t('content.showcase')}
      </Text>
      <View>
@ -119,7 +120,7 @@ const ScreenMeSettingsFontsize: React.FC<StackScreenProps<
          extraMarginRight={-StyleConstants.Spacing.Global.PagePadding}
        />
      </View>
-      <Text style={[styles.header, { color: theme.primary }]}>
+      <Text style={[styles.header, { color: theme.primaryDefault }]}>
        {t('content.availableSizes')}
      </Text>
      <View style={styles.sizesDemo}>{sizesDemo}</View>
--- a/src/screens/Tabs/Me/Push.tsx
+++ b/src/screens/Tabs/Me/Push.tsx
@ -94,7 +94,7 @@ const ScreenMeSettingsPush: React.FC = () => {
                setPushEnabled(result.granted)
                setPushCanAskAgain(result.canAskAgain)
              } else {
-                Linking.openURL('app-settings:')
+                Linking.openSettings()
              }
            }}
          />
--- a/src/screens/Tabs/Me/Settings/Dev.tsx
+++ b/src/screens/Tabs/Me/Settings/Dev.tsx
@ -22,7 +22,7 @@ const SettingsDev: React.FC = () => {
        style={{
          paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
          ...StyleConstants.FontStyle.S,
-          color: theme.primary
+          color: theme.primaryDefault
        }}
      >
        {instances[instanceActive]?.token}
--- a/src/screens/Tabs/Me/Switch/Root.tsx
+++ b/src/screens/Tabs/Me/Switch/Root.tsx
@ -56,7 +56,7 @@ const ScreenMeSwitchRoot: React.FC = () => {
  return (
    <ScrollView style={styles.base} keyboardShouldPersistTaps='always'>
      <View style={[styles.firstSection, { borderBottomColor: theme.border }]}>
-        <Text style={[styles.header, { color: theme.primary }]}>
+        <Text style={[styles.header, { color: theme.primaryDefault }]}>
          {t('content.existing')}
        </Text>
        <View style={styles.accountButtons}>
@ -87,7 +87,7 @@ const ScreenMeSwitchRoot: React.FC = () => {
      </View>

      <View style={styles.secondSection}>
-        <Text style={[styles.header, { color: theme.primary }]}>
+        <Text style={[styles.header, { color: theme.primaryDefault }]}>
          {t('content.new')}
        </Text>
        <ComponentInstance disableHeaderImage goBack />
--- a/src/screens/Tabs/Shared/Account/Attachments.tsx
+++ b/src/screens/Tabs/Shared/Account/Attachments.tsx
@ -70,7 +70,7 @@ const AccountAttachments = React.memo(
                <View
                  style={{
                    marginHorizontal: StyleConstants.Spacing.Global.PagePadding,
-                    backgroundColor: theme.backgroundOverlay,
+                    backgroundColor: theme.backgroundOverlayInvert,
                    width: width,
                    height: width,
                    justifyContent: 'center',
--- a/src/screens/Tabs/Shared/Account/Information/Fields.tsx
+++ b/src/screens/Tabs/Shared/Account/Information/Fields.tsx
@ -34,7 +34,7 @@ const AccountInformationFields = React.memo(
                <Icon
                  name='CheckCircle'
                  size={StyleConstants.Font.Size.M}
-                  color={theme.primary}
+                  color={theme.primaryDefault}
                  style={styles.fieldCheck}
                />
              ) : null}
--- a/src/screens/Tabs/Shared/Account/Information/Stats.tsx
+++ b/src/screens/Tabs/Shared/Account/Information/Stats.tsx
@ -24,7 +24,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
    <View style={[styles.stats, { flexDirection: 'row' }]}>
      {account ? (
        <Text
-          style={[styles.stat, { color: theme.primary }]}
+          style={[styles.stat, { color: theme.primaryDefault }]}
          children={t('content.summary.statuses_count', {
            count: account.statuses_count || 0
          })}
@ -46,7 +46,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
      )}
      {account ? (
        <Text
-          style={[styles.stat, { color: theme.primary, textAlign: 'right' }]}
+          style={[styles.stat, { color: theme.primaryDefault, textAlign: 'right' }]}
          children={t('content.summary.following_count', {
            count: account.following_count
          })}
@ -73,7 +73,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
      )}
      {account ? (
        <Text
-          style={[styles.stat, { color: theme.primary, textAlign: 'center' }]}
+          style={[styles.stat, { color: theme.primaryDefault, textAlign: 'center' }]}
          children={t('content.summary.followers_count', {
            count: account.followers_count
          })}
--- a/src/screens/Tabs/Shared/Account/Nav.tsx
+++ b/src/screens/Tabs/Shared/Account/Nav.tsx
@ -49,7 +49,7 @@ const AccountNav: React.FC<Props> = ({ scrollY, account }) => {
      style={[
        styles.base,
        styleOpacity,
-        { backgroundColor: theme.background, height: headerHeight }
+        { backgroundColor: theme.backgroundDefault, height: headerHeight }
      ]}
    >
      <View
--- a/src/screens/Tabs/Shared/Search.tsx
+++ b/src/screens/Tabs/Shared/Search.tsx
@ -73,7 +73,7 @@ const TabSharedSearch: React.FC<SharedSearchProp> = ({
                style={[
                  styles.emptyDefault,
                  styles.emptyFontSize,
-                  { color: theme.primary }
+                  { color: theme.primaryDefault }
                ]}
              >
                <Trans
@ -81,25 +81,25 @@ const TabSharedSearch: React.FC<SharedSearchProp> = ({
                  components={{ bold: <Text style={styles.emptyFontBold} /> }}
                />
              </Text>
-              <Text style={[styles.emptyAdvanced, { color: theme.primary }]}>
+              <Text style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}>
                {t('content.empty.advanced.header')}
              </Text>
-              <Text style={[styles.emptyAdvanced, { color: theme.primary }]}>
+              <Text style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}>
                <Text style={{ color: theme.secondary }}>@username@domain</Text>
                {'   '}
                {t('content.empty.advanced.example.account')}
              </Text>
-              <Text style={[styles.emptyAdvanced, { color: theme.primary }]}>
+              <Text style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}>
                <Text style={{ color: theme.secondary }}>#example</Text>
                {'   '}
                {t('content.empty.advanced.example.hashtag')}
              </Text>
-              <Text style={[styles.emptyAdvanced, { color: theme.primary }]}>
+              <Text style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}>
                <Text style={{ color: theme.secondary }}>URL</Text>
                {'   '}
                {t('content.empty.advanced.example.statusLink')}
              </Text>
-              <Text style={[styles.emptyAdvanced, { color: theme.primary }]}>
+              <Text style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}>
                <Text style={{ color: theme.secondary }}>URL</Text>
                {'   '}
                {t('content.empty.advanced.example.accountLink')}
@ -113,9 +113,9 @@ const TabSharedSearch: React.FC<SharedSearchProp> = ({
  const sectionHeader = useCallback(
    ({ section: { translation } }) => (
      <View
-        style={[styles.sectionHeader, { backgroundColor: theme.background }]}
+        style={[styles.sectionHeader, { backgroundColor: theme.backgroundDefault }]}
      >
-        <Text style={[styles.sectionHeaderText, { color: theme.primary }]}>
+        <Text style={[styles.sectionHeaderText, { color: theme.primaryDefault }]}>
          {translation}
        </Text>
      </View>
@ -126,7 +126,7 @@ const TabSharedSearch: React.FC<SharedSearchProp> = ({
    ({ section: { data, translation } }) =>
      !data.length ? (
        <View
-          style={[styles.sectionFooter, { backgroundColor: theme.background }]}
+          style={[styles.sectionFooter, { backgroundColor: theme.backgroundDefault }]}
        >
          <Text style={[styles.sectionFooterText, { color: theme.secondary }]}>
            <Trans
--- a/src/screens/Tabs/Shared/sharedScreens.tsx
+++ b/src/screens/Tabs/Shared/sharedScreens.tsx
@ -14,11 +14,11 @@ import { debounce } from 'lodash'
 import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Platform, StyleSheet, Text, TextInput, View } from 'react-native'
-import { NativeStackNavigationOptions } from 'react-native-screens/lib/typescript/native-stack'
+import { NativeStackNavigationOptions } from 'react-native-screens/lib/typescript'
 import {
  NativeStackNavigationEventMap,
  NativeStackNavigatorProps
-} from 'react-native-screens/lib/typescript/native-stack/types'
+} from 'react-native-screens/lib/typescript/types'

 export type BaseScreens =
  | Nav.TabLocalStackParamList
@ -103,7 +103,7 @@ const sharedScreens = (
                  <Text
                    style={{
                      ...StyleConstants.FontStyle.M,
-                      color: theme.primary,
+                      color: theme.primaryDefault,
                      fontWeight: StyleConstants.Font.Weight.Bold
                    }}
                  />
@ -153,7 +153,7 @@ const sharedScreens = (
                    style={[
                      styles.textInput,
                      {
-                        color: theme.primary
+                        color: theme.primaryDefault
                      }
                    ]}
                    children={t('sharedSearch:content.header.prefix')}
@ -166,7 +166,7 @@ const sharedScreens = (
                  styles.textInput,
                  {
                    flex: 1,
-                    color: theme.primary,
+                    color: theme.primaryDefault,
                    paddingLeft: StyleConstants.Spacing.XS
                  }
                ]}
--- a/src/utils/queryHooks/search.ts
+++ b/src/utils/queryHooks/search.ts
@ -11,7 +11,7 @@ export type QueryKey = [
  }
 ]

-type SearchResult = {
+export type SearchResult = {
  accounts: Mastodon.Account[]
  hashtags: Mastodon.Tag[]
  statuses: Mastodon.Status[]
@ -23,7 +23,12 @@ const queryFunction = ({ queryKey }: { queryKey: QueryKey }) => {
    version: 'v2',
    method: 'get',
    url: 'search',
-    params: { ...(type && { type }), ...(term && { q: term }), limit }
+    params: {
+      ...(type && { type }),
+      ...(term && { q: term }),
+      limit,
+      resolve: true
+    }
  }).then(res => res.body)
 }

--- a/src/utils/styles/themes.ts
+++ b/src/utils/styles/themes.ts
@ -1,16 +1,17 @@
 import { DefaultTheme, DarkTheme } from '@react-navigation/native'

 export type ColorDefinitions =
-  | 'primary'
+  | 'primaryDefault'
  | 'primaryOverlay'
  | 'secondary'
  | 'disabled'
  | 'blue'
  | 'red'
-  | 'background'
-  | 'backgroundGradientStart'
-  | 'backgroundGradientEnd'
-  | 'backgroundOverlay'
+  | 'green'
+  | 'yellow'
+  | 'backgroundDefault'
+  | 'backgroundOverlayDefault'
+  | 'backgroundOverlayInvert'
  | 'border'
  | 'shimmerDefault'
  | 'shimmerHighlight'
@ -21,7 +22,7 @@ const themeColors: {
    dark: string
  }
 } = {
-  primary: {
+  primaryDefault: {
    light: 'rgb(18, 18, 18)',
    dark: 'rgb(180, 180, 180)'
  },
@ -45,27 +46,33 @@ const themeColors: {
    light: 'rgb(225, 45, 35)',
    dark: 'rgb(225, 78, 79)'
  },
+  green: {
+    light: 'rgb(18, 158, 80)',
+    dark: 'rgb(18, 158, 80)'
+  },
+  yellow: {
+    light: 'rgb(230, 166, 30)',
+    dark: 'rgb(200, 145, 25)'
+  },

-  background: {
+  backgroundDefault: {
    light: 'rgb(250, 250, 250)',
    dark: 'rgb(18, 18, 18)'
  },
-  backgroundGradientStart: {
+  backgroundOverlayDefault: {
    light: 'rgba(250, 250, 250, 0.5)',
-    dark: 'rgba(18, 18, 18, 0.5)'
+    dark: 'rgba(0, 0, 0, 0.5)'
  },
-  backgroundGradientEnd: {
-    light: 'rgba(250, 250, 250, 1)',
-    dark: 'rgba(18, 18, 18, 1)'
-  },
-  backgroundOverlay: {
+  backgroundOverlayInvert: {
    light: 'rgba(25, 25, 25, 0.5)',
    dark: 'rgba(0, 0, 0, 0.5)'
  },
+
  border: {
    light: 'rgba(25, 25, 25, 0.3)',
    dark: 'rgba(255, 255, 255, 0.3)'
  },
+
  shimmerDefault: {
    light: 'rgba(25, 25, 25, 0.05)',
    dark: 'rgba(250, 250, 250, 0.05)'
@ -91,10 +98,10 @@ const themes = {
    ...DefaultTheme,
    colors: {
      ...DefaultTheme.colors,
-      primary: themeColors.primary.light,
-      background: themeColors.background.light,
-      card: themeColors.background.light,
-      text: themeColors.primary.light,
+      primary: themeColors.primaryDefault.light,
+      background: themeColors.backgroundDefault.light,
+      card: themeColors.backgroundDefault.light,
+      text: themeColors.primaryDefault.light,
      border: themeColors.border.light,
      notification: themeColors.red.light
    }
@ -103,10 +110,10 @@ const themes = {
    ...DarkTheme,
    colors: {
      ...DarkTheme.colors,
-      primary: themeColors.primary.dark,
-      background: themeColors.background.dark,
-      card: themeColors.background.dark,
-      text: themeColors.primary.dark,
+      primary: themeColors.primaryDefault.dark,
+      background: themeColors.backgroundDefault.dark,
+      card: themeColors.backgroundDefault.dark,
+      text: themeColors.primaryDefault.dark,
      border: themeColors.border.dark,
      notification: themeColors.red.dark
    }
				`@ -1 +0,0 @@`
				`Subproject commit bba2f756a9d45c79a5ebf7e5e3124eac49b0c9f7`