react-native-yastools 1.0.1 → 1.0.2

package/src/components/BottomTabs/__tests__/BottomTabs.test.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import BottomTabs from '../index';
+import { TabItem } from '../type';
+
+// Mock navigation
+const mockNavigate = jest.fn();
+const mockNavigation = {
+  navigate: mockNavigate,
+};
+
+// Sample tabs for testing
+const sampleTabs: TabItem[] = [
+  { name: 'Home', route: 'Home', icon: { uri: 'https://example.com/home.png' } },
+  { name: 'Search', route: 'Search', icon: { uri: 'https://example.com/search.png' } },
+  { name: 'Profile', route: 'Profile', icon: { uri: 'https://example.com/profile.png' } },
+];
+
+describe('BottomTabs', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders all tabs correctly', () => {
+    const { getByText } = render(
+      <BottomTabs
+        navigation={mockNavigation}
+        currentRoute="Home"
+        tabs={sampleTabs}
+      />
+    );
+
+    expect(getByText('Home')).toBeTruthy();
+    expect(getByText('Search')).toBeTruthy();
+    expect(getByText('Profile')).toBeTruthy();
+  });
+
+  it('navigates to correct route when tab is pressed', () => {
+    const { getByText } = render(
+      <BottomTabs
+        navigation={mockNavigation}
+        currentRoute="Home"
+        tabs={sampleTabs}
+      />
+    );
+
+    fireEvent.press(getByText('Search'));
+    expect(mockNavigate).toHaveBeenCalledWith('Search');
+  });
+
+  it('calls onTabPress callback when provided', () => {
+    const onTabPressMock = jest.fn();
+    const { getByText } = render(
+      <BottomTabs
+        navigation={mockNavigation}
+        currentRoute="Home"
+        tabs={sampleTabs}
+        onTabPress={onTabPressMock}
+      />
+    );
+
+    fireEvent.press(getByText('Profile'));
+    expect(onTabPressMock).toHaveBeenCalledWith('Profile');
+    expect(mockNavigate).toHaveBeenCalledWith('Profile');
+  });
+
+  it('does not navigate when tab is disabled', () => {
+    const disabledTabs: TabItem[] = [
+      { name: 'Home', route: 'Home', icon: { uri: 'https://example.com/home.png' } },
+      { name: 'Search', route: 'Search', icon: { uri: 'https://example.com/search.png' }, disabled: true },
+    ];
+
+    const { getByText } = render(
+      <BottomTabs
+        navigation={mockNavigation}
+        currentRoute="Home"
+        tabs={disabledTabs}
+      />
+    );
+
+    fireEvent.press(getByText('Search'));
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
+  it('applies custom testID to tabs', () => {
+    const tabsWithTestId: TabItem[] = [
+      { name: 'Home', route: 'Home', icon: { uri: 'https://example.com/home.png' }, testID: 'home-tab' },
+    ];
+
+    const { getByTestId } = render(
+      <BottomTabs
+        navigation={mockNavigation}
+        currentRoute="Home"
+        tabs={tabsWithTestId}
+      />
+    );
+
+    expect(getByTestId('home-tab')).toBeTruthy();
+  });
+
+  it('renders with container testID', () => {
+    const { getByTestId } = render(
+      <BottomTabs
+        navigation={mockNavigation}
+        currentRoute="Home"
+        tabs={sampleTabs}
+        testID="bottom-tabs"
+      />
+    );
+
+    expect(getByTestId('bottom-tabs')).toBeTruthy();
+  });
+
+  it('renders empty when no tabs are provided', () => {
+    const { queryByText } = render(
+      <BottomTabs
+        navigation={mockNavigation}
+        currentRoute="Home"
+        tabs={[]}
+      />
+    );
+
+    expect(queryByText('Home')).toBeNull();
+  });
+
+  it('handles single tab correctly', () => {
+    const singleTab: TabItem[] = [
+      { name: 'Home', route: 'Home', icon: { uri: 'https://example.com/home.png' } },
+    ];
+
+    const { getByText, queryByText } = render(
+      <BottomTabs
+        navigation={mockNavigation}
+        currentRoute="Home"
+        tabs={singleTab}
+      />
+    );
+
+    expect(getByText('Home')).toBeTruthy();
+    expect(queryByText('Search')).toBeNull();
+  });
+});

