@soundtrackio/react-native-bottom-tabs 1.4.0

package/src/TabViewNativeComponent.ts

@@ -0,0 +1,73 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ColorValue, ProcessedColorValue, ViewProps } from 'react-native';
+import type {
+  DirectEventHandler,
+  Double,
+  Int32,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
+//@ts-ignore
+import type { ImageSource } from 'react-native/Libraries/Image/ImageSource';
+
+export type OnPageSelectedEventData = Readonly<{
+  key: string;
+}>;
+
+export type OnTabBarMeasured = Readonly<{
+  height: Int32;
+}>;
+
+export type OnNativeLayout = Readonly<{
+  width: Double;
+  height: Double;
+}>;
+
+export type TabViewItems = ReadonlyArray<{
+  key: string;
+  title: string;
+  sfSymbol?: string;
+  focusedSfSymbol?: string;
+  badge?: string;
+  badgeBackgroundColor?: ProcessedColorValue | null;
+  badgeTextColor?: ProcessedColorValue | null;
+  activeTintColor?: ProcessedColorValue | null;
+  iconRenderingMode?: string;
+  hidden?: boolean;
+  testID?: string;
+  role?: string;
+  preventsDefault?: boolean;
+}>;
+
+export interface TabViewProps extends ViewProps {
+  items: TabViewItems;
+  selectedPage: string;
+  onPageSelected?: DirectEventHandler<OnPageSelectedEventData>;
+  onTabLongPress?: DirectEventHandler<OnPageSelectedEventData>;
+  onTabBarMeasured?: DirectEventHandler<OnTabBarMeasured>;
+  onNativeLayout?: DirectEventHandler<OnNativeLayout>;
+  icons?: ReadonlyArray<ImageSource>;
+  focusedIcons?: ReadonlyArray<ImageSource>;
+  tabBarHidden?: boolean;
+  tabBarHideOnKeyboard?: boolean;
+  labeled?: boolean;
+  sidebarAdaptable?: boolean;
+  scrollEdgeAppearance?: string;
+  barTintColor?: ColorValue;
+  translucent?: WithDefault<boolean, true>;
+  rippleColor?: ColorValue;
+  activeTintColor?: ColorValue;
+  inactiveTintColor?: ColorValue;
+  experimentalBakedTintColors?: WithDefault<boolean, false>;
+  disablePageAnimations?: boolean;
+  activeIndicatorColor?: ColorValue;
+  hapticFeedbackEnabled?: boolean;
+  layoutDirection?: string;
+  minimizeBehavior?: string;
+  fontFamily?: string;
+  fontWeight?: string;
+  fontSize?: Int32;
+}
+
+export default codegenNativeComponent<TabViewProps>('RNCTabView', {
+  interfaceOnly: true,
+});

package/src/expo.ts

@@ -0,0 +1,58 @@
+import { type ConfigPlugin } from '@expo/config-plugins';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+
+const ConfigPlugins = require('@expo/config-plugins');
+
+const { createRunOncePlugin, withAndroidStyles } =
+  ConfigPlugins as typeof import('@expo/config-plugins');
+
+const MATERIAL3_THEME_DYANMIC =
+  'Theme.Material3.DynamicColors.DayNight.NoActionBar';
+const MATERIAL3_THEME = 'Theme.Material3.DayNight.NoActionBar';
+const MATERIAL2_THEME = 'Theme.MaterialComponents.DayNight.NoActionBar';
+const MATERIAL3_EXPRESSIVE_THEME =
+  'Theme.Material3Expressive.DayNight.NoActionBar';
+
+type ConfigProps = {
+  /*
+   * Define theme that should be used.
+   * @default 'material3'
+   */
+  theme:
+    | 'material2'
+    | 'material3'
+    | 'material3-dynamic'
+    | 'material3-expressive';
+};
+
+const withMaterial3Theme: ConfigPlugin<ConfigProps> = (config, options) => {
+  const theme = options?.theme;
+
+  return withAndroidStyles(config, (stylesConfig) => {
+    stylesConfig.modResults.resources.style =
+      stylesConfig.modResults.resources.style?.map((style) => {
+        if (style.$.name === 'AppTheme') {
+          if (theme === 'material3-dynamic') {
+            style.$.parent = MATERIAL3_THEME_DYANMIC;
+          } else if (theme === 'material2') {
+            style.$.parent = MATERIAL2_THEME;
+          } else if (theme === 'material3-expressive') {
+            style.$.parent = MATERIAL3_EXPRESSIVE_THEME;
+          } else {
+            style.$.parent = MATERIAL3_THEME;
+          }
+        }
+
+        return style;
+      });
+
+    return stylesConfig;
+  });
+};
+
+export default createRunOncePlugin(
+  withMaterial3Theme,
+  'react-native-bottom-tabs'
+);

package/src/index.tsx

@@ -0,0 +1,23 @@
+import TabView from './TabView';
+
+/**
+ * Views
+ */
+export default TabView;
+
+/**
+ * Utilities
+ */
+export { SceneMap } from './SceneMap';
+export { useBottomTabBarHeight } from './utils/useBottomTabBarHeight';
+export { BottomTabBarHeightContext } from './utils/BottomTabBarHeightContext';
+
+/**
+ * Types
+ */
+export type {
+  AppleIcon,
+  IconRenderingMode,
+  LayoutDirection,
+  TabRole,
+} from './types';

package/src/types.ts

@@ -0,0 +1,36 @@
+import type { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+import type { SFSymbol } from 'sf-symbols-typescript';
+
+export type IconSource = string | ImageSourcePropType;
+
+export type AppleIcon = { sfSymbol: SFSymbol };
+
+export type TabRole = 'search';
+
+export type IconRenderingMode = 'automatic' | 'original';
+
+export type LayoutDirection = 'ltr' | 'rtl' | 'locale';
+
+export type BaseRoute = {
+  key: string;
+  title?: string;
+  badge?: string;
+  badgeBackgroundColor?: string;
+  badgeTextColor?: string;
+  lazy?: boolean;
+  focusedIcon?: ImageSourcePropType | AppleIcon;
+  unfocusedIcon?: ImageSourcePropType | AppleIcon;
+  iconRenderingMode?: IconRenderingMode;
+  activeTintColor?: string;
+  hidden?: boolean;
+  testID?: string;
+  role?: TabRole;
+  freezeOnBlur?: boolean;
+  style?: StyleProp<ViewStyle>;
+  preventsDefault?: boolean;
+};
+
+export type NavigationState<Route extends BaseRoute> = {
+  index: number;
+  routes: Route[];
+};

package/src/utils/BottomTabBarHeightContext.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export const BottomTabBarHeightContext = React.createContext<
+  number | undefined
+>(undefined);

package/src/utils/useBottomTabBarHeight.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import { BottomTabBarHeightContext } from './BottomTabBarHeightContext';
+
+export function useBottomTabBarHeight() {
+  const height = React.useContext(BottomTabBarHeightContext);
+
+  if (height === undefined) {
+    throw new Error(
+      "Couldn't find the bottom tab bar height. Are you inside a screen in Native Bottom Tab Navigator?"
+    );
+  }
+
+  return height;
+}