From f4f59ac9f46bd274658804b888bbc42af42926e5 Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Tue, 3 Feb 2026 15:28:48 +0200
Subject: [PATCH 1/2] TabController - support react-native-safe-area-context

---
 .../TabControllerScreen/index.tsx             | 113 +++++++++---------
 docs/getting-started/setup.md                 |   2 +-
 .../src/components/tabController/index.tsx    |  12 +-
 3 files changed, 67 insertions(+), 60 deletions(-)

diff --git a/demo/src/screens/componentScreens/TabControllerScreen/index.tsx b/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
index b302337202..b9d73dd31c 100644
--- a/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
+++ b/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {ActivityIndicator, StyleSheet} from 'react-native';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {
   Assets,
   TabController,
@@ -162,63 +163,65 @@ class TabControllerScreen extends Component<{}, State> {
   render() {
     const {key, initialIndex, asCarousel, centerSelected, fewItems, items} = this.state;
     return (
-      <View flex bg-$backgroundDefault>
-        <TabController
-          key={key}
-          ref={this.tabController}
-          asCarousel={asCarousel}
-          initialIndex={initialIndex}
-          onChangeIndex={this.onChangeIndex}
-          items={items}
-        >
-          <TabController.TabBar
-            // items={items}
+      <SafeAreaProvider style={{flex: 1}}>
+        <View flex bg-$backgroundDefault>
+          <TabController
             key={key}
-            // uppercase
-            // indicatorStyle={{backgroundColor: 'green', height: 3}}
-            // indicatorInsets={0}
-            spreadItems={!fewItems}
-            backgroundColor={fewItems ? 'transparent' : undefined}
-            // labelColor={'green'}
-            // selectedLabelColor={'red'}
-            labelStyle={styles.labelStyle}
-            selectedLabelStyle={styles.selectedLabelStyle}
-            // iconColor={'green'}
-            // selectedIconColor={'blue'}
-            enableShadow
-            activeBackgroundColor={Colors.$backgroundPrimaryMedium}
-            centerSelected={centerSelected}
-          />
-          {this.renderTabPages()}
-        </TabController>
-        <View absB left margin-20 marginB-100 style={{zIndex: 1}}>
-          <Button
-            bg-green10={!fewItems}
-            bg-green30={fewItems}
-            label={fewItems ? 'Show Many Items' : 'Show Few Items'}
-            marginB-12
-            size={Button.sizes.small}
-            onPress={this.toggleItemsCount}
-          />
-          <Button
-            bg-grey20={!asCarousel}
-            bg-green30={asCarousel}
-            label={`Carousel : ${asCarousel ? 'ON' : 'OFF'}`}
-            marginB-12
-            size={Button.sizes.small}
-            onPress={this.toggleCarouselMode}
-          />
-          <Button
-            bg-grey20={!centerSelected}
-            bg-green30={centerSelected}
-            label={`centerSelected : ${centerSelected ? 'ON' : 'OFF'}`}
-            size={Button.sizes.small}
-            marginB-12
-            onPress={this.toggleCenterSelected}
-          />
-          <Button label="setTab (Imperative)" bg-green10 onPress={this.setTab} size={Button.sizes.small}/>
+            ref={this.tabController}
+            asCarousel={asCarousel}
+            initialIndex={initialIndex}
+            onChangeIndex={this.onChangeIndex}
+            items={items}
+          >
+            <TabController.TabBar
+              // items={items}
+              key={key}
+              // uppercase
+              // indicatorStyle={{backgroundColor: 'green', height: 3}}
+              // indicatorInsets={0}
+              spreadItems={!fewItems}
+              backgroundColor={fewItems ? 'transparent' : undefined}
+              // labelColor={'green'}
+              // selectedLabelColor={'red'}
+              labelStyle={styles.labelStyle}
+              selectedLabelStyle={styles.selectedLabelStyle}
+              // iconColor={'green'}
+              // selectedIconColor={'blue'}
+              enableShadow
+              activeBackgroundColor={Colors.$backgroundPrimaryMedium}
+              centerSelected={centerSelected}
+            />
+            {this.renderTabPages()}
+          </TabController>
+          <View absB left margin-20 marginB-100 style={{zIndex: 1}}>
+            <Button
+              bg-green10={!fewItems}
+              bg-green30={fewItems}
+              label={fewItems ? 'Show Many Items' : 'Show Few Items'}
+              marginB-12
+              size={Button.sizes.small}
+              onPress={this.toggleItemsCount}
+            />
+            <Button
+              bg-grey20={!asCarousel}
+              bg-green30={asCarousel}
+              label={`Carousel : ${asCarousel ? 'ON' : 'OFF'}`}
+              marginB-12
+              size={Button.sizes.small}
+              onPress={this.toggleCarouselMode}
+            />
+            <Button
+              bg-grey20={!centerSelected}
+              bg-green30={centerSelected}
+              label={`centerSelected : ${centerSelected ? 'ON' : 'OFF'}`}
+              size={Button.sizes.small}
+              marginB-12
+              onPress={this.toggleCenterSelected}
+            />
+            <Button label="setTab (Imperative)" bg-green10 onPress={this.setTab} size={Button.sizes.small}/>
+          </View>
         </View>
-      </View>
+      </SafeAreaProvider>
     );
   }
 }
diff --git a/docs/getting-started/setup.md b/docs/getting-started/setup.md
index ba839655b5..540fd638eb 100644
--- a/docs/getting-started/setup.md
+++ b/docs/getting-started/setup.md
@@ -42,7 +42,7 @@ UILib supports additional features through optional dependencies. These packages
 | @react-native-community/blur | Card component's blur effects |
 | @react-native-community/datetimepicker | Date/time picker components |
 | @react-native-community/netinfo | Network connectivity features |
-| react-native-safe-area-context | support useSafeAreaInsets inside and usages of Modal |
+| react-native-safe-area-context | support useSafeAreaInsets inside Modal, usages of Modal and TabController |
 | react-native-haptic-feedback | Haptic feedback functionality |
 | react-native-svg | SVG-based components |
 | react-native-shimmer-placeholder | Shimmer loading effects |
diff --git a/packages/react-native-ui-lib/src/components/tabController/index.tsx b/packages/react-native-ui-lib/src/components/tabController/index.tsx
index acd2b06ffb..25242be4a5 100644
--- a/packages/react-native-ui-lib/src/components/tabController/index.tsx
+++ b/packages/react-native-ui-lib/src/components/tabController/index.tsx
@@ -2,6 +2,7 @@
 import _ from 'lodash';
 import React, {PropsWithChildren, useMemo, useEffect, useState, useCallback} from 'react';
 import {useAnimatedReaction, useSharedValue, withTiming, runOnJS} from 'react-native-reanimated';
+import {SafeAreaContextPackage} from '../../optionalDependencies';
 import {useOrientation, useThemeProps} from '../../hooks';
 import {Constants} from '../../commons/new';
 import TabBarContext from './TabBarContext';
@@ -52,8 +53,10 @@ export interface TabControllerProps {
   children?: React.ReactNode;
 }
 
-const getScreenWidth = (useSafeArea: boolean) => {
-  const {left, right} = Constants.getSafeAreaInsets();
+const useSafeAreaInsets = SafeAreaContextPackage?.useSafeAreaInsets ?? (() => Constants.getSafeAreaInsets());
+
+
+const getScreenWidth = (useSafeArea: boolean, left: number, right: number) => {
   return Constants.windowWidth - (useSafeArea && Constants.isIphoneX ? left + right : 0);
 };
 
@@ -75,7 +78,8 @@ const TabController = React.forwardRef((props: PropsWithChildren<TabControllerPr
     useSafeArea = false,
     children
   } = themeProps;
-  const [screenWidth, setScreenWidth] = useState<number>(getScreenWidth(useSafeArea));
+  const {left, right} = useSafeAreaInsets();
+  const [screenWidth, setScreenWidth] = useState<number>(getScreenWidth(useSafeArea, left, right));
 
   if (items?.length < 2) {
     console.warn('TabController component expect a minimum of 2 items');
@@ -83,7 +87,7 @@ const TabController = React.forwardRef((props: PropsWithChildren<TabControllerPr
 
   useOrientation({
     onOrientationChange: () => {
-      setScreenWidth(getScreenWidth(useSafeArea));
+      setScreenWidth(getScreenWidth(useSafeArea, left, right));
     }
   });
 

From 13db114b620be0f55083d3247517cf7bd0501628 Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Wed, 4 Feb 2026 10:36:37 +0200
Subject: [PATCH 2/2] SafeAre - support Android

---
 .../react-native-ui-lib/src/components/tabController/index.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-native-ui-lib/src/components/tabController/index.tsx b/packages/react-native-ui-lib/src/components/tabController/index.tsx
index 25242be4a5..0197f3900e 100644
--- a/packages/react-native-ui-lib/src/components/tabController/index.tsx
+++ b/packages/react-native-ui-lib/src/components/tabController/index.tsx
@@ -57,7 +57,7 @@ const useSafeAreaInsets = SafeAreaContextPackage?.useSafeAreaInsets ?? (() => Co
 
 
 const getScreenWidth = (useSafeArea: boolean, left: number, right: number) => {
-  return Constants.windowWidth - (useSafeArea && Constants.isIphoneX ? left + right : 0);
+  return Constants.windowWidth - (useSafeArea ? left + right : 0);
 };
 
 /**