fix: storyName for csf2 stories (#784)

Author: dannyhw

examples/expo-example/components/StoryName/StoryName.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react-native';
+import { Text } from 'react-native';
+
+const StoryName = ({ name }: { name: string }) => <Text>{name}</Text>;
+
+const meta = {
+  component: StoryName,
+} satisfies Meta<typeof StoryName>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const WithStoryName: Story = {
+  storyName: 'story name here',
+  args: {
+    name: 'story name here',
+  },
+};
+
+export const WithName: Story = {
+  storyName: 'name here',
+  args: {
+    name: 'name here',
+  },
+};
+
+export const WithNoName: Story = {
+  args: {
+    name: 'no name here',
+  },
+};
+
+export const CSF2Example = (args: { name: string }) => <StoryName {...args} />;
+CSF2Example.args = { name: 'csf2 with no name' };
+
+export const CSF2ExampleWithName = (args: { name: string }) => <StoryName {...args} />;
+CSF2ExampleWithName.storyName = 'csf2 with name';
+CSF2ExampleWithName.args = { name: 'csf2 with name' };

packages/react-native/src/Start.tsx

@@ -125,7 +125,13 @@ export function prepareStories({
             const nameFromExport = storyNameFromExport(key);
             const id = toId(title, nameFromExport);
 
-            const name = exportValue?.name || exportValue?.storyName || nameFromExport;
+            let name = nameFromExport;
+
+            if (typeof exportValue === 'function') {
+              name = exportValue?.storyName || nameFromExport;
+            } else {
+              name = exportValue?.name || exportValue?.storyName || nameFromExport;
+            }
 
             index.entries[id] = {
               type: 'story',