package/src/components/BottomTabs/index.tsx

@@ -0,0 +1,134 @@
+import React, { memo, useCallback } from 'react';
+import { TouchableOpacity, Image, View, Text } from 'react-native';
+import styles from './styles';
+import { COLORS } from '../../theme';
+import { BottomTabsProps, TabItem } from './type';
+
+export type { BottomTabsProps, TabItem };
+
+/**
+ * BottomTabs - A customizable bottom navigation component for React Native
+ *
+ * @example
+ * ```tsx
+ * import { BottomTabs } from 'react-native-yastools';
+ *
+ * const tabs = [
+ *   { name: 'Home', route: 'Home', icon: require('./icons/home.png') },
+ *   { name: 'Search', route: 'Search', icon: require('./icons/search.png') },
+ *   { name: 'Profile', route: 'Profile', icon: require('./icons/profile.png') },
+ * ];
+ *
+ * <BottomTabs
+ *   navigation={navigation}
+ *   currentRoute="Home"
+ *   tabs={tabs}
+ *   activeColor="#007AFF"
+ * />
+ * ```
+ */
+const BottomTabs: React.FC<BottomTabsProps> = ({
+  navigation,
+  currentRoute,
+  tabs,
+  containerStyle,
+  tabItemStyle,
+  activeTabItemStyle,
+  textStyle,
+  activeTextStyle,
+  iconStyle,
+  activeIconStyle,
+  activeColor,
+  inactiveColor,
+  onTabPress,
+  activeOpacity = 0.8,
+  testID,
+}) => {
+  const handleTabPress = useCallback(
+    (tab: TabItem) => {
+      if (tab.disabled) return;
+
+      // Call custom callback if provided
+      if (onTabPress) {
+        onTabPress(tab.route);
+      }
+
+      // Navigate to the route
+      navigation.navigate(tab.route);
+    },
+    [navigation, onTabPress]
+  );
+
+  const renderTab = useCallback(
+    (tab: TabItem, index: number) => {
+      const isActive = currentRoute === tab.route;
+
+      // Determine icon tint color
+      const iconTintColor = isActive
+        ? activeColor || COLORS.primary
+        : inactiveColor || COLORS.black;
+
+      // Determine text color
+      const textColor = isActive
+        ? activeColor || COLORS.primary
+        : inactiveColor || COLORS.black;
+
+      // Determine which icon to use
+      const iconSource = isActive && tab.activeIcon ? tab.activeIcon : tab.icon;
+
+      // Merge styles based on active state
+      const tabStyle = isActive
+        ? [styles.navItemActive, tabItemStyle, activeTabItemStyle]
+        : [styles.navItem, tabItemStyle];
+
+      const tabTextStyle = isActive
+        ? [styles.navTextActive, { color: textColor }, textStyle, activeTextStyle]
+        : [styles.navText, { color: textColor }, textStyle];
+
+      const tabIconStyle = isActive
+        ? [styles.navIconActive, { tintColor: iconTintColor }, iconStyle, activeIconStyle]
+        : [styles.navIcon, { tintColor: iconTintColor }, iconStyle];
+
+      return (
+        <TouchableOpacity
+          key={`tab-${tab.route}-${index}`}
+          style={tabStyle}
+          activeOpacity={activeOpacity}
+          onPress={() => handleTabPress(tab)}
+          disabled={tab.disabled}
+          testID={tab.testID || `tab-${tab.route}`}
+        >
+          <Image
+            resizeMode="contain"
+            source={iconSource}
+            style={tabIconStyle}
+          />
+          <Text style={tabTextStyle} numberOfLines={1}>
+            {tab.name}
+          </Text>
+        </TouchableOpacity>
+      );
+    },
+    [
+      currentRoute,
+      activeColor,
+      inactiveColor,
+      tabItemStyle,
+      activeTabItemStyle,
+      textStyle,
+      activeTextStyle,
+      iconStyle,
+      activeIconStyle,
+      activeOpacity,
+      handleTabPress,
+    ]
+  );
+
+  return (
+    <View style={[styles.BottomTabsContainer, containerStyle]} testID={testID}>
+      {tabs.map(renderTab)}
+    </View>
+  );
+};
+
+export default memo(BottomTabs);

