one/dist/esm/ui/TabSlot.mjs

One is a new React Framework that makes Vite serve both native and web.

import { useState } from "react";
import { Platform, StyleSheet } from "react-native-web";
import { Screen, ScreenContainer } from "react-native-screens";
import { useNavigatorContext } from "../views/Navigator.mjs";
import { TabContext } from "./TabContext.mjs";
import { jsx } from "react/jsx-runtime";
function useTabSlot({
  detachInactiveScreens = ["android", "ios", "web"].includes(Platform.OS),
  style,
  renderFn = defaultTabsSlotRender
} = {}) {
  const {
    state,
    descriptorsRef
  } = useNavigatorContext();
  const descriptors = descriptorsRef.current;
  const focusedRouteKey = state.routes[state.index].key;
  const [loaded, setLoaded] = useState({
    [focusedRouteKey]: true
  });
  if (!loaded[focusedRouteKey]) {
    setLoaded({
      ...loaded,
      [focusedRouteKey]: true
    });
  }
  return /* @__PURE__ */jsx(ScreenContainer, {
    enabled: detachInactiveScreens,
    hasTwoStates: true,
    style: [styles.screenContainer, style],
    children: state.routes.map((route, index) => {
      const descriptor = descriptors[route.key];
      return /* @__PURE__ */jsx(TabContext.Provider, {
        value: descriptor.options,
        children: renderFn(descriptor, {
          index,
          isFocused: state.index === index,
          loaded: loaded[route.key],
          detachInactiveScreens
        })
      }, descriptor.route.key);
    })
  });
}
function TabSlot(props) {
  return useTabSlot(props);
}
function defaultTabsSlotRender(descriptor, {
  isFocused,
  loaded,
  detachInactiveScreens
}) {
  const {
    lazy = true,
    unmountOnBlur,
    freezeOnBlur
  } = descriptor.options;
  if (unmountOnBlur && !isFocused) {
    return null;
  }
  if (lazy && !loaded && !isFocused) {
    return null;
  }
  return /* @__PURE__ */jsx(Screen, {
    enabled: detachInactiveScreens,
    activityState: isFocused ? 2 : 0,
    freezeOnBlur,
    style: [styles.screen, isFocused ? styles.focused : styles.unfocused],
    children: descriptor.render()
  }, descriptor.route.key);
}
function isTabSlot(child) {
  return child.type === TabSlot;
}
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    position: "relative",
    height: "100%"
  },
  screenContainer: {
    flexShrink: 0,
    flexGrow: 1
  },
  focused: {
    zIndex: 1,
    display: "flex",
    flexShrink: 0,
    flexGrow: 1
  },
  unfocused: {
    zIndex: -1,
    display: "none",
    flexShrink: 1,
    flexGrow: 0
  }
});
export { TabSlot, defaultTabsSlotRender, isTabSlot, useTabSlot };
//# sourceMappingURL=TabSlot.mjs.map