@madeja-studio/telar/lib/module/component/NavigationBar/NavigationBar.js

UI component library by Madeja Studio

"use strict";

import { View } from 'react-native';
import tw from "../../tailwind/index.js";
import { NavigationBarButton } from "./NavigationBarButton.js";

/**
 * These props are extracted from the @react-navigation library.
 * They mimic the ones defined in there for better compatibility, to
 * avoid having to "translate" from the library ones to the ones in
 * this component.
 *
 * {@link https://github.com/react-navigation/react-navigation/blob/main/packages/bottom-tabs/src/types.tsx#L417-L422}
 */
import { jsx as _jsx } from "react/jsx-runtime";
export const NavigationBar = ({
  insets,
  onPress,
  options,
  state
}) => {
  return /*#__PURE__*/_jsx(View, {
    style: [tw`absolute w-screen bottom-2 flex-row center`, {
      paddingBottom: insets.bottom
    }],
    children: /*#__PURE__*/_jsx(View, {
      style: tw`flex-row rounded-2xl border border-white mx-2`,
      children: options.map((option, index) => /*#__PURE__*/_jsx(NavigationBarButton, {
        icon: option.icon,
        isActive: state.index === index,
        onPress: () => onPress(index),
        testID: option.testID
      }, `${option.icon.family}_${option.icon.name}`))
    })
  });
};
//# sourceMappingURL=NavigationBar.js.map