@zezosoft/zezo-ott-react-native-ui-kit 1.3.4 → 1.3.6

package/src/components/Input/PhoneInput/Two/Two.tsx

@@ -0,0 +1,406 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, {
+  useRef,
+  useState,
+  useCallback,
+  useMemo,
+  useEffect,
+} from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  Animated,
+  type AccessibilityProps,
+  type TextStyle,
+  type ViewStyle,
+  type StyleProp,
+} from 'react-native';
+import PhoneInput from 'react-native-phone-number-input';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { ChevronDown } from 'lucide-react-native';
+import { getExampleNumber } from 'libphonenumber-js';
+import examples from 'libphonenumber-js/mobile/examples';
+import { parsePhoneNumberFromString } from 'libphonenumber-js';
+import { debounce } from 'lodash';
+import { useTheme } from '../../../../theme';
+import type { ThemeOverride } from '../../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+export interface PhoneNumberInputTwoProps extends Pick<
+  AccessibilityProps,
+  'accessibilityLabel' | 'accessibilityHint'
+> {
+  value: string;
+  onChangeText: (params: {
+    fullNumber: string;
+    countryCode: string;
+    formattedNumber: string;
+  }) => void;
+  label?: string;
+  placeholder?: string;
+  error?: boolean;
+  errorMessage?: string;
+  inputStyle?: StyleProp<TextStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+  theme?: ThemeOverride;
+  disabled?: boolean;
+}
+
+const getMaxLengthForCountry = (
+  countryCode: string,
+  defaultMaxLength: number
+): number => {
+  try {
+    const example = getExampleNumber(
+      countryCode as keyof typeof examples,
+      examples
+    );
+    return example?.nationalNumber?.length ?? defaultMaxLength;
+  } catch (error) {
+    console.warn(`Failed to get max length for country ${countryCode}:`, error);
+    return defaultMaxLength;
+  }
+};
+
+const PhoneNumberInputTwo: React.FC<PhoneNumberInputTwoProps> = ({
+  value = '',
+  onChangeText,
+  label,
+  placeholder = 'Phone Number',
+  error = false,
+  errorMessage,
+  inputStyle,
+  containerStyle,
+  theme: propTheme,
+  accessibilityLabel = label || 'Phone number input',
+  accessibilityHint,
+  disabled = false,
+}) => {
+  const phoneInputRef = useRef<PhoneInput>(null);
+  const { theme: appliedTheme, isDarkMode } = useTheme(propTheme);
+  const { textPrimary, textDisabled, error: errorColor } = appliedTheme.colors;
+
+  const [inputError, setInputError] = useState<string | null>(null);
+  const [, setIsFocused] = useState<boolean>(false);
+  const errorAnimation = useRef(new Animated.Value(0)).current;
+
+  // ✅ Hard set country to India
+  useEffect(() => {
+    phoneInputRef.current?.getCountryCode();
+  }, []);
+
+  useEffect(() => {
+    if (inputError || error) {
+      Animated.timing(errorAnimation, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      Animated.timing(errorAnimation, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [inputError, error, errorAnimation]);
+
+  const debouncedValidate = useMemo(
+    () =>
+      debounce((sanitizedText: string, inputCallingCode: string) => {
+        const fullRawNumber = `+${inputCallingCode}${sanitizedText}`;
+        const parsedNumber = parsePhoneNumberFromString(fullRawNumber);
+        const maxLength = getMaxLengthForCountry('IN', 10);
+
+        if (!sanitizedText) {
+          setInputError(null);
+          return;
+        }
+
+        if (!parsedNumber || !inputCallingCode) {
+          setInputError('Invalid phone number format');
+          return;
+        }
+
+        if (sanitizedText.length > maxLength) {
+          setInputError(`Phone number must not exceed ${maxLength} digits`);
+          return;
+        }
+
+        if (sanitizedText.length < maxLength) {
+          setInputError(`Phone number must be at least ${maxLength} digits`);
+          return;
+        }
+
+        const isValid = parsedNumber.isValid();
+        const e164 = parsedNumber.number;
+
+        if (isValid && e164) {
+          setInputError(null);
+        } else {
+          setInputError('Please enter a valid phone number');
+        }
+      }, 300),
+    []
+  );
+
+  const handleTextChange = useCallback(
+    (text: string) => {
+      const sanitized = text.replace(/[^\d]/g, '');
+      const currentCallingCode =
+        phoneInputRef.current?.getCallingCode() || '91';
+
+      onChangeText({
+        fullNumber:
+          sanitized.length >= 10 ? `+${currentCallingCode}${sanitized}` : '',
+        formattedNumber: sanitized,
+        countryCode: currentCallingCode,
+      });
+
+      debouncedValidate(sanitized, currentCallingCode);
+    },
+    [onChangeText, debouncedValidate]
+  );
+
+  useEffect(() => {
+    return () => {
+      debouncedValidate.cancel();
+    };
+  }, [debouncedValidate]);
+
+  const phoneTextColor = useMemo(
+    () =>
+      disabled ? textDisabled : inputError || error ? errorColor : textPrimary,
+    [disabled, inputError, error, textDisabled, errorColor, textPrimary]
+  );
+
+  const maxLength = useMemo(() => getMaxLengthForCountry('IN', 10), []);
+
+  const wrapperBackgroundColor = useMemo(() => {
+    if (disabled) return appliedTheme.colors.backgroundDisabled;
+    if (inputError || error) return appliedTheme.colors.errorContainer;
+
+    return isDarkMode
+      ? 'rgba(255, 255, 255, 0.2)'
+      : 'rgba(255, 255, 255, 0.24)';
+  }, [disabled, inputError, error, isDarkMode, appliedTheme.colors]);
+
+  const borderColor = useMemo(() => {
+    if (disabled) return appliedTheme.colors.outlineDisabled;
+    if (inputError || error) return errorColor;
+
+    return isDarkMode ? 'rgba(255,255,255,0.50)' : 'rgba(255,255,255,0.9)';
+  }, [
+    disabled,
+    appliedTheme.colors.outlineDisabled,
+    inputError,
+    error,
+    errorColor,
+    isDarkMode,
+  ]);
+
+  const inputWrapperStyle = useMemo(
+    () => [
+      styles.inputWrapper,
+      {
+        backgroundColor: wrapperBackgroundColor,
+        borderColor,
+        borderWidth: scale(1.2),
+
+        shadowColor: isDarkMode ? 'transparent' : '#000',
+        shadowOpacity: isDarkMode ? 0 : 0.12,
+        shadowRadius: 10,
+        shadowOffset: { width: 0, height: 6 },
+        elevation: isDarkMode ? 0 : 4,
+      },
+    ],
+    [wrapperBackgroundColor, borderColor, isDarkMode]
+  );
+
+  const computedAccessibilityLabel = useMemo(
+    () =>
+      `${accessibilityLabel}, country code: +91${inputError || error ? `, error: ${inputError || errorMessage || 'Invalid phone number'}` : ''}`,
+    [accessibilityLabel, inputError, error, errorMessage]
+  );
+
+  const dynamicTextInputStyle = {
+    color: phoneTextColor,
+  };
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        containerStyle,
+        {
+          opacity: errorAnimation.interpolate({
+            inputRange: [0, 1],
+            outputRange: [1, 0.95],
+          }),
+        },
+      ]}
+    >
+      {label && (
+        <View
+          style={[
+            styles.labelContainer,
+            { backgroundColor: appliedTheme.colors.background },
+          ]}
+        />
+      )}
+      <View style={inputWrapperStyle}>
+        <PhoneInput
+          ref={phoneInputRef}
+          defaultCode="IN"
+          layout="second"
+          value={value}
+          onChangeText={handleTextChange}
+          flagButtonStyle={styles.flagButtonStyle}
+          withShadow={false}
+          autoFocus={false}
+          disabled={disabled}
+          placeholder={placeholder}
+          containerStyle={[styles.phoneInputContainer, styles.transparentBg]}
+          textContainerStyle={[
+            styles.phoneInputTextContainer,
+            styles.transparentBg,
+          ]}
+          textInputStyle={[
+            styles.textInput,
+            styles.transparentBg,
+            dynamicTextInputStyle,
+            inputStyle,
+          ]}
+          codeTextStyle={[styles.codeTextStyle, styles.whiteText]}
+          countryPickerButtonStyle={[
+            styles.countryPickerButtonStyle,
+            styles.transparentBg,
+          ]}
+          renderDropdownImage={<ChevronDown color={'white'} size={scale(18)} />}
+          textInputProps={{
+            keyboardType: 'numeric',
+            maxLength,
+            placeholderTextColor: disabled
+              ? appliedTheme.colors.textDisabled
+              : appliedTheme.colors.textSecondary,
+            accessibilityLabel: computedAccessibilityLabel,
+            accessibilityHint,
+            cursorColor:
+              inputError || error
+                ? appliedTheme.colors.onErrorContainer
+                : appliedTheme.colors.primary,
+            selectionColor:
+              inputError || error
+                ? appliedTheme.colors.onErrorContainer
+                : appliedTheme.colors.primary,
+            onFocus: () => setIsFocused(true),
+            onBlur: () => setIsFocused(false),
+          }}
+          withDarkTheme={isDarkMode}
+        />
+      </View>
+      {(error || inputError) && (
+        <Text
+          style={[
+            styles.errorText,
+            { color: appliedTheme.colors.onErrorContainer },
+          ]}
+        >
+          {inputError || errorMessage || 'Invalid phone number'}
+        </Text>
+      )}
+    </Animated.View>
+  );
+};
+
+export default React.memo(PhoneNumberInputTwo);
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    marginBottom: verticalScale(16),
+  },
+  labelContainer: {
+    position: 'absolute',
+    top: -verticalScale(7),
+    left: scale(12),
+    zIndex: 1,
+    paddingHorizontal: scale(6),
+    borderRadius: scale(4),
+  },
+  label: {
+    fontSize: RFValue(10),
+    fontWeight: '500',
+    letterSpacing: 0.3,
+  },
+  inputWrapper: {
+    width: '100%',
+    height: verticalScale(50),
+    borderRadius: moderateScale(8),
+    paddingHorizontal: scale(8),
+    flexDirection: 'row',
+    alignItems: 'center',
+    shadowColor: 'transparent',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    elevation: 0,
+  },
+  flagButtonStyle: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: scale(4),
+  },
+  phoneInputContainer: {
+    flex: 1,
+    borderWidth: 0,
+    elevation: 0,
+  },
+  phoneInputTextContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    paddingVertical: 0,
+    paddingHorizontal: scale(4),
+  },
+  textInput: {
+    flex: 1,
+    fontSize: RFValue(16),
+    padding: 0,
+    fontWeight: '400',
+  },
+  codeTextStyle: {
+    fontSize: RFValue(16),
+    marginLeft: scale(4),
+    fontWeight: '500',
+  },
+  countryPickerButtonStyle: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: verticalScale(42),
+    paddingHorizontal: scale(8),
+    borderRightWidth: 0.8,
+    borderRightColor: '#D0D0D0',
+  },
+
+  errorText: {
+    fontSize: RFValue(10),
+    marginTop: verticalScale(8),
+    marginLeft: scale(12),
+    fontWeight: '400',
+    opacity: 0.9,
+  },
+  transparentBg: {
+    backgroundColor: 'transparent',
+  },
+  whiteText: {
+    color: 'white',
+  },
+});

