Revert "TabController - support react-native-safe-area-context (#3928)" (#3933)

This reverts commit b4f5c67.

Author: M-i-k-e-l

demo/src/screens/componentScreens/TabControllerScreen/index.tsx

@@ -1,7 +1,6 @@
 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,
@@ -163,65 +162,63 @@ class TabControllerScreen extends Component<{}, State> {
   render() {
     const {key, initialIndex, asCarousel, centerSelected, fewItems, items} = this.state;
     return (
-      <SafeAreaProvider style={{flex: 1}}>
-        <View flex bg-$backgroundDefault>
-          <TabController
+      <View flex bg-$backgroundDefault>
+        <TabController
+          key={key}
+          ref={this.tabController}
+          asCarousel={asCarousel}
+          initialIndex={initialIndex}
+          onChangeIndex={this.onChangeIndex}
+          items={items}
+        >
+          <TabController.TabBar
+            // items={items}
             key={key}
-            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>
+            // 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>
-      </SafeAreaProvider>
+      </View>
     );
   }
 }

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 Modal, usages of Modal and TabController |
+| react-native-safe-area-context | support useSafeAreaInsets inside and usages of Modal |
 | react-native-haptic-feedback | Haptic feedback functionality |
 | react-native-svg | SVG-based components |
 | react-native-shimmer-placeholder | Shimmer loading effects |

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

@@ -2,7 +2,6 @@
 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';
@@ -53,11 +52,9 @@ export interface TabControllerProps {
   children?: React.ReactNode;
 }
 
-const useSafeAreaInsets = SafeAreaContextPackage?.useSafeAreaInsets ?? (() => Constants.getSafeAreaInsets());
-
-
-const getScreenWidth = (useSafeArea: boolean, left: number, right: number) => {
-  return Constants.windowWidth - (useSafeArea ? left + right : 0);
+const getScreenWidth = (useSafeArea: boolean) => {
+  const {left, right} = Constants.getSafeAreaInsets();
+  return Constants.windowWidth - (useSafeArea && Constants.isIphoneX ? left + right : 0);
 };
 
 /**
@@ -78,16 +75,15 @@ const TabController = React.forwardRef((props: PropsWithChildren<TabControllerPr
     useSafeArea = false,
     children
   } = themeProps;
-  const {left, right} = useSafeAreaInsets();
-  const [screenWidth, setScreenWidth] = useState<number>(getScreenWidth(useSafeArea, left, right));
+  const [screenWidth, setScreenWidth] = useState<number>(getScreenWidth(useSafeArea));
 
   if (items?.length < 2) {
     console.warn('TabController component expect a minimum of 2 items');
   }
 
   useOrientation({
     onOrientationChange: () => {
-      setScreenWidth(getScreenWidth(useSafeArea, left, right));
+      setScreenWidth(getScreenWidth(useSafeArea));
     }
   });