fix: no ui error

storybookjs · Sep 14, 2024 · 79ac223 · 79ac223
1 parent 1c01c27
commit 79ac223
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/packages/react-native/src/components/StoryView/ErrorBoundary.tsx b/packages/react-native/src/components/StoryView/ErrorBoundary.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Text, View } from 'react-native';
+import { View, Text } from 'react-native';
 
 export class ErrorBoundary extends React.Component<
   { children: ReactNode | ReactNode[]; onError: (error: Error, stack: string) => void },

diff --git a/packages/react-native/src/components/StoryView/StoryView.tsx b/packages/react-native/src/components/StoryView/StoryView.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-
-import { useTheme } from '@storybook/react-native-theming';
-import { Keyboard, Text, View } from 'react-native';
+import { styled, useTheme } from '@storybook/react-native-theming';
+import { Keyboard, View } from 'react-native';
 import { useStoryContext } from '../../hooks';
 import { ErrorBoundary } from './ErrorBoundary';
 
@@ -22,19 +21,23 @@ function dismissOnStartResponder() {
   return false;
 }
 
+const Text = styled.Text(({ theme }) => ({
+  color: theme?.color?.defaultText,
+}));
+
 const StoryView = () => {
   const context = useStoryContext();
 
   const id = context?.id;
 
-  const { backgroundColor } = useTheme();
+  const theme = useTheme();
 
   if (context && context.unboundStoryFn) {
     const { unboundStoryFn: StoryComponent } = context;
 
     return (
       <View
-        style={{ flex: 1, backgroundColor }}
+        style={{ flex: 1, backgroundColor: theme.background?.content }}
         key={id}
         testID={id}
         onStartShouldSetResponder={dismissOnStartResponder}