Add an underlined top tab bar control.

Author: jameswilddev

Diff for: index.ts

@@ -54,6 +54,7 @@ export { createStateStoreManagerComponent } from "./react-native/components/crea
 export { createStatusPillComponent } from "./react-native/components/createStatusPillComponent";
 export { createTabRoutingComponent } from "./react-native/components/createTabRoutingComponent";
 export { createTextComponent } from "./react-native/components/createTextComponent";
+export { createUnderlinedTopTabBarComponent } from "./react-native/components/createUnderlinedTopTabBarComponent";
 export { CustomElementTableColumn } from "./react-native/types/CustomElementTableColumn";
 export { CustomTextTableColumn } from "./react-native/types/CustomTextTableColumn";
 export { EmptyRequestBody } from "./react-native/types/EmptyRequestBody";
@@ -101,6 +102,9 @@ export { TableSchema } from "./react-native/types/TableSchema";
 export { TableStyle } from "./react-native/types/TableStyle";
 export { TabRoute } from "./react-native/types/TabRoute";
 export { TabRouteTable } from "./react-native/types/TabRouteTable";
+export { UnderlinedTopTab } from "./react-native/types/UnderlinedTopTab";
+export { UnderlinedTopTabBarStyle } from "./react-native/types/UnderlinedTopTabBarStyle";
+export { UnderlinedTopTabBarStyleState } from "./react-native/types/UnderlinedTopTabBarStyleState";
 export { unwrapRenderedFunctionComponent } from "./react-native/utilities/unwrapRenderedFunctionComponent";
 export { useBackButton } from "./react-native/hooks/useBackButton";
 export { useEventRefresh } from "./react-native/hooks/useEventRefresh";

Diff for: react-native/components/createUnderlinedTopTabBarComponent/index.tsx

