react-native-ui-lib 7.42.0-snapshot.7014 → 7.42.0-snapshot.7019

package/package.json

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

package/src/components/tabController/TabPage.js

@@ -1,5 +1,5 @@
-import React, { useCallback, useContext, useState, useMemo } from 'react';
-import { StyleSheet } from 'react-native';
+import React, { useCallback, useContext, useState, useMemo, useRef, useEffect } from 'react';
+import { StyleSheet, findNodeHandle, AccessibilityInfo } from 'react-native';
 import Reanimated, { useAnimatedStyle, useAnimatedReaction, runOnJS } from 'react-native-reanimated';
 // import {Freeze} from 'react-freeze';
 import TabBarContext from "./TabBarContext";
@@ -23,6 +23,8 @@ export default function TabPage({
     containerWidth
   } = useContext(TabBarContext);
   const [shouldLoad, setLoaded] = useState(!lazy);
+  const [isActive, setIsActive] = useState(false);
+  const pageRef = useRef(null);
   // const [focused, setFocused] = useState(false);
 
   const lazyLoad = useCallback(() => {
@@ -35,13 +37,11 @@ export default function TabPage({
   useAnimatedReaction(() => {
     return currentPage.value;
   }, (currentPage /* , previousPage */) => {
-    const isActive = currentPage === index;
-    // const wasActive = previousPage === index;
-    // const nearActive = asCarousel && (currentPage - 1 === index || currentPage + 1 === index);
-    // const wasNearActive =
-    //     asCarousel && previousPage !== null && (previousPage - 1 === index || previousPage + 1 === index);
-
-    if (isActive) {
+    const newIsActive = currentPage === index;
+    if (newIsActive !== isActive) {
+      runOnJS(setIsActive)(newIsActive);
+    }
+    if (newIsActive) {
       runOnJS(lazyLoad)();
     }
 
@@ -50,7 +50,23 @@ export default function TabPage({
     // } else if (wasActive || wasNearActive) {
     //   runOnJS(setFocused)(false);
     // }
-  }, [currentPage, lazyLoad]);
+  }, [currentPage, lazyLoad, isActive]);
+  useEffect(() => {
+    let timeoutId;
+    if (isActive && pageRef.current && shouldLoad) {
+      timeoutId = setTimeout(() => {
+        const node = findNodeHandle(pageRef.current);
+        if (node) {
+          AccessibilityInfo.setAccessibilityFocus(node);
+        }
+      }, 100);
+    }
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [isActive, shouldLoad]);
   const animatedPageStyle = useAnimatedStyle(() => {
     const isActive = Math.round(currentPage.value) === index;
 
@@ -69,7 +85,7 @@ export default function TabPage({
       width: asCarousel ? containerWidth : undefined
     }, style];
   }, [asCarousel, animatedPageStyle, containerWidth, style]);
-  return <Reanimated.View style={_style} testID={testID}>
+  return <Reanimated.View ref={pageRef} style={_style} testID={testID} accessible={false}>
       {!shouldLoad && renderLoading?.()}
       {shouldLoad && props.children}
       {/* <Freeze freeze={!shouldLoad || !focused}>{props.children}</Freeze> */}