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

* TabController - support react-native-safe-area-context

* SafeAre - support Android

Author: M-i-k-e-l

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>
     );
   }
 }

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 |

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,9 +53,11 @@ export interface TabControllerProps {
   children?: React.ReactNode;
 }
 
-const getScreenWidth = (useSafeArea: boolean) => {
-  const {left, right} = Constants.getSafeAreaInsets();
-  return Constants.windowWidth - (useSafeArea && Constants.isIphoneX ? left + right : 0);
+const useSafeAreaInsets = SafeAreaContextPackage?.useSafeAreaInsets ?? (() => Constants.getSafeAreaInsets());
+
+
+const getScreenWidth = (useSafeArea: boolean, left: number, right: number) => {
+  return Constants.windowWidth - (useSafeArea ? left + right : 0);
 };
 
 /**
@@ -75,15 +78,16 @@ 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');
   }
 
   useOrientation({
     onOrientationChange: () => {
-      setScreenWidth(getScreenWidth(useSafeArea));
+      setScreenWidth(getScreenWidth(useSafeArea, left, right));
     }
   });