package/src/components/Input/PhoneInput/index.ts

@@ -0,0 +1,14 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import PhoneNumberInputTwo from './Two/Two';
+import PhoneNumberInputOne from './One/One';
+
+export const PhoneInput = {
+  One: PhoneNumberInputOne,
+  Two: PhoneNumberInputTwo,
+};
+
+export { PhoneNumberInputTwo, PhoneNumberInputOne };

package/src/components/Keyboard/HideKeyboard.tsx

@@ -0,0 +1,91 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useEffect, useRef } from 'react';
+import {
+  TouchableWithoutFeedback,
+  Keyboard,
+  KeyboardAvoidingView,
+  StyleSheet,
+  Animated,
+  Platform,
+  type ViewStyle,
+  type StyleProp,
+} from 'react-native';
+import { scale } from 'react-native-size-matters';
+
+interface HideKeyboardProps {
+  children: React.ReactNode;
+  containerStyle?: StyleProp<ViewStyle>;
+  behavior?: 'padding' | 'height' | 'position';
+  keyboardVerticalOffset?: number;
+}
+
+const HideKeyboard: React.FC<HideKeyboardProps> = ({
+  children,
+  containerStyle,
+  behavior = 'padding',
+  keyboardVerticalOffset = Platform.OS === 'ios' ? scale(0) : scale(-160),
+}) => {
+  const fadeAnim = useRef(new Animated.Value(1)).current;
+
+  const offset = keyboardVerticalOffset;
+
+  useEffect(() => {
+    const showEvent =
+      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent =
+      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+    const showSub = Keyboard.addListener(showEvent, () => {
+      Animated.timing(fadeAnim, {
+        toValue: 0.98,
+        duration: 250,
+        useNativeDriver: true,
+      }).start();
+    });
+
+    const hideSub = Keyboard.addListener(hideEvent, () => {
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 250,
+        useNativeDriver: true,
+      }).start();
+    });
+
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, [fadeAnim]);
+
+  const animatedStyle = { transform: [{ scale: fadeAnim }] };
+
+  return (
+    <KeyboardAvoidingView
+      style={[styles.keyboardAvoidingView, containerStyle]}
+      behavior={behavior}
+      keyboardVerticalOffset={offset}
+    >
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+        <Animated.View style={[styles.content, animatedStyle]}>
+          {children}
+        </Animated.View>
+      </TouchableWithoutFeedback>
+    </KeyboardAvoidingView>
+  );
+};
+
+const styles = StyleSheet.create({
+  keyboardAvoidingView: {
+    flex: 1,
+    width: '100%',
+  },
+  content: {
+    flex: 1,
+  },
+});
+
+export default HideKeyboard;

