react-native-ui-lib 7.36.0-snapshot.6096 → 7.36.0-snapshot.6098

package/src/components/hint/index.js

@@ -1,133 +1,324 @@
-import React, { isValidElement, useMemo, useCallback, useRef, useEffect } from 'react';
-import { Animated, StyleSheet, TouchableWithoutFeedback } from 'react-native';
+import _isUndefined from "lodash/isUndefined";
+import _isEqual from "lodash/isEqual";
+import _isString from "lodash/isString";
+import React, { Component, isValidElement } from 'react';
+import { Animated, StyleSheet, AccessibilityInfo, findNodeHandle, TouchableWithoutFeedback } from 'react-native';
 import { Typography, Spacings, Colors, BorderRadiuses, Shadows } from "../../style";
 import { Constants, asBaseComponent } from "../../commons/new";
 import View from "../view";
+import Text from "../text";
 import Image from "../image";
 import Modal from "../modal";
 import TouchableOpacity from "../touchableOpacity";
-import { HintPositions, HintProps, TargetAlignments } from "./types";
-import useHintVisibility from "./hooks/useHintVisibility";
-import useHintLayout from "./hooks/useHintLayout";
-import useHintAccessibility from "./hooks/useHintAccessibility";
-import useHintPosition from "./hooks/useHintPosition";
-import HintMockChildren from "./HintMockChildren";
-import HintAnchor from "./HintAnchor";
-import HintBubble from "./HintBubble";
 const sideTip = require("./assets/hintTipSide.png");
 const middleTip = require("./assets/hintTipMiddle.png");
 const DEFAULT_COLOR = Colors.$backgroundPrimaryHeavy;
 const DEFAULT_HINT_OFFSET = Spacings.s4;
 const DEFAULT_EDGE_MARGINS = Spacings.s5;
