fix(react-native-storybook): add SafeAreaProvider and simplify SB imp…

…orts

packages/react-native-storybook/package.json

@@ -63,7 +63,8 @@
   },
   "peerDependencies": {
     "@storybook/react-native": ">=7.6.11",
-    "react-native": ">=0.64.0"
+    "react-native": ">=0.64.0",
+    "react-native-safe-area-context": "*"
   },
   "engines": {
     "node": ">=8.0.0"

packages/react-native-storybook/src/getStorybook/getStorybook.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState, ReactElement } from 'react';
 import { Keyboard, Platform, StyleSheet, Text, View } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { RunnerBridge, SherloModule } from '../helpers';
 import { getGlobalStates } from '../utils';
 import { Snapshot, StorybookParams, StorybookView } from '../types';
@@ -159,23 +160,25 @@ function getStorybook(view: StorybookView, params?: StorybookParams): () => Reac
     }
 
     return (
-      <SherloContext.Provider
-        value={{
-          renderedSnapshot: snapshots?.find(({ storyId }) => storyId === renderedStoryId),
-          mode,
-        }}
-      >
-        <View style={StyleSheet.absoluteFillObject}>
-          <ErrorBoundary
-            onError={() => {
-              renderedStoryHasError.current = true;
-            }}
-            log={RunnerBridge.log}
-          >
-            {memoizedStorybook}
-          </ErrorBoundary>
-        </View>
-      </SherloContext.Provider>
+      <SafeAreaProvider>
+        <SherloContext.Provider
+          value={{
+            renderedSnapshot: snapshots?.find(({ storyId }) => storyId === renderedStoryId),
+            mode,
+          }}
+        >
+          <View style={StyleSheet.absoluteFillObject}>
+            <ErrorBoundary
+              onError={() => {
+                renderedStoryHasError.current = true;
+              }}
+              log={RunnerBridge.log}
+            >
+              {memoizedStorybook}
+            </ErrorBoundary>
+          </View>
+        </SherloContext.Provider>
+      </SafeAreaProvider>
     );
   };
 

packages/react-native-storybook/src/getStorybook/hooks/useStoryEmitter.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { getAddons, getSetCurrentStory } from '../utils/storybookImports';
+import { getAddons } from '../utils/storybookImports';
 
 function useStoryEmitter(updateRenderedStoryId: (storyId: string) => void): (id: string) => void {
   useEffect(() => {
@@ -10,17 +10,18 @@ function useStoryEmitter(updateRenderedStoryId: (storyId: string) => void): (id:
 
     const initialize = async (): Promise<void> => {
       const _channel = await getAddons().ready();
-      _channel.on(getSetCurrentStory(), handleStoryRendered);
+      _channel.on('setCurrentStory', handleStoryRendered);
     };
 
     setTimeout(() => initialize(), 500);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return async (storyId: string) => {
     const _channel = await getAddons().ready();
-    _channel.emit(getSetCurrentStory(), { storyId });
+    _channel.emit('setCurrentStory', { storyId });
     // if we don't call it twice going back from preview to original mode doesn't work
-    _channel.emit(getSetCurrentStory(), { storyId });
+    _channel.emit('setCurrentStory', { storyId });
   };
 }
 

packages/react-native-storybook/src/getStorybook/utils/storybookImports.ts

@@ -1,29 +1,15 @@
-// storybookAdapter.js
-let addonsV7: any, SET_CURRENT_STORY_V7: any, addonsV8: any, SET_CURRENT_STORY_V8: any;
+let addonsV7: any, addonsV8: any;
 
 try {
   addonsV7 = require('@storybook/manager-api').addons;
 } catch (error) {
   // Ignore if module is not found
 }
 
-try {
-  SET_CURRENT_STORY_V7 = require('@storybook/core-events').SET_CURRENT_STORY;
-} catch (error) {
-  // Ignore if module is not found
-}
-
 try {
   addonsV8 = require('@storybook/core/manager-api').addons;
 } catch (error) {
   // Ignore if module is not found
 }
 
-try {
-  SET_CURRENT_STORY_V8 = require('@storybook/core/core-events').SET_CURRENT_STORY;
-} catch (error) {
-  // Ignore if module is not found
-}
-
 export const getAddons = (): any => addonsV8 ?? addonsV7;
-export const getSetCurrentStory = (): any => SET_CURRENT_STORY_V8 ?? SET_CURRENT_STORY_V7;

testing/expo-storybook-8/src/components/Test/Test.stories.tsx

@@ -8,3 +8,5 @@ export default {
 } as Meta<typeof Test>;
 
 export const Basic = {};
+
+export const Secondary = { args: { variant: 'secondary' } };

testing/expo-storybook-8/src/components/Test/Test.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Text, View, StyleSheet } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
+import * as Updates from 'expo-updates';
 import * as Localization from 'expo-localization';
 import { useColorScheme } from 'react-native';
 
-const Test = () => {
+const Test = ({ variant = 'primary' }: { variant: 'primary' | 'secondary' }) => {
   const theme = useColorScheme(); // 'light' or 'dark'
   const backgroundColor = theme === 'dark' ? '#333' : '#FFF';
   const textColor = theme === 'dark' ? '#FFF' : '#333';
@@ -15,14 +16,21 @@ const Test = () => {
 
   return (
     <View style={[styles.container, { backgroundColor }]}>
+      {variant === 'secondary' && (
+        <View style={styles.infoContainer}>
+          <Text style={[styles.text, { color: textColor }]}>SECONDARY VARIANT</Text>
+        </View>
+      )}
       <View style={styles.infoContainer}>
         <MaterialIcons name="record-voice-over" size={24} color={textColor} />
         <Text style={[styles.text, { color: textColor }]}>Language: {language}</Text>
       </View>
+
       <View style={styles.infoContainer}>
         <MaterialIcons name="place" size={24} color={textColor} />
         <Text style={[styles.text, { color: textColor }]}>Country: {country}</Text>
       </View>
+
       <View style={styles.infoContainer}>
         <MaterialIcons name="brightness-4" size={24} color={textColor} />
         <Text style={[styles.text, { color: textColor }]}>Theme: {theme || 'undefined'}</Text>