package/src/components/Loader/Loader.tsx

@@ -0,0 +1,49 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useMemo } from 'react';
+import { StyleSheet, View, ActivityIndicator } from 'react-native';
+import { useTheme } from '../../theme';
+import type { ThemeOverride } from '../../theme/themes';
+
+interface LoaderProps {
+  color?: string;
+  theme?: ThemeOverride;
+}
+
+export const Loader: React.FC<LoaderProps> = React.memo(
+  ({ color, theme: themeOverride }) => {
+    const { theme } = useTheme(themeOverride);
+
+    const rootStyle = useMemo(
+      () => [styles.root, { backgroundColor: theme.colors.scrim }],
+      [theme.colors.scrim]
+    );
+
+    const indicatorColor = useMemo(
+      () => color ?? theme.colors.primary,
+      [color, theme.colors.primary]
+    );
+
+    return (
+      <View style={rootStyle}>
+        <ActivityIndicator size="large" color={indicatorColor} />
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  root: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 999,
+  },
+});

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,150 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useMemo, useState } from 'react';
+import {
+  Image,
+  View,
+  StyleSheet,
+  type StyleProp,
+  type ImageStyle,
+  type ViewStyle,
+} from 'react-native';
+import { moderateScale } from 'react-native-size-matters';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { useSplashCache } from '../../hooks/useSplashCache';
+import { useTheme } from '../../theme';
+import type { ThemeOverride } from '../../theme/themes';
+
+interface ILogoProps {
+  width?: number;
+  height?: number;
+  resizeMode?: 'contain' | 'cover' | 'stretch';
+  logoUri: string;
+  imageStyle?: StyleProp<ImageStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+  aspectRatio?: number;
+  fallbackUri?: string;
+  theme?: ThemeOverride;
+  isLoading?: boolean;
+}
+
+export const Logo: React.FC<ILogoProps> = ({
+  width = 200,
+  height = 50,
+  resizeMode = 'contain',
+  logoUri,
+  imageStyle,
+  containerStyle,
+  aspectRatio,
+  fallbackUri,
+  theme,
+  isLoading = false,
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+
+  const [hasError, setHasError] = useState(false);
+
+  const {
+    data: { logoPath },
+    isLoading: isSplashLoading,
+  } = useSplashCache({
+    logoUrl: logoUri,
+  });
+  const finalSource = useMemo(() => {
+    if (hasError) {
+      return fallbackUri ? { uri: fallbackUri } : undefined;
+    }
+
+    if (logoPath) {
+      return {
+        uri: logoPath.startsWith('file://') ? logoPath : `file://${logoPath}`,
+      };
+    }
+
+    if (logoUri) {
+      return { uri: logoUri };
+    }
+
+    if (fallbackUri) {
+      return { uri: fallbackUri };
+    }
+
+    return undefined;
+  }, [logoPath, logoUri, fallbackUri, hasError]);
+
+  const containerStyleMemo = useMemo(
+    () => [
+      {
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+      },
+      containerStyle,
+    ],
+    [containerStyle]
+  );
+
+  const imageStyleMemo = useMemo(
+    () => [
+      {
+        width: moderateScale(width),
+        height: moderateScale(height),
+        ...(aspectRatio ? { aspectRatio } : {}),
+      },
+      imageStyle,
+    ],
+    [width, height, aspectRatio, imageStyle]
+  );
+
+  const showSkeleton = isLoading || isSplashLoading;
+  const showPlaceholder = !finalSource;
+
+  const dynamicPlaceholderStyle = {
+    width: moderateScale(width),
+    height: moderateScale(height),
+    backgroundColor: appliedTheme.colors.skeletonBaseColor,
+  };
+
+  return (
+    <View style={containerStyleMemo}>
+      {showSkeleton ? (
+        <SkeletonPlaceholder
+          backgroundColor={appliedTheme.colors.skeletonBaseColor}
+          highlightColor={appliedTheme.colors.skeletonHighlightColor}
+          speed={1000}
+          borderRadius={4}
+        >
+          <SkeletonPlaceholder.Item
+            alignSelf="center"
+            width={moderateScale(width)}
+            height={moderateScale(height)}
+            borderRadius={4}
+          />
+        </SkeletonPlaceholder>
+      ) : finalSource ? (
+        <Image
+          source={finalSource}
+          resizeMode={resizeMode}
+          style={imageStyleMemo}
+          onError={() => {
+            if (!hasError) {
+              setHasError(true);
+            }
+          }}
+        />
+      ) : showPlaceholder ? (
+        <View style={[styles.placeholder, dynamicPlaceholderStyle]} />
+      ) : null}
+    </View>
+  );
+};
+
+export default React.memo(Logo);
+
+const styles = StyleSheet.create({
+  placeholder: {
+    borderRadius: 4,
+  },
+});