react-native-ui-lib 7.37.2-snapshot.6208 → 7.37.2-snapshot.6211

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.37.2-snapshot.6208",
+  "version": "7.37.2-snapshot.6211",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/src/components/tabController/TabBar.js

@@ -149,7 +149,7 @@ 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>
+        <View style={tabBarContainerStyle} accessibilityRole={Constants.isIOS ? 'tabbar' : 'tablist'}>{tabBarItems}</View>
         {itemsCount > 1 && <Reanimated.View style={[styles.selectedIndicator, indicatorStyle, _indicatorTransitionStyle]} />}
       </FadedScrollView>
     </View>;

package/src/components/tabController/TabBarItem.js

@@ -3,9 +3,9 @@ import _isEmpty from "lodash/isEmpty";
 import _isUndefined from "lodash/isUndefined";
 import _cloneDeep from "lodash/cloneDeep";
 // TODO: support commented props
-import React, { useCallback, useContext, useEffect, useRef, useMemo } from 'react';
+import React, { useCallback, useContext, useEffect, useRef, useMemo, useState } from 'react';
 import { StyleSheet } from 'react-native';
-import Reanimated, { runOnJS, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import Reanimated, { runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { Colors, Typography, Spacings } from "../../style";
 import Badge from "../badge";
@@ -52,6 +52,7 @@ export default function TabBarItem({
   // JSON.parse(JSON.stringify is due to an issue with reanimated
   const sharedLabelStyle = useSharedValue(JSON.parse(JSON.stringify(StyleSheet.flatten(labelStyle))));
   const sharedSelectedLabelStyle = useSharedValue(JSON.parse(JSON.stringify(StyleSheet.flatten(selectedLabelStyle))));
+  const [isSelected, setIsSelected] = useState(currentPage.value === index);
 
   // NOTE: We clone these color values in refs because they might contain a PlatformColor value
   //       which throws an error (see https://github.com/software-mansion/react-native-reanimated/issues/3164)
@@ -71,6 +72,11 @@ export default function TabBarItem({
       }, index);
     }
   }, []);
+  useAnimatedReaction(() => currentPage.value === index, (isSelected, prevIsSelected) => {
+    if (isSelected !== prevIsSelected) {
+      runOnJS(setIsSelected)(isSelected);
+    }
+  });
   const onLayout = useCallback(event => {
     const {
       width
@@ -120,6 +126,9 @@ export default function TabBarItem({
       flex
     }, style, constantWidthStyle, pressStyle];
   }, [style, spreadItems]);
+  const accessibilityState = useMemo(() => ({
+    selected: isSelected
+  }), [isSelected]);
   const gesture = Gesture.Tap().maxDuration(60000).onEnd(() => {
     if (!ignore) {
       setCurrentIndex(index);
@@ -133,7 +142,7 @@ 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={accessibilityState}>
         {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]}>