react-native-collapsible-tabs-reanimated 0.1.0-beta

package/src/Tab.tsx

@@ -0,0 +1,89 @@
+import { ReactNode, createContext, memo, useContext, useState } from 'react';
+
+import { StyleProp, ViewStyle } from 'react-native';
+
+import { SharedValue, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
+
+import { useCollapsibleTabsContext } from './Context';
+import { Lazy, type LazyProps } from './Lazy';
+
+export type TabProps = {
+  index: number;
+  loader?: ReactNode;
+  children?: ReactNode | ((info: { isFocused: boolean; pageDecimal: SharedValue<number> }) => ReactNode);
+  disableLazyEntering?: boolean;
+  disablePreload?: boolean;
+  lazy?: boolean;
+  isLoading?: boolean;
+  isScreenFocused?: boolean;
+  loaderStyle?: StyleProp<ViewStyle>;
+  lazyProps?: Omit<LazyProps, 'children' | 'disableEntering' | 'focused' | 'placeholder' | 'placeholderStyle'>;
+};
+
+const Tab = ({
+  index,
+  loader,
+  loaderStyle,
+  lazyProps,
+  disableLazyEntering = true,
+  disablePreload = false,
+  lazy = true,
+  children,
+  isLoading = false,
+  isScreenFocused = true,
+}: TabProps) => {
+  const { activeTabIndexValue, pageDecimal } = useCollapsibleTabsContext();
+  const [shouldPreload, setShouldPreload] = useState(false);
+  const [canMount, setCanMount] = useState(lazy === false);
+
+  const preloadLatched = useSharedValue(disablePreload);
+  const mountLatched = useSharedValue(lazy === false);
+
+  useAnimatedReaction(
+    () => pageDecimal.value,
+    (value) => {
+      if (!preloadLatched.value && Math.round(value) === index) {
+        preloadLatched.value = true;
+        scheduleOnRN(setShouldPreload, true);
+      }
+      if (!mountLatched.value && Math.abs(value - index) <= 1.5 && isScreenFocused) {
+        mountLatched.value = true;
+        scheduleOnRN(setCanMount, true);
+      }
+    },
+    [index, isScreenFocused]
+  );
+
+  const isFocused = index === activeTabIndexValue && isScreenFocused;
+  const isMounted = lazy ? (isFocused || shouldPreload) && !isLoading : true;
+
+  const renderChildren = () => {
+    if (lazy) {
+      if (!canMount) return null;
+      return (
+        <Lazy {...lazyProps} focused={isMounted && !isLoading} disableEntering={disableLazyEntering} placeholder={loader} placeholderStyle={loaderStyle}>
+          {typeof children === 'function' ? children({ isFocused, pageDecimal }) : children}
+        </Lazy>
+      );
+    }
+
+    return typeof children === 'function' ? children({ isFocused, pageDecimal }) : children;
+  };
+
+  return <TabSelfContextProvider index={index} isFocused={isFocused} isMounted={isMounted}>{renderChildren()}</TabSelfContextProvider>;
+};
+
+export type TabSelfContextValue = { index: number; isFocused: boolean; isMounted: boolean };
+
+const TabSelfContext = createContext({} as TabSelfContextValue);
+
+const TabSelfContextProvider = memo(({ children, ...props }: TabSelfContextValue & { children: ReactNode }) => {
+  return <TabSelfContext.Provider value={props}>{children}</TabSelfContext.Provider>;
+});
+
+export const useTabSelfContext = () => useContext(TabSelfContext);
+
+Tab.displayName = 'CollapsibleTabs.Tab';
+
+export default memo(Tab);

package/src/flash-list.ts

@@ -0,0 +1,2 @@
+export { default as CollapsibleFlashList } from './FlashList';
+export type { CollapsibleFlashListProps } from './FlashList';

package/src/index.ts

@@ -0,0 +1,54 @@
+import Bar from './Bar';
+import Button from './Button';
+import Header from './Header';
+import { MaterialIndicator, SegmentIndicator } from './Indicator';
+import { Lazy } from './Lazy';
+import List from './List';
+import Pager from './Pager';
+import Root from './Root';
+import ScrollView from './ScrollView';
+import StaticHeader from './StaticHeader';
+import StickyHeader from './StickyHeader';
+import Tab from './Tab';
+
+export { default as Bar } from './Bar';
+export { default as Button } from './Button';
+export { useCollapsibleTabsContext } from './Context';
+export { default as Header } from './Header';
+export { MaterialIndicator, SegmentIndicator } from './Indicator';
+export { Lazy } from './Lazy';
+export { default as List } from './List';
+export { default as Pager } from './Pager';
+export { default as Root } from './Root';
+export { default as ScrollView } from './ScrollView';
+export { default as StaticHeader } from './StaticHeader';
+export { default as StickyHeader } from './StickyHeader';
+export { default as Tab, useTabSelfContext } from './Tab';
+
+export type { BarProps } from './Bar';
+export type { ButtonProps, RenderTabLabelProps } from './Button';
+export type { CollapsibleTabsContextValue, ItemLayout, ListScroller } from './Context';
+export type { LazyPlaceholderInfo, LazyProps } from './Lazy';
+export type { ListProps } from './List';
+export type { PagerProps } from './Pager';
+export type { CollapsibleTabsRootRef, RootProps } from './Root';
+export type { ScrollViewProps } from './ScrollView';
+export type { TabProps, TabSelfContextValue } from './Tab';
+
+const CollapsibleTabs = {
+  Root,
+  Header,
+  StickyHeader,
+  StaticHeader,
+  Pager,
+  Tab,
+  List,
+  ScrollView,
+  Bar,
+  Button,
+  MaterialIndicator,
+  SegmentIndicator,
+  Lazy,
+} as const;
+
+export default CollapsibleTabs;

package/src/legend-list.ts

@@ -0,0 +1,2 @@
+export { default as CollapsibleLegendList } from "./LegendList";
+export type { CollapsibleLegendListProps } from "./LegendList";

package/src/useStableCallback.ts

@@ -0,0 +1,11 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+export function useStableCallback<T extends (...args: any[]) => any>(callback?: T) {
+  const callbackRef = useRef(callback);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  return useCallback((...args: Parameters<T>) => callbackRef.current?.(...args), []);
+}