Handle missing react-native-safe-area-context in ScreenFooter screen (#3941)

* fix: handle missing react-native-safe-area-context in ScreenFooter demo screen

* fix: replace circular barrel import with direct Image import in ScreenFooter

Made-with: Cursor

Author: adids1221

demo/src/screens/componentScreens/ScreenFooterScreen.tsx

@@ -1,6 +1,5 @@
 import React, {useState} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {
   View,
   Text,
@@ -21,6 +20,11 @@ import {
   Icon
 } from 'react-native-ui-lib';
 
+let SafeAreaProvider: React.ComponentType<any> | undefined;
+try {
+  SafeAreaProvider = require('react-native-safe-area-context').SafeAreaProvider;
+} catch {}
+
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const basketIcon = require('../../assets/icons/collections.png');
 
@@ -93,7 +97,23 @@ const KEYBOARD_BEHAVIOR_OPTIONS_SPACED = [
   {label: '', value: 'dummy'}
 ];
 
-const ScreenFooterScreen = () => {
+const MissingDependencyScreen = () => {
+  return (
+    <View flex center padding-s5>
+      <Text text60 $textDangerLight center>
+        Missing Dependency
+      </Text>
+      <Text text70 center marginT-s3>
+        This screen requires react-native-safe-area-context to be installed.
+      </Text>
+      <Text text80 $textNeutral center marginT-s2>
+        Run: npm/yarn install react-native-safe-area-context
+      </Text>
+    </View>
+  );
+};
+
+const ScreenFooterContent = () => {
   const [itemsCount, setItemsCount] = useState(2);
   const [layout, setLayout] = useState<ScreenFooterLayouts>(ScreenFooterLayouts.HORIZONTAL);
   const [background, setBackground] = useState<ScreenFooterBackgrounds>(ScreenFooterBackgrounds.SOLID);
@@ -474,6 +494,14 @@ const ScreenFooterScreen = () => {
   );
 };
 
+const ScreenFooterScreen = () => {
+  if (!SafeAreaProvider) {
+    return <MissingDependencyScreen />;
+  }
+
+  return <ScreenFooterContent />;
+};
+
 const styles = StyleSheet.create({
   scrollContent: {
     padding: 20,

packages/react-native-ui-lib/src/components/screenFooter/index.tsx

@@ -1,10 +1,10 @@
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {LayoutChangeEvent, StyleSheet, ViewStyle} from 'react-native';
-import {Image} from 'react-native-ui-lib';
 import Animated, {useAnimatedKeyboard, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import {Keyboard} from 'uilib-native';
 import {SafeAreaContextPackage} from '../../optionalDependencies';
 import View from '../view';
+import Image from '../image';
 import Assets from '../../assets';
 import {Colors, Shadows, Spacings} from '../../style';
 import {asBaseComponent, Constants} from '../../commons/new';