@zezosoft/zezo-ott-react-native-ui-kit 1.1.1 → 1.1.3

package/src/components/Input/InputOne.tsx

@@ -2,7 +2,7 @@
  * @author Naresh Dhamu
  * @lastModified Tue 17 Jun 2025 at 11:20 AM
  */
-import React, { useState } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import {
   StyleSheet,
   View,
@@ -45,9 +45,20 @@ const InputOne: React.FC<InputOneProps> = ({
 }) => {
   const { theme: appliedTheme } = useInternalTheme(theme);
   const [showPassword, setShowPassword] = useState(false);
-  const [isFocused, setIsFocused] = useState(false); // 👈 focus state जोड़ी गई
-  const isPasswordField = !!secureTextEntry;
-  const inputSecure = isPasswordField && !showPassword;
+  const [isFocused, setIsFocused] = useState(false);
+
+  const isPasswordField = useMemo(() => !!secureTextEntry, [secureTextEntry]);
+  const inputSecure = useMemo(
+    () => isPasswordField && !showPassword,
+    [isPasswordField, showPassword]
+  );
+
+  const handleFocus = useCallback(() => setIsFocused(true), []);
+  const handleBlur = useCallback(() => setIsFocused(false), []);
+  const togglePassword = useCallback(
+    () => setShowPassword((prev) => !prev),
+    []
+  );
 
   const {
     textPrimary,
@@ -57,126 +68,143 @@ const InputOne: React.FC<InputOneProps> = ({
     outlineDisabled,
     error: inputErrorColor,
     background,
-    primary, // अगर theme में primary color हो तो उसे भी use करेंगे
+    primary,
   } = appliedTheme?.colors || {};
 
+  const labelColor = useMemo(
+    () => (error ? inputErrorColor : disabled ? textDisabled : textPrimary),
+    [error, disabled, inputErrorColor, textDisabled, textPrimary]
+  );
+
+  const labelContainerStyle = useMemo(
+    () => [
+      styles.labelContainer,
+      { backgroundColor: background, borderRadius: scale(5) },
+    ],
+    [background]
+  );
+
+  const labelStyle = useMemo(
+    () => [styles.label, { color: labelColor }],
+    [labelColor]
+  );
+
+  const borderColor = useMemo(
+    () =>
+      disabled
+        ? outlineDisabled
+        : error
+          ? inputErrorColor
+          : isFocused
+            ? primary || '#007AFF'
+            : outline,
+    [
+      disabled,
+      error,
+      isFocused,
+      outlineDisabled,
+      inputErrorColor,
+      primary,
+      outline,
+    ]
+  );
+
+  const wrapperBackgroundColor = useMemo(
+    () =>
+      disabled
+        ? appliedTheme.colors.backgroundDisabled
+        : error
+          ? appliedTheme.colors.errorContainer
+          : appliedTheme.colors.background,
+    [disabled, error, appliedTheme.colors]
+  );
+
+  const inputWrapperStyle = useMemo(
+    () => [
+      styles.inputWrapper,
+      {
+        borderColor,
+        backgroundColor: wrapperBackgroundColor,
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+      },
+    ],
+    [borderColor, wrapperBackgroundColor]
+  );
+
+  const inputTextColor = useMemo(
+    () => (disabled ? textDisabled : error ? inputErrorColor : textPrimary),
+    [disabled, error, textDisabled, inputErrorColor, textPrimary]
+  );
+
+  const inputColorStyle = useMemo(
+    () => [styles.input, { color: inputTextColor }, inputStyle],
+    [inputTextColor, inputStyle]
+  );
+
+  const placeholderColor = useMemo(
+    () => placeholderTextColor || (disabled ? textDisabled : textSecondary),
+    [placeholderTextColor, disabled, textDisabled, textSecondary]
+  );
+
+  const cursorColor = useMemo(
+    () =>
+      disabled
+        ? textDisabled
+        : error
+          ? inputErrorColor
+          : isFocused
+            ? primary || '#007AFF'
+            : textPrimary,
+    [
+      disabled,
+      error,
+      isFocused,
+      textDisabled,
+      inputErrorColor,
+      primary,
+      textPrimary,
+    ]
+  );
+
+  const iconColor = useMemo(
+    () => (disabled ? textDisabled : error ? inputErrorColor : textPrimary),
+    [disabled, error, textDisabled, inputErrorColor, textPrimary]
+  );
+
+  const textContentType = useMemo(
+    () => (isPasswordField ? 'oneTimeCode' : props.textContentType || 'none'),
+    [isPasswordField, props.textContentType]
+  );
+
   return (
     <View style={[styles.container, containerStyle]}>
       {label && (
-        <View
-          style={[
-            styles.labelContainer,
-            { backgroundColor: background, borderRadius: scale(5) },
-          ]}
-        >
-          <Text
-            style={[
-              styles.label,
-              {
-                color: error
-                  ? inputErrorColor
-                  : disabled
-                    ? textDisabled
-                    : textPrimary,
-              },
-            ]}
-          >
-            {label}
-          </Text>
+        <View style={labelContainerStyle}>
+          <Text style={labelStyle}>{label}</Text>
         </View>
       )}
 
-      <View
-        style={[
-          styles.inputWrapper,
-          {
-            borderColor: disabled
-              ? outlineDisabled
-              : error
-                ? inputErrorColor
-                : isFocused
-                  ? primary || '#007AFF'
-                  : outline,
-            backgroundColor: disabled
-              ? appliedTheme.colors.backgroundDisabled
-              : error
-                ? appliedTheme.colors.errorContainer
-                : appliedTheme.colors.background,
-            flexDirection: 'row',
-            alignItems: 'center',
-          },
-        ]}
-      >
+      <View style={inputWrapperStyle}>
         <TextInput
           {...props}
           editable={!disabled}
-          onFocus={() => setIsFocused(true)}
-          onBlur={() => setIsFocused(false)}
-          placeholderTextColor={
-            placeholderTextColor || (disabled ? textDisabled : textSecondary)
-          }
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          placeholderTextColor={placeholderColor}
           secureTextEntry={inputSecure}
-          textContentType={
-            isPasswordField ? 'oneTimeCode' : props.textContentType || 'none'
-          }
-          cursorColor={
-            disabled
-              ? textDisabled
-              : error
-                ? inputErrorColor
-                : isFocused
-                  ? primary || '#007AFF'
-                  : textPrimary
-          }
-          selectionColor={
-            disabled
-              ? textDisabled
-              : error
-                ? inputErrorColor
-                : isFocused
-                  ? primary || '#007AFF'
-                  : textPrimary
-          }
-          style={[
-            styles.input,
-            {
-              color: disabled
-                ? textDisabled
-                : error
-                  ? inputErrorColor
-                  : textPrimary,
-            },
-            inputStyle,
-          ]}
+          textContentType={textContentType}
+          cursorColor={cursorColor}
+          selectionColor={cursorColor}
+          style={inputColorStyle}
         />
 
         {isPasswordField && (
-          <TouchableOpacity
-            onPress={() => setShowPassword((prev) => !prev)}
-            disabled={disabled}
-          >
+          <TouchableOpacity onPress={togglePassword} disabled={disabled}>
             {showPassword ? (
-              <EyeOff
-                size={scale(20)}
-                color={
-                  disabled
-                    ? textDisabled
-                    : error
-                      ? inputErrorColor
-                      : textPrimary
-                }
-              />
+              <EyeOff size={scale(20)} color={iconColor} />
             ) : (
-              <Eye
-                size={scale(20)}
-                color={
-                  disabled
-                    ? textDisabled
-                    : error
-                      ? inputErrorColor
-                      : textPrimary
-                }
-              />
+              <Eye size={scale(20)} color={iconColor} />
             )}
           </TouchableOpacity>
         )}
@@ -191,7 +219,7 @@ const InputOne: React.FC<InputOneProps> = ({
   );
 };
 
-export default InputOne;
+export default React.memo(InputOne);
 
 const styles = StyleSheet.create({
   container: {

package/src/components/Loader/Loader.tsx

@@ -5,13 +5,13 @@ interface LoaderProps {
   color?: string;
 }
 
-export const Loader: React.FC<LoaderProps> = ({ color }) => {
+export const Loader: React.FC<LoaderProps> = React.memo(({ color }) => {
   return (
     <View style={styles.root}>
       <ActivityIndicator size="large" color={color} />
     </View>
   );
-};
+});
 
 const styles = StyleSheet.create({
   root: {

package/src/components/Logo/Logo.tsx

@@ -2,7 +2,7 @@
  * @author Naresh Dhamu
  * @lastModified Sun 08 Jun 2025 at 03:23 PM
  */
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   Image,
   View,
@@ -49,29 +49,50 @@ export const Logo: React.FC<ILogoProps> = ({
   } = useSplashCache({
     logoUrl: logoUri,
   });
-  const finalSource = logoPath
-    ? {
-        uri: logoPath.startsWith('file://') ? logoPath : `file://${logoPath}`,
-      }
-    : logoUri
-      ? { uri: logoUri }
-      : fallbackUri
-        ? { uri: fallbackUri }
-        : undefined;
+  const finalSource = useMemo(
+    () =>
+      logoPath
+        ? {
+            uri: logoPath.startsWith('file://')
+              ? logoPath
+              : `file://${logoPath}`,
+          }
+        : logoUri
+          ? { uri: logoUri }
+          : fallbackUri
+            ? { uri: fallbackUri }
+            : undefined,
+    [logoPath, logoUri, fallbackUri]
+  );
+
+  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]
+  );
 
   if (!finalSource && !isLoading) {
     return null;
   }
   return (
-    <View
-      style={[
-        {
-          alignItems: 'center',
-          justifyContent: 'center',
-        },
-        containerStyle,
-      ]}
-    >
+    <View style={containerStyleMemo}>
       {isLoading || isSplashLoading ? (
         <SkeletonPlaceholder
           backgroundColor={appliedTheme.colors.skeletonBaseColor}
@@ -91,14 +112,7 @@ export const Logo: React.FC<ILogoProps> = ({
           <Image
             source={finalSource}
             resizeMode={resizeMode}
-            style={[
-              {
-                width: moderateScale(width),
-                height: moderateScale(height),
-                ...(aspectRatio ? { aspectRatio } : {}),
-              },
-              imageStyle,
-            ]}
+            style={imageStyleMemo}
             onError={() => {
               return null;
             }}
@@ -108,3 +122,5 @@ export const Logo: React.FC<ILogoProps> = ({
     </View>
   );
 };
+
+export default React.memo(Logo);

package/src/components/Search/One.tsx

@@ -22,6 +22,7 @@ import SearchCard, {
   type SearchCardSkeletonConfig,
 } from './components/SearchCard';
 import { useDebounce } from '../../hooks/useDebounce';
+import { useSkeletonItems } from '../../hooks/useSkeletonItems';
 import type { IGetSectionData, ISectionItem, MoreFetchData } from '../../types';
 import type { ThemeOverride } from '../../theme/themes';
 import { useRecentSearchesStore } from '../../store/RecentSearchesStore';
@@ -118,10 +119,7 @@ const SearchBar: React.FC<SearchOneProps> = ({
     [events]
   );
 
-  const skeletonItems = useMemo(
-    () => Array(skeletonCardCount).fill({}),
-    [skeletonCardCount]
-  );
+  const skeletonItems = useSkeletonItems(skeletonCardCount);
 
   const showRecent =
     !recentSearchesLoading && search.trim() === '' && recentSearches.length > 0;

package/src/components/Search/components/SearchCard.tsx

@@ -15,6 +15,8 @@ import type { ThemeOverride } from '../../../theme/themes';
 import { ThumbnailCard } from '../../Content/Card/components/ThumbnailCard';
 import { Text } from '../../Text';
 import { RFValue } from 'react-native-responsive-fontsize';
+import { useSafePressHandler } from '../../../hooks/useSafeCallback';
+import { useSkeletonItems } from '../../../hooks/useSkeletonItems';
 
 /**
  * Configuration for SearchCard skeleton rendering.
@@ -64,6 +66,11 @@ const SearchCard: React.FC<SearchCardProps> = ({
   const { items = 5, textWidths = ['80%', '100%', '70%', '50%', '40%'] } =
     skeletonConfig ?? {};
 
+  const skeletonItems = useSkeletonItems(items);
+
+  // Memoize handlePress before any early returns
+  const handlePress = useSafePressHandler(onPress);
+
   const renderSkeleton = () => (
     <SkeletonPlaceholder
       backgroundColor={skeletonBaseColor}
@@ -86,7 +93,7 @@ const SearchCard: React.FC<SearchCardProps> = ({
             },
           ]}
         >
-          {Array.from({ length: items }).map((_, lineIdx) => {
+          {skeletonItems.map((_, lineIdx) => {
             const rawWidth = textWidths[lineIdx] ?? '90%';
             const resolvedWidth =
               typeof rawWidth === 'string'
@@ -108,12 +115,19 @@ const SearchCard: React.FC<SearchCardProps> = ({
     </SkeletonPlaceholder>
   );
 
+  const pressableStyle = ({ pressed }: { pressed: boolean }) => [
+    styles.card,
+    {
+      opacity: pressed ? 0.9 : 1,
+    },
+  ];
+
   if (isLoading) return renderSkeleton();
 
   return (
     <Pressable
-      onPress={onPress}
-      style={({ pressed }) => [styles.card, { opacity: pressed ? 0.9 : 1 }]}
+      onPress={handlePress}
+      style={pressableStyle}
       accessibilityRole="button"
       accessibilityLabel={title}
       disabled={!onPress}
@@ -124,7 +138,6 @@ const SearchCard: React.FC<SearchCardProps> = ({
           theme={appliedTheme}
           borderRadius={scale(8)}
           resizeMode={FastImage.resizeMode.cover}
-          wrapperStyle={styles.thumbnail}
           isLoading={false}
         />
       </View>
@@ -158,7 +171,7 @@ const SearchCard: React.FC<SearchCardProps> = ({
   );
 };
 
-export default SearchCard;
+export default React.memo(SearchCard);
 
 const styles = StyleSheet.create({
   card: {
@@ -174,14 +187,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  thumbnail: {
-    width: '100%',
-    height: '100%',
-    borderRadius: scale(8),
-    position: 'absolute',
-    top: 0,
-    left: 0,
-  },
+
   textContainer: {
     flex: 1,
     height: verticalScale(80),