responsive logo

template/src/components/Logo.tsx

@@ -1,27 +1,17 @@
 import React from 'react';
 import {SolitoImage} from 'solito/image';
-import {Platform, useColorScheme} from 'react-native';
 import {useLink} from 'solito/link';
-import {Button, useMedia} from 'tamagui';
+import {Button, useMedia, useThemeName} from 'tamagui';
 import {tokens} from '@tamagui/theme-base';
 
-const logoMediaQuery = (size: keyof typeof tokens.size) => {
-  const dimensions = {
-    width: tokens.size[size].val,
-    height: tokens.size[size].val,
-  };
-
-  // might be fixed by: https://github.com/nandorojo/solito/pull/268
-  return Platform.OS === 'web'
-    ? dimensions
-    : {
-        style: dimensions,
-      };
-};
+const logoMediaQuery = (size: keyof typeof tokens.size) => ({
+  width: tokens.size[size].val,
+  height: tokens.size[size].val,
+});
 
 export const Logo = () => {
+  const theme = useThemeName();
   const media = useMedia();
-  const colorScheme = useColorScheme() || 'light';
   const linkProps = useLink({
     href: '/',
   });
@@ -34,9 +24,11 @@ export const Logo = () => {
       icon={
         <SolitoImage
           priority
-          src={`/images/logo_${colorScheme}.png`}
+          src={`/images/logo_${theme}.png`}
           alt="logo"
           resizeMode="contain"
+          sizes="(max-width: 600px) 400px,
+                 800px"
           {...logoMediaQuery(8)}
           {...(media.gtSm && {
             ...logoMediaQuery(9),