-const HINT_MIN_WIDTH = 68;
-const Hint = props => {
-  const {
-    visible,
-    useModal,
-    position,
-    children,
-    message,
-    containerWidth = Constants.windowWidth,
-    offset = DEFAULT_HINT_OFFSET,
-    edgeMargins = DEFAULT_EDGE_MARGINS,
-    targetFrame,
-    useSideTip,
-    onPress,
-    onBackgroundPress,
-    backdropColor,
-    color = DEFAULT_COLOR,
-    icon,
-    iconStyle,
-    messageStyle,
-    removePaddings,
-    enableShadow,
-    borderRadius,
-    customContent,
-    testID
-  } = props;
-  const hintRef = useRef(null);
-  const isUsingModal = Boolean(onBackgroundPress && useModal);
-  const {
-    hintUnmounted,
-    visibilityProgress
-  } = useHintVisibility(visible);
-  const {
-    targetLayoutState,
-    targetLayoutInWindowState,
-    hintMessageWidth,
-    targetRef,
-    onTargetLayout,
-    setHintLayout
-  } = useHintLayout({
-    onBackgroundPress,
-    targetFrame
-  });
-  const {
-    focusAccessibilityOnHint,
-    accessibilityInfo
-  } = useHintAccessibility(message);
-  useEffect(() => {
-    if (targetRef.current && hintRef.current) {
-      focusAccessibilityOnHint(targetRef.current, hintRef.current);
-    }
-  }, []);
-  const targetLayout = useMemo(() => {
-    return isUsingModal ? targetLayoutInWindowState : targetLayoutState;
-  }, [isUsingModal, targetLayoutState, targetLayoutInWindowState]);
-  const setTargetRef = useCallback(ref => {
-    targetRef.current = ref;
-    if (hintRef.current) {
-      focusAccessibilityOnHint(targetRef.current, hintRef.current);
-    }
-  }, []);
-  const showHint = !!targetLayout;
-  const {
-    targetAlignmentOnScreen,
-    hintContainerLayout,
-    tipPositionStyle,
-    hintPadding,
-    hintPositionStyle,
-    targetScreenToRelativeOffset
-  } = useHintPosition({
-    isUsingModal,
-    useSideTip,
-    position,
-    offset,
-    targetLayoutState,
-    targetLayoutInWindowState,
-    containerWidth,
-    edgeMargins,
-    hintMessageWidth
-  });
-  const hintAnimatedStyle = useMemo(() => {
+var TARGET_POSITIONS = /*#__PURE__*/function (TARGET_POSITIONS) {
+  TARGET_POSITIONS["LEFT"] = "left";
+  TARGET_POSITIONS["RIGHT"] = "right";
+  TARGET_POSITIONS["CENTER"] = "center";
+  return TARGET_POSITIONS;
+}(TARGET_POSITIONS || {});
+var HintPositions = /*#__PURE__*/function (HintPositions) {
+  HintPositions["TOP"] = "top";
+  HintPositions["BOTTOM"] = "bottom";
+  return HintPositions;
+}(HintPositions || {}); // TODO: unify with FeatureHighlightFrame
+/**
+ * @description: Hint component for displaying a tooltip over wrapped component
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/HintsScreen.tsx
+ * @notes: You can either wrap a component or pass a specific targetFrame
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Hint/Hint.gif?raw=true
+ */
+class Hint extends Component {
+  static displayName = 'Hint';
+  static defaultProps = {
+    position: HintPositions.BOTTOM,
+    useModal: true
+  };
+  static positions = HintPositions;
+  targetRef = null;
+  hintRef = React.createRef();
+  animationDuration = 170;
+  state = {
+    targetLayoutInWindow: undefined,
+    targetLayout: this.props.targetFrame,
+    hintUnmounted: !this.props.visible
+  };
+  visibleAnimated = new Animated.Value(Number(!!this.props.visible));
+  componentDidMount() {
+    this.focusAccessibilityOnHint();
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.visible !== this.props.visible) {
+      this.animateHint();
+    }
+  }
+  animateHint = () => {
+    Animated.timing(this.visibleAnimated, {
+      toValue: Number(!!this.props.visible),
+      duration: this.animationDuration,
+      useNativeDriver: true
+    }).start(this.toggleAnimationEndedToRemoveHint);
+  };
+  toggleAnimationEndedToRemoveHint = () => {
+    this.setState({
+      hintUnmounted: !this.props.visible
+    });
+  };
+  focusAccessibilityOnHint = () => {
+    const {
+      message
+    } = this.props;
+    const targetRefTag = findNodeHandle(this.targetRef);
+    const hintRefTag = findNodeHandle(this.hintRef.current);
+    if (targetRefTag && _isString(message)) {
+      AccessibilityInfo.setAccessibilityFocus(targetRefTag);
+    } else if (hintRefTag) {
+      AccessibilityInfo.setAccessibilityFocus(hintRefTag);
+    }
+  };
+  setTargetRef = ref => {
+    this.targetRef = ref;
+    this.focusAccessibilityOnHint();
+  };
+  onTargetLayout = ({
+    nativeEvent: {
+      layout
+    }
+  }) => {
+    if (!_isEqual(this.state.targetLayout, layout)) {
+      this.setState({
+        targetLayout: layout
+      });
+    }
+    if (!this.state.targetLayoutInWindow || this.props.onBackgroundPress) {
+      setTimeout(() => {
+        this.targetRef?.measureInWindow?.((x, y, width, height) => {
+          const targetLayoutInWindow = {
+            x,
+            y,
+            width,
+            height
+          };
+          this.setState({
+            targetLayoutInWindow
+          });
+        });
+      });
+    }
+  };
+  getAccessibilityInfo() {
+    const {
+      visible,
+      message
+    } = this.props;
+    if (visible && _isString(message)) {
+      return {
+        accessible: true,
+        accessibilityLabel: `hint: ${message}`
+      };
+    }
+  }
+  get containerWidth() {
+    const {
+      containerWidth = Constants.windowWidth
+    } = this.props;
+    return containerWidth;
+  }
+  get targetLayout() {
+    const {
+      onBackgroundPress,
+      useModal,
+      targetFrame
+    } = this.props;
+    const {
+      targetLayout,
+      targetLayoutInWindow
+    } = this.state;
+    if (targetFrame) {
+      return targetFrame;
+    }
+    return onBackgroundPress && useModal ? targetLayoutInWindow : targetLayout;
+  }
+  get showHint() {
+    return !!this.targetLayout;
+  }
+  get tipSize() {
+    return this.useSideTip ? {
+      width: 14,
+      height: 7
+    } : {
+      width: 20,
+      height: 7
+    };
+  }
+  get hintOffset() {
+    const {
+      offset = DEFAULT_HINT_OFFSET
+    } = this.props;
+    return offset;
+  }
+  get edgeMargins() {
+    const {
+      edgeMargins = DEFAULT_EDGE_MARGINS
+    } = this.props;
+    return edgeMargins;
+  }
+  get useSideTip() {
+    const {
+      useSideTip
+    } = this.props;
+    if (!_isUndefined(useSideTip)) {
+      return useSideTip;
+    }
+    return this.getTargetPositionOnScreen() !== TARGET_POSITIONS.CENTER;
+  }
+  getTargetPositionOnScreen() {
+    if (this.targetLayout?.x !== undefined && this.targetLayout?.width) {
+      const targetMidPosition = this.targetLayout.x + this.targetLayout.width / 2;
+      if (targetMidPosition > this.containerWidth * (2 / 3)) {
+        return TARGET_POSITIONS.RIGHT;
+      } else if (targetMidPosition < this.containerWidth * (1 / 3)) {
+        return TARGET_POSITIONS.LEFT;
+      }
+    }
+    return TARGET_POSITIONS.CENTER;
+  }
+  getContainerPosition() {
+    if (this.targetLayout) {
+      return {
+        top: this.targetLayout.y,
+        left: this.targetLayout.x
+      };
+    }
+  }
+  getHintPosition() {
+    const {
+      position
+    } = this.props;
+    const hintPositionStyle = {
+      alignItems: 'center'
+    };
+    if (this.targetLayout?.x !== undefined) {
+      hintPositionStyle.left = -this.targetLayout.x;
+    }
+    if (position === HintPositions.TOP) {
+      hintPositionStyle.bottom = 0;
+    } else if (this.targetLayout?.height) {
+      hintPositionStyle.top = this.targetLayout.height;
+    }
+    const targetPositionOnScreen = this.getTargetPositionOnScreen();
+    if (targetPositionOnScreen === TARGET_POSITIONS.RIGHT) {
+      hintPositionStyle.alignItems = Constants.isRTL ? 'flex-start' : 'flex-end';
+    } else if (targetPositionOnScreen === TARGET_POSITIONS.LEFT) {
+      hintPositionStyle.alignItems = Constants.isRTL ? 'flex-end' : 'flex-start';
+    }
+    return hintPositionStyle;
+  }
+  getHintPadding() {
+    const paddings = {
+      paddingVertical: this.hintOffset,
+      paddingHorizontal: this.edgeMargins
+    };
+    if (this.useSideTip && this.targetLayout?.x !== undefined) {
+      const targetPositionOnScreen = this.getTargetPositionOnScreen();
+      if (targetPositionOnScreen === TARGET_POSITIONS.LEFT) {
+        paddings.paddingLeft = this.targetLayout.x;
+      } else if (targetPositionOnScreen === TARGET_POSITIONS.RIGHT && this.targetLayout?.width) {
+        paddings.paddingRight = this.containerWidth - this.targetLayout.x - this.targetLayout.width;
+      }
+    }
+    return paddings;
+  }
+  getHintAnimatedStyle = () => {
+    const {
+      position
+    } = this.props;
     const translateY = position === HintPositions.TOP ? -10 : 10;
     return {
-      opacity: visibilityProgress,
+      opacity: this.visibleAnimated,
       transform: [{
-        translateY: visibilityProgress.interpolate({
+        translateY: this.visibleAnimated.interpolate({
           inputRange: [0, 1],
           outputRange: [translateY, 0]
         })
       }]
     };
-  }, [position, visibilityProgress]);
-  const renderOverlay = () => {
-    if (targetLayoutInWindowState && targetScreenToRelativeOffset?.top !== undefined && targetScreenToRelativeOffset?.left !== undefined) {
+  };
+  getTipPosition() {
+    const {
+      position
+    } = this.props;
+    const tipPositionStyle = {};
+    if (position === HintPositions.TOP) {
+      tipPositionStyle.bottom = this.hintOffset - this.tipSize.height;
+      !this.useSideTip ? tipPositionStyle.bottom += 1 : undefined;
+    } else {
+      tipPositionStyle.top = this.hintOffset - this.tipSize.height;
+    }
+    const layoutWidth = this.targetLayout?.width || 0;
+    if (this.targetLayout?.x !== undefined) {
+      const targetMidWidth = layoutWidth / 2;
+      const tipMidWidth = this.tipSize.width / 2;
+      const leftPosition = this.useSideTip ? this.targetLayout.x : this.targetLayout.x + targetMidWidth - tipMidWidth;
+      const rightPosition = this.useSideTip ? this.containerWidth - this.targetLayout.x - layoutWidth : this.containerWidth - this.targetLayout.x - targetMidWidth - tipMidWidth;
+      const targetPositionOnScreen = this.getTargetPositionOnScreen();
+      switch (targetPositionOnScreen) {
+        case TARGET_POSITIONS.LEFT:
+          tipPositionStyle.left = Constants.isRTL ? rightPosition : leftPosition;
+          break;
+        case TARGET_POSITIONS.RIGHT:
+          tipPositionStyle.right = Constants.isRTL ? leftPosition : rightPosition;
+          break;
+        case TARGET_POSITIONS.CENTER:
+        default:
+          tipPositionStyle.left = this.targetLayout.x + targetMidWidth - tipMidWidth;
+          break;
+      }
+    }
+    return tipPositionStyle;
+  }
+  isUsingModal = () => {
+    const {
+      onBackgroundPress,
+      useModal
+    } = this.props;
+    return onBackgroundPress && useModal;
+  };
+  renderOverlay() {
+    const {
+      targetLayoutInWindow
+    } = this.state;
+    const {
+      onBackgroundPress,
+      backdropColor,
+      testID
+    } = this.props;
+    if (targetLayoutInWindow) {
+      const containerPosition = this.getContainerPosition();
       return <Animated.View style={[styles.overlay, {
-        ...targetScreenToRelativeOffset,
+        top: containerPosition.top - targetLayoutInWindow.y,
+        left: containerPosition.left - targetLayoutInWindow.x,
         backgroundColor: backdropColor,
-        opacity: visibilityProgress
+        opacity: this.visibleAnimated
       }]} pointerEvents="box-none" testID={`${testID}.overlay`}>
           {onBackgroundPress && <TouchableWithoutFeedback style={StyleSheet.absoluteFillObject} onPress={onBackgroundPress}>
               <View flex />
             </TouchableWithoutFeedback>}
         </Animated.View>;
     }
-  };
-  const renderHintTip = () => {
-    const source = useSideTip ? sideTip : middleTip;
+  }
+  renderHintTip() {
+    const {
+      position,
+      color = DEFAULT_COLOR
+    } = this.props;
+    const source = this.useSideTip ? sideTip : middleTip;
     const flipVertically = position === HintPositions.TOP;
-    const flipHorizontally = targetAlignmentOnScreen === TargetAlignments.RIGHT;
+    const flipHorizontally = this.getTargetPositionOnScreen() === TARGET_POSITIONS.RIGHT;
     const flipStyle = {
       transform: [{
         scaleY: flipVertically ? -1 : 1
@@ -135,49 +326,121 @@ const Hint = props => {
         scaleX: flipHorizontally ? -1 : 1
       }]
     };
-    return <Image tintColor={color} source={source} style={[styles.hintTip, tipPositionStyle, flipStyle]} />;
-  };
-  const renderHint = () => {
-    return <HintBubble visible={visible} message={message} messageStyle={messageStyle} color={color} removePaddings={removePaddings} enableShadow={enableShadow} borderRadius={borderRadius} icon={icon} iconStyle={iconStyle} customContent={customContent} testID={testID} hintRef={hintRef} setHintLayout={setHintLayout} hintPositionStyle={hintPositionStyle} />;
-  };
-  const renderHintAnchor = () => {
+    return <Image tintColor={color} source={source} style={[styles.hintTip, this.getTipPosition(), flipStyle]} />;
+  }
+  renderContent() {
+    const {
+      message,
+      messageStyle,
+      icon,
+      iconStyle,
+      borderRadius,
+      color = DEFAULT_COLOR,
+      customContent,
+      removePaddings,
+      enableShadow,
+      visible,
+      testID
+    } = this.props;
+    return <View testID={`${testID}.message`} row centerV style={[styles.hint, !removePaddings && styles.hintPaddings, visible && enableShadow && styles.containerShadow, {
+      backgroundColor: color
+    }, !_isUndefined(borderRadius) && {
+      borderRadius
+    }]} ref={this.hintRef}>
+        {customContent}
+        {!customContent && icon && <Image source={icon} style={[styles.icon, iconStyle]} />}
+        {!customContent && <Text recorderTag={'unmask'} style={[styles.hintMessage, messageStyle]} testID={`${testID}.message.text`}>
+            {message}
+          </Text>}
+      </View>;
+  }
+  renderHint() {
+    const {
+      onPress,
+      testID
+    } = this.props;
     const opacity = onPress ? 0.9 : 1.0;
-    return <HintAnchor {...props} showHint={showHint} containerWidth={containerWidth} hintContainerLayout={hintContainerLayout} hintPadding={hintPadding} hintAnimatedStyle={hintAnimatedStyle} isUsingModal={isUsingModal} targetLayout={targetLayout}>
-        <TouchableOpacity activeOpacity={opacity} onPress={onPress}>
-          {renderHint()}
-        </TouchableOpacity>
-        {renderHintTip()}
-      </HintAnchor>;
-  };
-  const renderMockChildren = () => {
-    return <HintMockChildren children={children} backdropColor={backdropColor} targetLayout={targetLayout} />;
-  };
-  const renderChildren = () => {
-    if (!targetFrame && isValidElement(children)) {
-      return React.cloneElement(children, {
+    if (this.showHint) {
+      return <View animated style={[{
+        width: this.containerWidth
+      }, styles.animatedContainer, this.getHintPosition(), this.getHintPadding(), this.getHintAnimatedStyle()]} pointerEvents="box-none" testID={testID}>
+          <TouchableOpacity activeOpacity={opacity} onPress={onPress}>
+            {this.renderContent()}
+          </TouchableOpacity>
+          {this.renderHintTip()}
+        </View>;
+    }
+  }
+  renderHintContainer() {
+    const {
+      style,
+      ...others
+    } = this.props;
+    return <View {...others}
+    // this view must be collapsable, don't pass testID or backgroundColor etc'.
+    collapsable testID={undefined} style={[styles.container, style, this.getContainerPosition(), !this.isUsingModal() && styles.overlayContainer]}>
+        {this.renderHint()}
+      </View>;
+  }
+  renderMockChildren() {
+    const {
+      children,
+      backdropColor
+    } = this.props;
+    const isBackdropColorPassed = backdropColor !== undefined;
+    if (children && React.isValidElement(children)) {
+      const layout = {
+        ...this.getContainerPosition(),
+        width: this.targetLayout?.width,
+        height: this.targetLayout?.height,
+        right: Constants.isRTL ? this.targetLayout?.x : undefined,
+        left: Constants.isRTL ? undefined : this.targetLayout?.x
+      };
+      return <View style={[styles.mockChildrenContainer, layout, !isBackdropColorPassed && styles.hidden]}>
+          {React.cloneElement(children, {
+          collapsable: false,
+          key: 'mock',
+          style: [children.props.style, styles.mockChildren]
+        })}
+        </View>;
+    }
+  }
+  renderChildren() {
+    const {
+      targetFrame
+    } = this.props;
+    if (!targetFrame && isValidElement(this.props.children)) {
+      return React.cloneElement(this.props.children, {
         key: 'clone',
         collapsable: false,
-        onLayout: onTargetLayout,
-        ref: setTargetRef,
-        ...accessibilityInfo
+        onLayout: this.onTargetLayout,
+        ref: this.setTargetRef,
+        ...this.getAccessibilityInfo()
       });
     }
-  };
-  if (!visible && hintUnmounted) {
-    return children || null;
-  }
-  return <>
-      {renderChildren()}
-      {isUsingModal ? <Modal visible={showHint} animationType={backdropColor ? 'fade' : 'none'} overlayBackgroundColor={backdropColor} transparent onBackgroundPress={onBackgroundPress} onRequestClose={onBackgroundPress} testID={`${testID}.modal`}>
-          {renderMockChildren()}
-          {renderHintAnchor()}
-        </Modal> : <>
-          {renderOverlay()}
-          {renderMockChildren()}
-          {renderHintAnchor()}
-        </>}
-    </>;
-};
+  }
+  render() {
+    const {
+      onBackgroundPress,
+      backdropColor,
+      testID
+    } = this.props;
+    if (!this.props.visible && this.state.hintUnmounted) {
+      return this.props.children || null;
+    }
+    return <>
+        {this.renderChildren()}
+        {this.isUsingModal() ? <Modal visible={this.showHint} animationType={backdropColor ? 'fade' : 'none'} overlayBackgroundColor={backdropColor} transparent onBackgroundPress={onBackgroundPress} onRequestClose={onBackgroundPress} testID={`${testID}.modal`}>
+            {this.renderMockChildren()}
+            {this.renderHintContainer()}
+          </Modal> : <>
+            {this.renderOverlay()}
+            {this.renderMockChildren()}
+            {this.renderHintContainer()}
+          </>}
+      </>;
+  }
+}
 const styles = StyleSheet.create({
   container: {
     position: 'absolute'
@@ -217,7 +480,6 @@ const styles = StyleSheet.create({
     position: 'absolute'
   },
   hint: {
-    minWidth: HINT_MIN_WIDTH,
     maxWidth: Math.min(Constants.windowWidth - 2 * Spacings.s4, 400),
     borderRadius: BorderRadiuses.br60,
     backgroundColor: DEFAULT_COLOR
@@ -240,13 +502,4 @@ const styles = StyleSheet.create({
     tintColor: Colors.white
   }
 });
-Hint.displayName = 'Hint';
-Hint.defaultProps = {
-  position: HintPositions.BOTTOM,
-  useModal: true
-};
-Hint.positions = HintPositions;
-export { HintProps, Hint };
-
-// @ts-expect-error
 export default asBaseComponent(Hint);

package/src/components/tabController/TabBar.js

@@ -149,7 +149,8 @@ const TabBar = props => {
   }, [labelColor, selectedLabelColor]);
   return <View style={_containerStyle} key={key} bg-$backgroundElevated>
       <FadedScrollView ref={tabBar} horizontal showsHorizontalScrollIndicator={false} showStartFader startFaderProps={faderProps} showEndFader endFaderProps={faderProps} contentContainerStyle={scrollViewContainerStyle} testID={testID} onContentSizeChange={onContentSizeChange} onLayout={onLayout}>
-        <View style={tabBarContainerStyle}>{tabBarItems}</View>
+        {/* TODO: Might need to change role to tablist, when upgrading rn77. It didn't work now (rn73) */}
+        <View style={tabBarContainerStyle} accessibilityRole="tabbar">{tabBarItems}</View>
         {itemsCount > 1 && <Reanimated.View style={[styles.selectedIndicator, indicatorStyle, _indicatorTransitionStyle]} />}
       </FadedScrollView>
     </View>;

package/src/components/tabController/TabBarContext.d.ts

@@ -13,6 +13,7 @@ interface TabControllerContext {
     /** transition page index (can be a fraction when transitioning between pages) */
     targetPage: Reanimated.SharedValue<number>;
     setCurrentIndex: (index: number) => void;
+    selectedIndex: number;
 }
 declare const TabBarContext: React.Context<TabControllerContext>;
 export default TabBarContext;

package/src/components/tabController/TabBarItem.js

@@ -44,7 +44,8 @@ export default function TabBarItem({
 }) {
   const {
     currentPage,
-    setCurrentIndex
+    setCurrentIndex,
+    selectedIndex
   } = useContext(TabBarContext);
   const itemRef = useRef();
   const itemWidth = useRef(props.width);
@@ -133,7 +134,9 @@ export default function TabBarItem({
   return <GestureDetector gesture={gesture}>
       <View reanimated
     // @ts-expect-error
-    ref={itemRef} style={_style} onLayout={onLayout} testID={testID}>
+    ref={itemRef} style={_style} onLayout={onLayout} testID={testID} accessible accessibilityRole="tab" accessibilityState={{
+      selected: selectedIndex === index
+    }}>
         {leadingAccessory}
         {icon && <Reanimated.Image source={icon} style={[!_isUndefined(label) && styles.tabItemIconWithLabel, animatedIconStyle]} />}
         {!_isEmpty(label) && <Reanimated.Text {...labelProps} fsTagName={'unmask'} style={[styles.tabItemLabel, labelStyle, animatedLabelStyle, animatedLabelColorStyle]}>

package/src/components/tabController/index.js

@@ -38,6 +38,7 @@ const TabController = React.forwardRef((props, ref) => {
     children
   } = themeProps;
   const [screenWidth, setScreenWidth] = useState(getScreenWidth(useSafeArea));
+  const [selectedIndex, setSelectedIndex] = useState(initialIndex);
   if (items?.length < 2) {
     console.warn('TabController component expect a minimum of 2 items');
   }
@@ -61,6 +62,7 @@ const TabController = React.forwardRef((props, ref) => {
     'worklet';
 
     currentPage.value = index;
+    runOnJS(setSelectedIndex)(index);
   }, []);
   useEffect(() => {
     setCurrentIndex(initialIndex);
@@ -88,12 +90,13 @@ const TabController = React.forwardRef((props, ref) => {
       /* Animated Values */
       targetPage,
       currentPage,
+      selectedIndex,
       containerWidth: screenWidth,
       /* Callbacks */
       onChangeIndex,
       setCurrentIndex
     };
-  }, [initialIndex, asCarousel, items, onChangeIndex, screenWidth, nestedInScrollView]);
+  }, [initialIndex, asCarousel, items, onChangeIndex, screenWidth, nestedInScrollView, selectedIndex]);
   return <TabBarContext.Provider value={context}>{children}</TabBarContext.Provider>;
 });