package/src/components/BottomTabs/styles.ts

@@ -0,0 +1,45 @@
+import { StyleSheet, Platform } from 'react-native';
+import COLORS, { FONT_SIZES, FONT_FAMILY } from '../../theme';
+
+/**
+ * Default styles for the BottomTabs component
+ * Uses standard React Native StyleSheet for maximum compatibility
+ */
+export default StyleSheet.create({
+    BottomTabsContainer: {
+        width: '100%',
+        flexDirection: 'row',
+        backgroundColor: COLORS.white,
+        paddingBottom: Platform.OS === 'ios' ? 10 : 0,
+    },
+    navItem: {
+        flex: 1,
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        paddingVertical: 8,
+    },
+    navItemActive: {
+        flex: 1,
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        paddingVertical: 8,
+    },
+    navText: {
+        fontFamily: FONT_FAMILY.InterRegular,
+        fontSize: FONT_SIZES.f11,
+        marginTop: 5,
+    },
+    navTextActive: {
+        fontFamily: FONT_FAMILY.InterRegular,
+        fontSize: FONT_SIZES.f11,
+        marginTop: 5,
+    },
+    navIcon: {
+        width: 20,
+        height: 20,
+    },
+    navIconActive: {
+        width: 20,
+        height: 20,
+    },
+});

package/src/components/BottomTabs/type.ts

@@ -0,0 +1,61 @@
+import {
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  ImageSourcePropType,
+  ImageStyle,
+} from 'react-native';
+
+/**
+ * Represents a single tab item in the BottomTabs component
+ */
+export interface TabItem {
+  /** Display name shown below the icon */
+  name: string;
+  /** Route name to navigate to when tab is pressed */
+  route: string;
+  /** Icon to display for the tab (required) */
+  icon: ImageSourcePropType;
+  /** Optional: Active state icon (if different from default) */
+  activeIcon?: ImageSourcePropType;
+  /** Optional: Whether this tab is disabled */
+  disabled?: boolean;
+  /** Optional: Test ID for testing purposes */
+  testID?: string;
+}
+
+/**
+ * Props for the BottomTabs component
+ */
+export interface BottomTabsProps {
+  /** Navigation object from React Navigation */
+  navigation: any;
+  /** Currently active route name */
+  currentRoute: string;
+  /** Array of tab items to render */
+  tabs: TabItem[];
+  /** Optional: Custom styles for the container */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** Optional: Custom styles for tab items */
+  tabItemStyle?: StyleProp<ViewStyle>;
+  /** Optional: Custom styles for active tab items */
+  activeTabItemStyle?: StyleProp<ViewStyle>;
+  /** Optional: Custom styles for tab text */
+  textStyle?: StyleProp<TextStyle>;
+  /** Optional: Custom styles for active tab text */
+  activeTextStyle?: StyleProp<TextStyle>;
+  /** Optional: Custom styles for tab icons */
+  iconStyle?: StyleProp<ImageStyle>;
+  /** Optional: Custom styles for active tab icons */
+  activeIconStyle?: StyleProp<ImageStyle>;
+  /** Optional: Active color for icons and text (overrides theme) */
+  activeColor?: string;
+  /** Optional: Inactive color for icons and text (overrides theme) */
+  inactiveColor?: string;
+  /** Optional: Callback when a tab is pressed (receives route name) */
+  onTabPress?: (route: string) => void;
+  /** Optional: Active opacity when pressing tabs (default: 0.8) */
+  activeOpacity?: number;
+  /** Test ID for testing purposes */
+  testID?: string;
+}