@@ -0,0 +1,122 @@
+import * as React from "react";
+import { StyleSheet, Text, TextStyle, ViewStyle } from "react-native";
+import type { UnderlinedTopTab } from "../../types/UnderlinedTopTab";
+import type { UnderlinedTopTabBarStyle } from "../../types/UnderlinedTopTabBarStyle";
+import { Hitbox } from "../Hitbox";
+import { HorizontallySymmetricalSafeAreaView } from "../HorizontallySymmetricalSafeAreaView";
+
+/**
+ * Creates a new React component which can be used to render a top tab bar,
+ * where an underline is used to distinguish active and inactive tabs.
+ * @template TTab                  The type which represents the selected tab.
+ * @param underlinedTopTabBarStyle The style to apply to the tab bar.
+ * @param underlinedTopTabs        The tabs to include in the bar.
+ * @returns                        The created React component.
+ */
+export function createUnderlinedTopTabBarComponent<
+  TTab extends string | number | null | undefined
+>(
+  underlinedTopTabBarStyle: UnderlinedTopTabBarStyle,
+  underlinedTopTabs: ReadonlyArray<UnderlinedTopTab<TTab>>
+): React.FunctionComponent<{ readonly tab: TTab; setTab(to: TTab): void }> {
+  const inactiveUnderlineWidth =
+    underlinedTopTabBarStyle.inactive.underline === null
+      ? 0
+      : underlinedTopTabBarStyle.inactive.underline.width;
+
+  const hitboxBase: ViewStyle = {
+    flexBasis: 0,
+    flexGrow: 1,
+  };
+
+  if (underlinedTopTabBarStyle.verticalPadding !== 0) {
+    hitboxBase.paddingTop = underlinedTopTabBarStyle.verticalPadding;
+  }
+
+  if (inactiveUnderlineWidth !== 0) {
+    hitboxBase.marginBottom = -inactiveUnderlineWidth;
+  }
+
+  const inactiveHitbox: ViewStyle = {
+    ...hitboxBase,
+  };
+
+  const activeHitbox: ViewStyle = {
+    ...hitboxBase,
+    backgroundColor: underlinedTopTabBarStyle.active.backgroundColor,
+  };
+
+  if (underlinedTopTabBarStyle.active.underline !== null) {
+    activeHitbox.borderBottomWidth =
+      underlinedTopTabBarStyle.active.underline.width;
+    activeHitbox.borderBottomColor =
+      underlinedTopTabBarStyle.active.underline.color;
+  }
+
+  const textBase: TextStyle = {
+    fontSize: underlinedTopTabBarStyle.fontSize,
+    lineHeight: underlinedTopTabBarStyle.fontSize * 1.4,
+    textAlign: `center`,
+  };
+
+  const horizontallySymmetricalSafeAreaView: ViewStyle = {
+    flexDirection: `row`,
+    backgroundColor: underlinedTopTabBarStyle.inactive.backgroundColor,
+    height:
+      underlinedTopTabBarStyle.verticalPadding +
+      underlinedTopTabBarStyle.fontSize * 1.4 +
+      underlinedTopTabBarStyle.verticalPadding,
+  };
+
+  if (underlinedTopTabBarStyle.inactive.underline !== null) {
+    horizontallySymmetricalSafeAreaView.borderBottomWidth =
+      underlinedTopTabBarStyle.inactive.underline.width;
+    horizontallySymmetricalSafeAreaView.borderBottomColor =
+      underlinedTopTabBarStyle.inactive.underline.color;
+  }
+
+  const styles = StyleSheet.create({
+    horizontallySymmetricalSafeAreaView,
+    inactiveHitbox,
+    activeHitbox,
+    inactiveText: {
+      ...textBase,
+      fontFamily: underlinedTopTabBarStyle.inactive.fontFamily,
+      color: underlinedTopTabBarStyle.inactive.color,
+    },
+    activeText: {
+      ...textBase,
+      fontFamily: underlinedTopTabBarStyle.active.fontFamily,
+      color: underlinedTopTabBarStyle.active.color,
+    },
+  });
+
+  return ({ tab, setTab }) => (
+    <HorizontallySymmetricalSafeAreaView
+      style={styles.horizontallySymmetricalSafeAreaView}
+      left
+      right
+    >
+      {underlinedTopTabs.map((item) => {
+        const isActive = item.tab === tab;
+        return (
+          <Hitbox
+            key={item.tab}
+            disabled={isActive}
+            style={isActive ? styles.activeHitbox : styles.inactiveHitbox}
+            onPress={() => {
+              setTab(item.tab);
+            }}
+          >
+            <Text
+              numberOfLines={1}
+              style={isActive ? styles.activeText : styles.inactiveText}
+            >
+              {item.text}
+            </Text>
+          </Hitbox>
+        );
+      })}
+    </HorizontallySymmetricalSafeAreaView>
+  );
+}

Diff for: react-native/components/createUnderlinedTopTabBarComponent/readme.md

@@ -0,0 +1,44 @@
+# `react-native-app-helpers/createUnderlinedTopTabBarComponent`
+
+Creates a new React component which can be used to render a top tab bar, where
+an underline is used to distinguish active and inactive tabs.
+
+## Usage
+
+```tsx
+import { createUnderlinedTopTabBarComponent } from "react-native-app-helpers";
+
+type ExampleTab = `A` | `B` | `C`;
+
+const ExampleTabBar = createUnderlinedTopTabBarComponent(
+  {
+    fontSize: 20,
+    verticalPadding: 10,
+    inactive: {
+      color: `yellow`,
+      fontFamily: `Example Inactive Font Family`,
+      backgroundColor: `red`,
+      underline: { width: 4, color: `blue` },
+    },
+    active: {
+      color: `green`,
+      fontFamily: `Example Active Font Family`,
+      backgroundColor: `orange`,
+      underline: { width: 6, color: `purple` },
+    },
+  },
+  [
+    { tab: `A`, text: `Example Tab A Text` },
+    { tab: `B`, text: `Example Tab B Text` },
+    { tab: `C`, text: `Example Tab C Text` },
+  ]
+);
+
+const ExampleScreen = () => {
+  const [tab, setTab] = React.useState<ExampleTab>(`A`);
+
+  return (
+    <ExampleTabBar tab={tab} setTab={setTab} />
+  );
+};
+```