feat: enhance View component with SafeArea support and update generate function

- Integrated SafeAreaView and StatusBar into the View component for improved UI layout and safety on different devices.
- Updated the generate function to ensure reactNativeOptions defaults to an empty object, enhancing robustness in configuration handling.

All tests pass successfully.

Author: ndelangen

packages/react-native/scripts/generate.js

@@ -133,7 +133,7 @@ async function generate({
 
   let options = '';
   let optionsVar = '';
-  const reactNativeOptions = main.reactNative;
+  const reactNativeOptions = main.reactNative ?? {};
 
   if (liteMode) {
     reactNativeOptions.liteMode = true;

packages/react-native/src/View.tsx

@@ -11,6 +11,9 @@ import dedent from 'dedent';
 import { patchChannelForRN } from './patchChannelForRN';
 import deepmerge from 'deepmerge';
 import { useEffect, useMemo, useReducer, useState } from 'react';
+import { StatusBar } from 'react-native';
+import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
+
 import {
   ActivityIndicator,
   Linking,
@@ -245,7 +248,7 @@ export class View {
       hasStoryWrapper: storyViewWrapper = true,
     } = params;
 
-    const onDeviceUI = this._options.liteMode ? false : params.onDeviceUI ?? true;
+    const onDeviceUI = this._options.liteMode ? false : (params.onDeviceUI ?? true);
 
     const getFullUI = (enabled: boolean): SBUI => {
       if (enabled) {
@@ -493,7 +496,22 @@ export class View {
         );
       } else {
         return (
-          <StoryView useWrapper={storyViewWrapper} storyBackgroundColor={storyBackgroundColor} />
+          <SafeAreaProvider>
+            <SafeAreaView style={{ flex: 1 }}>
+              <StatusBar hidden />
+              <RNView
+                style={{ flex: 1 }}
+                accessibilityLabel={story?.id}
+                testID={story?.id}
+                accessible
+              >
+                <StoryView
+                  useWrapper={storyViewWrapper}
+                  storyBackgroundColor={storyBackgroundColor}
+                />
+              </RNView>
+            </SafeAreaView>
+          </SafeAreaProvider>
         );
       }
     };