package/src/components/Button/__tests__/{YasButton.test.tsx → Button.test.tsx}

@@ -1,11 +1,11 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react-native';
-import YasButton from '../index';
+import Button from '../index';
 
-describe('YasButton', () => {
+describe('Button', () => {
   it('renders correctly with text', () => {
     const { getByText } = render(
-      <YasButton text="Press Me" onPress={() => {}} />
+      <Button text="Press Me" onPress={() => {}} />
     );
     expect(getByText('Press Me')).toBeTruthy();
   });
@@ -13,7 +13,7 @@ describe('YasButton', () => {
   it('calls onPress when pressed', () => {
     const onPressMock = jest.fn();
     const { getByText } = render(
-      <YasButton text="Press Me" onPress={onPressMock} />
+      <Button text="Press Me" onPress={onPressMock} />
     );
 
     fireEvent.press(getByText('Press Me'));
@@ -23,7 +23,7 @@ describe('YasButton', () => {
   it('does not call onPress when disabled', () => {
     const onPressMock = jest.fn();
     const { getByText } = render(
-      <YasButton text="Press Me" onPress={onPressMock} disabled />
+      <Button text="Press Me" onPress={onPressMock} disabled />
     );
 
     fireEvent.press(getByText('Press Me'));
@@ -32,7 +32,7 @@ describe('YasButton', () => {
 
   it('shows loading indicator when fetching', () => {
     const { queryByText, getByTestId } = render(
-      <YasButton text="Press Me" onPress={() => {}} fetching testID="button" />
+      <Button text="Press Me" onPress={() => {}} fetching testID="button" />
     );
 
     expect(queryByText('Press Me')).toBeNull();
@@ -42,7 +42,7 @@ describe('YasButton', () => {
     jest.useFakeTimers();
     const onPressMock = jest.fn();
     const { getByText } = render(
-      <YasButton text="Press Me" onPress={onPressMock} debounceTime={1000} />
+      <Button text="Press Me" onPress={onPressMock} debounceTime={1000} />
     );
 
     const button = getByText('Press Me');
@@ -62,7 +62,7 @@ describe('YasButton', () => {
 
   it('applies custom primary color', () => {
     const { getByTestId } = render(
-      <YasButton
+      <Button
         text="Press Me"
         onPress={() => {}}
         primaryColor="#FF0000"
@@ -80,7 +80,7 @@ describe('YasButton', () => {
   it('renders without text when only icon is provided', () => {
     const mockIcon = { uri: 'https://example.com/icon.png' };
     const { queryByText } = render(
-      <YasButton onPress={() => {}} icon={mockIcon} />
+      <Button onPress={() => {}} icon={mockIcon} />
     );
 
     expect(queryByText('Press Me')).toBeNull();

package/src/components/Button/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useRef } from 'react';
+import React, { memo, useMemo, useRef } from 'react';
 import {
   TouchableOpacity,
   Text,
@@ -7,34 +7,36 @@ import {
   ViewStyle,
   View,
   Image,
+  Animated,
 } from 'react-native';
 
 // Internal styles and theme
 import styles from './styles';
 import COLORS from '../../theme';
-import { YasButtonProps } from './type';
+import { ButtonProps } from './type';
+import { preventMultiPress, usePressScale } from '../../interactions';
 
-export type { YasButtonProps };
+export type { ButtonProps };
 
+const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity);
 
 /**
- * YasButton - A customizable button component for React Native
+ * Button - A customizable button component for React Native
  * 
  * @example
  * ```tsx
- * import { YasButton } from 'react-native-yastools';
+ * import { Button } from 'react-native-yastools';
  * 
- * <YasButton
+ * <Button
  *   text="Click Me"
  *   onPress={() => console.log('Pressed!')}
  *   primaryColor="#FF6B6B"
  * />
  * ```
  */
-const YasButton: React.FC<YasButtonProps> = ({
+const Button: React.FC<ButtonProps> = ({
   onPress,
   additionalStyle,
-  additonalStyle, // Support legacy prop name
   disabled,
   fetching,
   text,
@@ -47,18 +49,28 @@ const YasButton: React.FC<YasButtonProps> = ({
   debounceTime = 1000,
   activeOpacity = 0.8,
   testID,
+  animateScale,
 }) => {
-  const lastPressTime = useRef(0);
+  // Keep latest onPress in a ref to avoid resetting the debouncer closure when onPress changes
+  const onPressRef = useRef(onPress);
+  onPressRef.current = onPress;
 
-  const handlePress = () => {
-    // Prevent multiple clicks with configurable debounce
-    const now = Date.now();
-    if (now - lastPressTime.current < debounceTime) {
-      return;
+  // Setup interactions
+  // Default to 1 (no scaling) if not provided.
+  const { scaleAnim, handlePressIn, handlePressOut } = usePressScale(animateScale ?? 1);
+
+  // Check if animation is requested
+  const isAnimated = animateScale !== undefined;
+
+  // Memoize the handler so existing debounce timer isn't lost on re-renders
+  const handlePress = useMemo(() => {
+    // If debounceTime is 0 or less, just call directly (or use logic if user wants default protection)
+    // Assuming if user passes 0 they want NO debounce. But existing code defaulted to 1000.
+    if (debounceTime > 0) {
+      return preventMultiPress(() => onPressRef.current && onPressRef.current(), debounceTime);
     }
-    lastPressTime.current = now;
-    onPress();
-  };
+    return () => onPressRef.current && onPressRef.current();
+  }, [debounceTime]);
 
   // Determine container style based on state
   const containerStyle: StyleProp<ViewStyle> = [
@@ -67,14 +79,20 @@ const YasButton: React.FC<YasButtonProps> = ({
     !disabled && primaryColor && { backgroundColor: primaryColor },
     disabled && disabledColor && { backgroundColor: disabledColor },
     // Support both prop names for backwards compatibility
-    additionalStyle || additonalStyle,
+    additionalStyle 
   ];
 
+  // Combine animated style
+  const animatedStyle = isAnimated ? { transform: [{ scale: scaleAnim }] } : undefined;
+
   return (
-    <TouchableOpacity
+    <AnimatedTouchableOpacity
       onPress={handlePress}
+      onPressIn={isAnimated ? handlePressIn : undefined}
+      onPressOut={isAnimated ? handlePressOut : undefined}
       activeOpacity={activeOpacity}
       disabled={disabled || fetching}
+      style={[animatedStyle]} 
     >
       <View style={containerStyle} testID={testID}>
         {fetching ? (
@@ -89,8 +107,8 @@ const YasButton: React.FC<YasButtonProps> = ({
           </>
         )}
       </View>
-    </TouchableOpacity>
+    </AnimatedTouchableOpacity>
   );
 };
 
-export default memo(YasButton);
+export default memo(Button);

package/src/components/Button/styles.ts

@@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native';
 import COLORS, { FONT_SIZES } from '../../theme';
 
 /**
- * Default styles for the YasButton component
+ * Default styles for the Button component
  * Uses standard React Native StyleSheet for maximum compatibility
  */
 export default StyleSheet.create({

package/src/components/Button/type.ts

@@ -6,13 +6,11 @@ import {
   ImageStyle,
 } from "react-native";
 
-export interface YasButtonProps {
+export interface ButtonProps {
   /** Callback function when button is pressed */
   onPress: () => void;
   /** Additional styles to apply to the button container */
   additionalStyle?: StyleProp<ViewStyle>;
-  /** @deprecated Use additionalStyle instead */
-  additonalStyle?: StyleProp<ViewStyle>;
   /** Whether the button is disabled */
   disabled?: boolean;
   /** Whether to show loading indicator */
@@ -37,4 +35,10 @@ export interface YasButtonProps {
   activeOpacity?: number;
   /** Test ID for testing purposes */
   testID?: string;
+  /**
+   * Scale value to animate to when pressed (0 to 1).
+   * If undefined, no scaling animation occurs.
+   * @example 0.95
+   */
+  animateScale?: number;
 }