Skip to content

Commit

Permalink
fix: logo not rendering on mobile and limit to just image source prop
Browse files Browse the repository at this point in the history
  • Loading branch information
dannyhw committed Nov 19, 2024
1 parent 8923659 commit 673b34b
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 74 deletions.
9 changes: 9 additions & 0 deletions examples/expo-example/.storybook/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,15 @@ const StorybookUIRoot = view.getStorybookUI({
// initialSelection: { kind: 'TextInput', name: 'Basic' },
// onDeviceUI: false,
// host: '192.168.1.69',
// theme: {
// brand: {
// image: {
// uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png',
// // width: 25,
// // height: 25,
// },
// },
// },
});

export default StorybookUIRoot;
13 changes: 7 additions & 6 deletions packages/react-native-theming/src/web-theme.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { ImageSourcePropType, TextStyle } from 'react-native';
import type { ImageProps, ImageSourcePropType, TextStyle } from 'react-native';
import { transparentize } from 'polished';

export const color = {
Expand Down Expand Up @@ -172,12 +172,13 @@ export type Typography = typeof typography;
export type TextSize = number | string;
export interface Brand {
// Will replace the storybook logo with this title
title: string | undefined;
title?: string | undefined;
// This url we be opened when clicking the branded logo or title
url: string | null | undefined;
// Either define a url or an image source to replace storybook logo with
image: string | ImageSourcePropType | null | undefined;
target: string | null | undefined;
url?: string | null | undefined;
// Define a an image source to replace storybook logo with
image?: ImageSourcePropType | null | undefined;
resizeMode?: ImageProps['resizeMode'] | null | undefined;
target?: string | null | undefined;
}

export interface StorybookThemeWeb {
Expand Down
9 changes: 2 additions & 7 deletions packages/react-native-ui/src/Layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@ import { MobileMenuDrawer, MobileMenuDrawerRef } from './MobileMenuDrawer';
import { Sidebar } from './Sidebar';
import { DEFAULT_REF_ID } from './constants';
import { BottomBarToggleIcon } from './icon/BottomBarToggleIcon';
import { DarkLogo } from './icon/DarkLogo';
import { Logo } from './icon/Logo';

import { MenuIcon } from './icon/MenuIcon';
import { StorybookLogo } from './StorybookLogo';

Expand Down Expand Up @@ -154,11 +153,7 @@ export const Layout = ({

<MobileMenuDrawer ref={mobileMenuDrawerRef}>
<View style={{ paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }}>
{theme.base === 'light' ? (
<Logo height={25} width={125} />
) : (
<DarkLogo height={25} width={125} />
)}
<StorybookLogo theme={theme} />
</View>
<Sidebar
extra={[]}
Expand Down
98 changes: 43 additions & 55 deletions packages/react-native-ui/src/StorybookLogo.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { StoryObj, Meta } from '@storybook/react';
import { StorybookLogo } from './StorybookLogo';
import { useTheme } from '@storybook/react-native-theming';
import { Theme, theme } from '@storybook/react-native-theming';

const meta = {
component: StorybookLogo,
Expand All @@ -15,67 +15,55 @@ export default meta;
type Story = StoryObj<typeof meta>;

export const TitleLogo: Story = {
decorators: [
(Story) => {
const theme = useTheme();
return <Story args={{ theme: { ...theme, brand: { title: 'React Native' } } }} />;
},
],
args: {
theme: {
...theme,
brand: { title: 'React Native' },
} satisfies Theme,
},
};

export const ImageLogo: Story = {
decorators: [
(Story) => {
const theme = useTheme();
return (
<Story
args={{
theme: { ...theme, brand: { image: 'https://reactnative.dev/img/oss_logo.svg' } },
}}
/>
);
},
],
args: {
theme: {
...theme,
brand: {
image: {
uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png',
height: 25,
width: 25,
},
},
} satisfies Theme,
},
};

export const ImageUrlLogo: Story = {
decorators: [
(Story) => {
const theme = useTheme();
return (
<Story
args={{
theme: {
...theme,
brand: {
image: 'https://reactnative.dev/img/oss_logo.svg',
url: 'https://reactnative.dev',
},
},
}}
/>
);
},
],
args: {
theme: {
...theme,
brand: {
image: {
uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png',
width: 25,
height: 25,
},
title: 'React Native',
url: 'https://reactnative.dev',
},
} satisfies Theme,
},
};

export const ImageSourceLogo: Story = {
decorators: [
(Story) => {
const theme = useTheme();
return (
<Story
args={{
theme: {
...theme,
brand: {
imageSource: require('./assets/react-native-logo.png'),
url: 'https://reactnative.dev',
},
},
}}
/>
);
},
],
args: {
theme: {
...theme,
brand: {
image: require('./assets/react-native-logo.png'),
resizeMode: 'contain',
url: 'https://reactnative.dev',
},
} satisfies Theme,
},
};
24 changes: 18 additions & 6 deletions packages/react-native-ui/src/StorybookLogo.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Theme } from '@storybook/react-native-theming';
import { FC, useMemo } from 'react';
import { FC, useEffect, useMemo } from 'react';
import { Image, Linking, StyleProp, Text, TextStyle, TouchableOpacity } from 'react-native';
import { DarkLogo } from './icon/DarkLogo';
import { Logo } from './icon/Logo';
Expand All @@ -15,13 +15,25 @@ const NoBrandLogo: FC<{ theme: Theme }> = ({ theme }) =>
);

const BrandLogo: FC<{ theme: Theme & { brand: NonNullable<Theme['brand']> } }> = ({ theme }) => {
const imageHasNoWidthOrHeight =
theme.brand.image &&
typeof theme.brand.image === 'object' &&
'uri' in theme.brand.image &&
(!('height' in theme.brand.image) || !('width' in theme.brand.image));

useEffect(() => {
if (imageHasNoWidthOrHeight) {
console.warn(
"STORYBOOK: When using a remote image as the brand logo, you must also set the width and height.\nFor example: brand: { image: { uri: 'https://sb.com/img.png', height: 25, width: 25}}"
);
}
}, [imageHasNoWidthOrHeight]);

const image = (
<Image
source={
typeof theme.brand.image === 'string' ? { uri: theme.brand.image } : theme.brand.image
}
resizeMode="contain"
style={{ height: HEIGHT, width: WIDTH }}
source={theme.brand.image}
resizeMode={theme.brand.resizeMode ?? 'contain'}
style={imageHasNoWidthOrHeight ? { width: WIDTH, height: HEIGHT } : undefined}
/>
);

Expand Down

0 comments on commit 673b34b

Please sign in to comment.