@zezosoft/zezo-ott-react-native-ui-kit 1.1.0 → 1.1.2

package/src/components/ContentView/components/TrailerButton.tsx

@@ -3,6 +3,7 @@
  * @lastModified Wed 02 Jul 2025 at 03:39 PM
  */
 
+import React, { useMemo } from 'react';
 import { PlayCircle } from 'lucide-react-native';
 import {
   TouchableOpacity,
@@ -13,6 +14,7 @@ import {
 } from 'react-native';
 import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
 import { Text } from '../../Text';
+import { useSafePressHandler } from '../../../hooks/useSafeCallback';
 
 interface Props {
   onPress?: (event: GestureResponderEvent) => void;
@@ -24,28 +26,39 @@ interface Props {
   style?: ViewStyle;
 }
 
-export const TrailerButton = ({
-  onPress,
-  label = 'Watch Trailer',
-  iconSize = scale(18),
-  color = '#000',
-  backgroundColor = '#FFD700',
-  textStyle,
-  style,
-}: Props) => {
-  return (
-    <TouchableOpacity
-      onPress={onPress}
-      activeOpacity={0.8}
-      style={[styles.button, { backgroundColor }, style]}
-    >
-      <PlayCircle size={iconSize} color={color} />
-      <Text style={[styles.text, textStyle]} color={color}>
-        {label}
-      </Text>
-    </TouchableOpacity>
-  );
-};
+export const TrailerButton = React.memo(
+  ({
+    onPress,
+    label = 'Watch Trailer',
+    iconSize = scale(18),
+    color = '#000',
+    backgroundColor = '#FFD700',
+    textStyle,
+    style,
+  }: Props) => {
+    const buttonStyle = useMemo(
+      () => [styles.button, { backgroundColor }, style],
+      [backgroundColor, style]
+    );
+
+    const textStyleMemo = useMemo(() => [styles.text, textStyle], [textStyle]);
+
+    const handlePress = useSafePressHandler(onPress);
+
+    return (
+      <TouchableOpacity
+        onPress={handlePress}
+        activeOpacity={0.8}
+        style={buttonStyle}
+      >
+        <PlayCircle size={iconSize} color={color} />
+        <Text style={textStyleMemo} color={color}>
+          {label}
+        </Text>
+      </TouchableOpacity>
+    );
+  }
+);
 
 const styles = StyleSheet.create({
   button: {

package/src/components/Fallbacks/NoContentFallback.tsx

@@ -3,7 +3,7 @@
  * @lastModified Sat 25 Oct 2025 at 11:15 AM
  */
 
-import { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
   TouchableOpacity,
   StyleSheet,
@@ -32,115 +32,120 @@ export type NoContentFallbackProps = {
   style?: StyleProp<ViewStyle>;
 };
 
-export const NoContentFallback = ({
-  message = 'No content available right now.\nPlease check back later.',
-  retryText = 'Try Again',
-  onRetry,
-  isLoading = false,
-  theme,
-  style,
-}: NoContentFallbackProps) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-  const scaleValue = useSharedValue(1);
+export const NoContentFallback = React.memo(
+  ({
+    message = 'No content available right now.\nPlease check back later.',
+    retryText = 'Try Again',
+    onRetry,
+    theme,
+    style,
+    isLoading = false,
+  }: NoContentFallbackProps) => {
+    const { theme: appliedTheme } = useInternalTheme(theme);
+    const scaleValue = useSharedValue(1);
 
-  const handlePressIn = useCallback(() => {
-    if (isLoading) return; // disable press animation during loading
-    scaleValue.value = withSpring(0.95, { damping: 15, stiffness: 200 });
-  }, [scaleValue, isLoading]);
+    const handlePressIn = useCallback(() => {
+      if (isLoading) return; // disable press animation during loading
+      scaleValue.value = withSpring(0.95, { damping: 15, stiffness: 200 });
+    }, [scaleValue, isLoading]);
 
-  const handlePressOut = useCallback(() => {
-    if (isLoading) return;
-    scaleValue.value = withSpring(1, { damping: 15, stiffness: 200 });
-  }, [scaleValue, isLoading]);
+    const handlePressOut = useCallback(() => {
+      if (isLoading) return;
+      scaleValue.value = withSpring(1, { damping: 15, stiffness: 200 });
+    }, [scaleValue, isLoading]);
 
-  const animatedButtonStyle = useAnimatedStyle(() => ({
-    transform: [{ scale: scaleValue.value }],
-  }));
+    const animatedButtonStyle = useAnimatedStyle(() => ({
+      transform: [{ scale: scaleValue.value }],
+    }));
 
-  return (
-    <Animated.View
-      style={[styles.container, style]}
-      accessibilityLabel="No content available"
-      accessibilityHint="Check back later or try again"
-    >
-      <AlertCircle
-        size={RFValue(63)}
-        color={
-          appliedTheme?.colors?.textPrimary ??
-          appliedTheme?.colors?.textSecondary ??
-          '#999'
-        }
-        style={{ marginBottom: scale(20) }}
-      />
+    const iconColor = useMemo(
+      () => appliedTheme?.colors?.textSecondary ?? '#999',
+      [appliedTheme?.colors?.textSecondary]
+    );
 
-      <Text
-        style={[styles.message, { color: appliedTheme.colors.textSecondary }]}
+    const messageStyle = useMemo(
+      () => [styles.message, { color: appliedTheme.colors.textSecondary }],
+      [appliedTheme.colors.textSecondary]
+    );
+
+    const retryButtonStyle = useMemo(
+      () => [
+        styles.retryButton,
+        {
+          backgroundColor: isLoading
+            ? appliedTheme.colors.primary
+            : appliedTheme.colors.primary,
+          opacity: isLoading ? 0.8 : 1,
+        },
+      ],
+      [isLoading, appliedTheme.colors.primary]
+    );
+
+    const retryTextStyle = useMemo(
+      () => [styles.retryText, { color: appliedTheme.colors.onPrimary }],
+      [appliedTheme.colors.onPrimary]
+    );
+
+    const handleRetry = useCallback(() => {
+      if (!isLoading && onRetry) {
+        onRetry();
+      }
+    }, [isLoading, onRetry]);
+
+    return (
+      <Animated.View
+        style={[styles.container, style]}
+        accessibilityLabel="No content available"
+        accessibilityHint="Check back later or try again"
       >
-        {message}
-      </Text>
+        <AlertCircle
+          size={RFValue(63)}
+          color={iconColor}
+          style={{ marginBottom: scale(20) }}
+        />
+
+        <Text style={messageStyle}>{message}</Text>
 
-      {onRetry && (
-        <TouchableOpacity
-          onPress={!isLoading ? onRetry : undefined}
-          onPressIn={handlePressIn}
-          onPressOut={handlePressOut}
-          activeOpacity={0.7}
-          disabled={isLoading}
-          style={[
-            styles.retryButton,
-            {
-              backgroundColor: isLoading
-                ? appliedTheme.colors.surfaceDisabled
-                : appliedTheme.colors.primary,
-              borderColor: appliedTheme.colors.outline,
-              opacity: isLoading ? 0.8 : 1,
-            },
-          ]}
-          accessibilityLabel={retryText}
-          accessibilityRole="button"
-        >
-          <Animated.View
-            style={[
-              animatedButtonStyle,
-              {
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'center',
-              },
-            ]}
+        {onRetry && (
+          <TouchableOpacity
+            onPress={handleRetry}
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
+            activeOpacity={0.7}
+            disabled={isLoading}
+            style={retryButtonStyle}
+            accessibilityLabel={retryText}
+            accessibilityRole="button"
           >
-            {isLoading ? (
-              <>
-                <ActivityIndicator
-                  size="small"
-                  color={appliedTheme.colors.onPrimary}
-                  style={{ marginRight: scale(8) }}
-                />
-                <Text
-                  style={[
-                    styles.retryText,
-                    { color: appliedTheme.colors.onPrimary },
-                  ]}
-                >
-                  Loading...
-                </Text>
-              </>
-            ) : (
-              <Text
-                style={[
-                  styles.retryText,
-                  { color: appliedTheme.colors.onPrimary },
-                ]}
-              >
-                {retryText}
-              </Text>
-            )}
-          </Animated.View>
-        </TouchableOpacity>
-      )}
-    </Animated.View>
-  );
-};
+            <Animated.View
+              style={[
+                animatedButtonStyle,
+                {
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                },
+              ]}
+            >
+              {isLoading ? (
+                <>
+                  <ActivityIndicator
+                    size="small"
+                    color={appliedTheme.colors.onPrimary}
+                    style={{ marginRight: scale(8) }}
+                  />
+                  <Text style={retryTextStyle}>Loading...</Text>
+                </>
+              ) : (
+                <Text style={retryTextStyle}>{retryText}</Text>
+              )}
+            </Animated.View>
+          </TouchableOpacity>
+        )}
+      </Animated.View>
+    );
+  }
+);
 
 const styles = StyleSheet.create({
   container: {
@@ -161,7 +166,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: scale(18),
     paddingVertical: verticalScale(10),
     borderRadius: scale(8),
-    borderWidth: scale(1),
     alignItems: 'center',
   },
   retryText: {

package/src/components/Fallbacks/NotFoundFallback.tsx

@@ -3,7 +3,7 @@
  * @lastModified Tue 01 Jul 2025 at 02:28 PM
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { scale } from 'react-native-size-matters';
 import { Button } from '../Button';
@@ -24,9 +24,9 @@ interface NotFoundFallbackProps {
   iconColor?: string;
 }
 
-export const NotFoundFallback: React.FC<NotFoundFallbackProps> = ({
+const NotFoundFallbackComponent: React.FC<NotFoundFallbackProps> = ({
   title = 'Content Not Found',
-  subtitle = 'We couldn’t find anything to show here. Please check back later.',
+  subtitle = "We couldn't find anything to show here. Please check back later.",
   content,
   onPressBack,
   backButtonText = 'Go Back',
@@ -35,13 +35,19 @@ export const NotFoundFallback: React.FC<NotFoundFallbackProps> = ({
   iconColor,
 }) => {
   const { theme: appliedTheme } = useInternalTheme(theme);
+
+  const finalIconColor = useMemo(
+    () => iconColor ?? appliedTheme?.colors?.textSecondary ?? '#999',
+    [iconColor, appliedTheme?.colors?.textSecondary]
+  );
+
   if (content) return <>{content}</>;
 
   return (
     <View style={styles.container}>
       <AlertCircle
         size={iconSize}
-        color={iconColor ?? appliedTheme?.colors?.textSecondary ?? '#999'}
+        color={finalIconColor}
         style={{ marginBottom: scale(20) }}
       />
 
@@ -63,6 +69,8 @@ export const NotFoundFallback: React.FC<NotFoundFallbackProps> = ({
   );
 };
 
+export const NotFoundFallback = React.memo(NotFoundFallbackComponent);
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

package/src/components/Headers/AppHeader.tsx

@@ -2,7 +2,7 @@
  * @author Naresh Dhamu
  * @lastModified Sat 21 Jun 2025 at 02:52 PM
  */
-import React from 'react';
+import React, { useMemo, useCallback } from 'react';
 import {
   View,
   StyleSheet,
@@ -41,18 +41,47 @@ const AppHeader: React.FC<AppHeaderProps> = ({
 }) => {
   const { theme: appliedTheme } = useInternalTheme(theme);
 
+  const headerStyle = useMemo(
+    () => [
+      styles.header,
+      { backgroundColor: appliedTheme.colors.background },
+      style,
+    ],
+    [appliedTheme.colors.background, style]
+  );
+
+  const titleWrapperStyle = useMemo(
+    () => [
+      styles.titleWrapper,
+      titleAlign === 'center' ? styles.centered : styles.leftAligned,
+    ],
+    [titleAlign]
+  );
+
+  const titleTextStyle = useMemo(
+    () => [
+      { color: appliedTheme.colors.onBackground },
+      !onBackPress && { ...titleStyle },
+      titleStyle,
+      styles.title,
+    ],
+    [appliedTheme.colors.onBackground, onBackPress, titleStyle]
+  );
+
+  const handleBackPress = useCallback(() => {
+    onBackPress?.();
+  }, [onBackPress]);
+
+  const handleRightPress = useCallback(() => {
+    onRightPress?.();
+  }, [onRightPress]);
+
   return (
-    <View
-      style={[
-        styles.header,
-        { backgroundColor: appliedTheme.colors.background },
-        style,
-      ]}
-    >
+    <View style={headerStyle}>
       {/* Left icon */}
       {onBackPress && (
         <TouchableOpacity
-          onPress={onBackPress}
+          onPress={handleBackPress}
           activeOpacity={0.7}
           style={styles.iconButton}
         >
@@ -61,21 +90,8 @@ const AppHeader: React.FC<AppHeaderProps> = ({
       )}
 
       {/* Title */}
-      <View
-        style={[
-          styles.titleWrapper,
-          titleAlign === 'center' ? styles.centered : styles.leftAligned,
-        ]}
-      >
-        <Text
-          numberOfLines={1}
-          style={[
-            { color: appliedTheme.colors.onBackground },
-            !onBackPress && { ...titleStyle },
-            titleStyle,
-            styles.title,
-          ]}
-        >
+      <View style={titleWrapperStyle}>
+        <Text numberOfLines={1} style={titleTextStyle}>
           {title}
         </Text>
       </View>
@@ -83,7 +99,7 @@ const AppHeader: React.FC<AppHeaderProps> = ({
       {/* Right icon */}
       {rightIcon && onRightPress ? (
         <TouchableOpacity
-          onPress={onRightPress}
+          onPress={handleRightPress}
           activeOpacity={0.7}
           style={styles.iconButton}
         >
@@ -96,7 +112,7 @@ const AppHeader: React.FC<AppHeaderProps> = ({
   );
 };
 
-export default AppHeader;
+export default React.memo(AppHeader);
 
 const styles = StyleSheet.create({
   header: {

package/src/components/Headers/Three.tsx

@@ -2,7 +2,7 @@
  * @author Naresh Dhamu
  * @lastModified Fri 13 Jun 2025 at 11:10 AM
  */
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Logo } from '../Logo/Logo';
@@ -23,13 +23,17 @@ const HeaderThree: React.FC<HeaderThreeProps> = ({
   isLoading,
 }) => {
   const { theme: appliedTheme } = useInternalTheme(theme);
+
+  const headerStyle = useMemo(
+    () => [
+      styles.headerContainer,
+      { backgroundColor: appliedTheme.colors.background },
+    ],
+    [appliedTheme.colors.background]
+  );
+
   return (
-    <View
-      style={[
-        styles.headerContainer,
-        { backgroundColor: appliedTheme.colors.background },
-      ]}
-    >
+    <View style={headerStyle}>
       <View style={styles.leftContainer}>
         <View style={styles.logo}>
           <Logo
@@ -45,7 +49,7 @@ const HeaderThree: React.FC<HeaderThreeProps> = ({
   );
 };
 
-export default HeaderThree;
+export default React.memo(HeaderThree);
 
 const styles = StyleSheet.create({
   headerContainer: {

package/src/components/Headers/Two.tsx

@@ -2,7 +2,7 @@
  * @author Naresh Dhamu
  * @lastModified Fri 13 Jun 2025 at 11:10 AM
  */
-import React from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { Platform, Pressable, StyleSheet, View } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Logo } from '../Logo/Logo';
@@ -26,20 +26,41 @@ const HeaderTwo: React.FC<HeaderTwoProps> = ({
 }) => {
   const { theme: appliedTheme } = useInternalTheme(theme);
 
-  const rippleColor = appliedTheme.colors.surfaceVariant + '33';
-  const pressedBackgroundColor = appliedTheme.colors.surfaceVariant;
+  const rippleColor = useMemo(
+    () => appliedTheme.colors.surfaceVariant + '33',
+    [appliedTheme.colors.surfaceVariant]
+  );
+
+  const pressedBackgroundColor = useMemo(
+    () => appliedTheme.colors.surfaceVariant,
+    [appliedTheme.colors.surfaceVariant]
+  );
+
+  const handleMenuPress = useCallback(() => {
+    onMenuPress?.();
+  }, [onMenuPress]);
+
+  const pressableStyle = useCallback(
+    ({ pressed }: { pressed: boolean }) => [
+      styles.iconPressable,
+      pressed && { backgroundColor: pressedBackgroundColor },
+    ],
+    [pressedBackgroundColor]
+  );
+
+  const MemoMenuIcon = useMemo(
+    () => <MenuIcon width={scale(28)} height={scale(28)} />,
+    [MenuIcon]
+  );
 
   return (
     <View style={styles.headerContainer}>
       <Pressable
-        onPress={onMenuPress}
+        onPress={handleMenuPress}
         android_ripple={{ color: rippleColor, borderless: true }}
-        style={({ pressed }) => [
-          styles.iconPressable,
-          pressed && { backgroundColor: pressedBackgroundColor },
-        ]}
+        style={pressableStyle}
       >
-        <MenuIcon width={scale(28)} height={scale(28)} />
+        {MemoMenuIcon}
       </Pressable>
       <View style={styles.logo}>
         <Logo
@@ -54,7 +75,7 @@ const HeaderTwo: React.FC<HeaderTwoProps> = ({
   );
 };
 
-export default HeaderTwo;
+export default React.memo(HeaderTwo);
 
 const styles = StyleSheet.create({
   headerContainer: {