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

package/src/components/BlogView/BlogView.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo, useCallback } from 'react';
 import {
   ScrollView,
   StyleSheet,
@@ -53,7 +53,44 @@ export const BlogView: React.FC<BlogViewProps> = ({
 }) => {
   const { theme: appliedTheme, isDarkMode } = useInternalTheme(theme);
 
-  const renderFinalHeader = () => {
+  // Memoize markdown styles
+  const markdownStyles = useMemo(
+    () => getMarkdownStyles(appliedTheme, isDarkMode),
+    [appliedTheme, isDarkMode]
+  );
+
+  // Memoize header title style
+  const headerTitleStyle = useMemo(
+    () => ({
+      ...styles.headerTitle,
+      color: appliedTheme.colors.onBackground,
+    }),
+    [appliedTheme.colors.onBackground]
+  );
+
+  // Memoize empty text style
+  const emptyTextStyle = useMemo(
+    () => [styles.emptyText, { color: appliedTheme.colors.onSurfaceVariant }],
+    [appliedTheme.colors.onSurfaceVariant]
+  );
+
+  // Memoize container style
+  const containerStyleMemo = useMemo(
+    () => [styles.flex, { backgroundColor: appliedTheme.colors.background }],
+    [appliedTheme.colors.background]
+  );
+
+  // Memoize scroll content style
+  const scrollContentStyle = useMemo(
+    () => [
+      styles.container,
+      containerStyle,
+      { paddingBottom: scale(40), flexGrow: 1 },
+    ],
+    [containerStyle]
+  );
+
+  const renderFinalHeader = useCallback(() => {
     if (renderHeader) return renderHeader();
     if (headerComponent) return headerComponent;
     return (
@@ -63,15 +100,20 @@ export const BlogView: React.FC<BlogViewProps> = ({
         title={headerTitle}
         titleAlign="left"
         theme={theme}
-        titleStyle={{
-          ...styles.headerTitle,
-          color: appliedTheme.colors.onBackground,
-        }}
+        titleStyle={headerTitleStyle}
       />
     );
-  };
+  }, [
+    renderHeader,
+    headerComponent,
+    onBackPress,
+    onRightPress,
+    headerTitle,
+    theme,
+    headerTitleStyle,
+  ]);
 
-  const renderFinalContent = () => {
+  const renderFinalContent = useCallback(() => {
     if (isLoading) {
       return (
         <View style={styles.fullCenter}>
@@ -82,42 +124,34 @@ export const BlogView: React.FC<BlogViewProps> = ({
 
     if (renderContent) return renderContent();
     if (content) {
-      return (
-        <Markdown style={getMarkdownStyles(appliedTheme, isDarkMode)}>
-          {content}
-        </Markdown>
-      );
+      return <Markdown style={markdownStyles}>{content}</Markdown>;
     }
 
     if (renderEmpty) return renderEmpty();
 
     return (
       <View style={styles.center}>
-        <Text
-          style={[
-            styles.emptyText,
-            { color: appliedTheme.colors.onSurfaceVariant },
-          ]}
-        >
-          {emptyText}
-        </Text>
+        <Text style={emptyTextStyle}>{emptyText}</Text>
       </View>
     );
-  };
+  }, [
+    isLoading,
+    renderContent,
+    content,
+    markdownStyles,
+    renderEmpty,
+    emptyText,
+    emptyTextStyle,
+    appliedTheme.colors.primary,
+  ]);
 
   return (
-    <View
-      style={[styles.flex, { backgroundColor: appliedTheme.colors.background }]}
-    >
+    <View style={containerStyleMemo}>
       {renderFinalHeader()}
       {scrollable ? (
         <ScrollView
           style={styles.flex}
-          contentContainerStyle={[
-            styles.container,
-            containerStyle,
-            { paddingBottom: scale(40), flexGrow: 1 },
-          ]}
+          contentContainerStyle={scrollContentStyle}
           showsVerticalScrollIndicator={false}
           keyboardShouldPersistTaps="handled"
         >
@@ -132,6 +166,8 @@ export const BlogView: React.FC<BlogViewProps> = ({
   );
 };
 
+export default React.memo(BlogView);
+
 const getMarkdownStyles = (
   theme: ITheme,
   isDarkMode: boolean

package/src/components/Button/BackBtn.tsx

@@ -2,7 +2,7 @@
  * @author Naresh Dhamu
  * @lastModified Wed 02 Jul 2025 at 09:30 AM
  */
-import React from 'react';
+import React, { useMemo, useCallback } from 'react';
 import {
   TouchableOpacity,
   StyleSheet,
@@ -44,7 +44,7 @@ const BackBtn: React.FC<BackBtnProps> = ({
   const insets = useSafeAreaInsets();
   const { theme: appliedTheme } = useInternalTheme(theme);
 
-  const handlePress = () => {
+  const handlePress = useCallback(() => {
     if (onPress) {
       onPress();
     } else {
@@ -53,31 +53,72 @@ const BackBtn: React.FC<BackBtnProps> = ({
         'Please define the back action using onPress prop.'
       );
     }
-  };
+  }, [onPress]);
 
-  const hasTopInStyle = style && StyleSheet.flatten(style).top !== undefined;
+  const flattenedStyle = useMemo(
+    () => StyleSheet.flatten(style) || {},
+    [style]
+  );
+
+  const hasTopInStyle = useMemo(
+    () => style && flattenedStyle.top !== undefined,
+    [style, flattenedStyle.top]
+  );
+
+  const calculatedTop = useMemo(
+    () =>
+      Platform.select({
+        ios: insets.top > 20 ? insets.top - verticalScale(5) : insets.top,
+        android: insets.top + verticalScale(5),
+        default: insets.top,
+      }),
+    [insets.top]
+  );
+
+  const hasBackground = useMemo(
+    () => !!flattenedStyle.backgroundColor,
+    [flattenedStyle.backgroundColor]
+  );
 
-  const calculatedTop = Platform.select({
-    ios: insets.top > 20 ? insets.top - verticalScale(5) : insets.top,
-    android: insets.top + verticalScale(5),
-    default: insets.top,
-  });
+  const shouldRenderBlur = useMemo(
+    () => enableBlur && hasBackground,
+    [enableBlur, hasBackground]
+  );
 
-  const flattenedStyle = StyleSheet.flatten(style) || {};
-  const hasBackground = !!flattenedStyle.backgroundColor;
+  const hasLabel = useMemo(() => !!label, [label]);
 
-  const shouldRenderBlur = enableBlur && hasBackground;
-  const hasLabel = !!label;
+  const iconColor = useMemo(
+    () => color || appliedTheme.colors.textPrimary,
+    [color, appliedTheme.colors.textPrimary]
+  );
+
+  const containerStyle = useMemo(
+    () => [
+      styles.container,
+      hasLabel && styles.containerWithText,
+      !hasTopInStyle && { top: calculatedTop },
+      style,
+    ],
+    [hasLabel, hasTopInStyle, calculatedTop, style]
+  );
+
+  const textStyleMemo = useMemo(
+    () => [styles.text, { color: iconColor }, textStyle],
+    [iconColor, textStyle]
+  );
+
+  const blurFallbackColor = useMemo(
+    () =>
+      (typeof flattenedStyle.backgroundColor === 'string'
+        ? flattenedStyle.backgroundColor
+        : undefined) || String(appliedTheme.colors.backdrop),
+    [flattenedStyle.backgroundColor, appliedTheme.colors.backdrop]
+  );
 
   return (
     <TouchableOpacity
       activeOpacity={0.8}
-      style={[
-        styles.container,
-        hasLabel && styles.containerWithText,
-        !hasTopInStyle && { top: calculatedTop },
-        style,
-      ]}
+      style={containerStyle}
       onPress={handlePress}
     >
       {shouldRenderBlur && (
@@ -85,24 +126,13 @@ const BackBtn: React.FC<BackBtnProps> = ({
           style={StyleSheet.absoluteFill}
           blurType="light"
           blurAmount={10}
-          reducedTransparencyFallbackColor={
-            (typeof flattenedStyle.backgroundColor === 'string'
-              ? flattenedStyle.backgroundColor
-              : undefined) || String(appliedTheme.colors.backdrop)
-          }
+          reducedTransparencyFallbackColor={blurFallbackColor}
         />
       )}
 
-      <ArrowLeft size={size} color={color || appliedTheme.colors.textPrimary} />
+      <ArrowLeft size={size} color={iconColor} />
       {hasLabel && (
-        <Text
-          style={[
-            styles.text,
-            { color: color || appliedTheme.colors.textPrimary },
-            textStyle,
-          ]}
-          color={color || appliedTheme.colors.textPrimary}
-        >
+        <Text style={textStyleMemo} color={iconColor}>
           {label}
         </Text>
       )}
@@ -110,7 +140,7 @@ const BackBtn: React.FC<BackBtnProps> = ({
   );
 };
 
-export default BackBtn;
+export default React.memo(BackBtn);
 
 const styles = StyleSheet.create({
   container: {

package/src/components/Button/PrimaryBtn.tsx

@@ -3,7 +3,8 @@
  * @lastModified Tue 17 Jun 2025 at 10:45 AM
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useSafePressHandler } from '../../hooks/useSafeCallback';
 import {
   TouchableOpacity,
   ActivityIndicator,
@@ -41,17 +42,47 @@ export const PrimaryBtn: React.FC<PrimaryBtnProps> = ({
   theme,
 }) => {
   const { theme: appliedTheme } = useInternalTheme(theme);
-  const backgroundColor =
-    disabled || loading
-      ? appliedTheme.colors?.buttonDisabled
-      : appliedTheme.colors?.button;
+
+  const backgroundColor = useMemo(
+    () =>
+      disabled || loading
+        ? appliedTheme.colors?.buttonDisabled
+        : appliedTheme.colors?.button,
+    [
+      disabled,
+      loading,
+      appliedTheme.colors?.buttonDisabled,
+      appliedTheme.colors?.button,
+    ]
+  );
+
+  const buttonStyle = useMemo(
+    () => [styles.button, { backgroundColor }, containerStyle],
+    [backgroundColor, containerStyle]
+  );
+
+  const textStyle = useMemo(
+    () => [styles.text, { color: appliedTheme.colors.buttonText }, titleStyle],
+    [appliedTheme.colors.buttonText, titleStyle]
+  );
+
+  const loadingTextStyle = useMemo(
+    () => [
+      styles.text,
+      { color: appliedTheme.colors.buttonText, opacity: 0.75 },
+      titleStyle,
+    ],
+    [appliedTheme.colors.buttonText, titleStyle]
+  );
+
+  const handlePress = useSafePressHandler(onPress, disabled || loading);
 
   return (
     <TouchableOpacity
-      onPress={onPress}
+      onPress={handlePress}
       disabled={disabled || loading}
       activeOpacity={0.8}
-      style={[styles.button, { backgroundColor }, containerStyle]}
+      style={buttonStyle}
       accessibilityRole="button"
       accessibilityState={{ disabled: disabled || loading }}
     >
@@ -61,31 +92,17 @@ export const PrimaryBtn: React.FC<PrimaryBtnProps> = ({
             color={appliedTheme.colors.buttonText}
             style={{ marginRight: scale(8) }}
           />
-          <Text
-            style={[
-              styles.text,
-              { color: appliedTheme.colors.buttonText, opacity: 0.75 },
-              titleStyle,
-            ]}
-          >
-            {loadingText}
-          </Text>
+          <Text style={loadingTextStyle}>{loadingText}</Text>
         </View>
       ) : (
-        <Text
-          style={[
-            styles.text,
-            { color: appliedTheme.colors.buttonText },
-            titleStyle,
-          ]}
-        >
-          {title}
-        </Text>
+        <Text style={textStyle}>{title}</Text>
       )}
     </TouchableOpacity>
   );
 };
 
+export default React.memo(PrimaryBtn);
+
 const styles = StyleSheet.create({
   button: {
     width: '100%',

package/src/components/Button/SecondaryBtn.tsx

@@ -3,7 +3,8 @@
  * @lastModified Mon 06 Oct 2025 at 03:45 PM
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useSafePressHandler } from '../../hooks/useSafeCallback';
 import {
   TouchableOpacity,
   ActivityIndicator,
@@ -44,17 +45,46 @@ export const SecondaryBtn: React.FC<SecondaryBtnProps> = ({
 }) => {
   const { theme: appliedTheme } = useInternalTheme(theme);
 
-  const backgroundColor =
-    disabled || loading
-      ? appliedTheme.colors?.buttonDisabled
-      : appliedTheme.colors?.button;
+  const backgroundColor = useMemo(
+    () =>
+      disabled || loading
+        ? appliedTheme.colors?.buttonDisabled
+        : appliedTheme.colors?.button,
+    [
+      disabled,
+      loading,
+      appliedTheme.colors?.buttonDisabled,
+      appliedTheme.colors?.button,
+    ]
+  );
+
+  const buttonStyle = useMemo(
+    () => [styles.button, { backgroundColor }, containerStyle],
+    [backgroundColor, containerStyle]
+  );
+
+  const textStyle = useMemo(
+    () => [styles.text, { color: appliedTheme.colors.buttonText }, titleStyle],
+    [appliedTheme.colors.buttonText, titleStyle]
+  );
+
+  const loadingTextStyle = useMemo(
+    () => [
+      styles.text,
+      { color: appliedTheme.colors.buttonText, opacity: 0.75 },
+      titleStyle,
+    ],
+    [appliedTheme.colors.buttonText, titleStyle]
+  );
+
+  const handlePress = useSafePressHandler(onPress, disabled || loading);
 
   return (
     <TouchableOpacity
-      onPress={onPress}
+      onPress={handlePress}
       disabled={disabled || loading}
       activeOpacity={0.8}
-      style={[styles.button, { backgroundColor }, containerStyle]}
+      style={buttonStyle}
       accessibilityRole="button"
       accessibilityState={{ disabled: disabled || loading }}
     >
@@ -67,32 +97,18 @@ export const SecondaryBtn: React.FC<SecondaryBtnProps> = ({
               color={appliedTheme.colors.buttonText}
               style={{ marginRight: scale(6) }}
             />
-            <Text
-              style={[
-                styles.text,
-                { color: appliedTheme.colors.buttonText, opacity: 0.75 },
-                titleStyle,
-              ]}
-            >
-              {loadingText}
-            </Text>
+            <Text style={loadingTextStyle}>{loadingText}</Text>
           </>
         ) : (
-          <Text
-            style={[
-              styles.text,
-              { color: appliedTheme.colors.buttonText },
-              titleStyle,
-            ]}
-          >
-            {title}
-          </Text>
+          <Text style={textStyle}>{title}</Text>
         )}
       </View>
     </TouchableOpacity>
   );
 };
 
+export default React.memo(SecondaryBtn);
+
 const styles = StyleSheet.create({
   button: {
     width: '100%',

package/src/components/Button/TextButton.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useSafePressHandler } from '../../hooks/useSafeCallback';
 import {
   StyleSheet,
   Pressable,
@@ -39,25 +40,58 @@ const TextButton: React.FC<TextButtonProps> = ({
 }) => {
   const { theme } = useInternalTheme();
 
-  const alignSelfMap: Record<
-    'left' | 'center' | 'right',
-    ViewStyle['alignSelf']
-  > = {
-    left: 'flex-start',
-    center: 'center',
-    right: 'flex-end',
-  };
-  const alignSelf = alignSelfMap[align];
+  const alignSelfMap = useMemo<
+    Record<'left' | 'center' | 'right', ViewStyle['alignSelf']>
+  >(
+    () => ({
+      left: 'flex-start',
+      center: 'center',
+      right: 'flex-end',
+    }),
+    []
+  );
+
+  const alignSelf = useMemo(() => alignSelfMap[align], [alignSelfMap, align]);
+
+  const textStyle = useMemo<TextStyle>(
+    () => ({
+      textAlign: align,
+      textDecorationLine: underline ? 'underline' : 'none',
+      fontWeight: bold ? '700' : '400',
+    }),
+    [align, underline, bold]
+  );
+
+  const textColor = useMemo(
+    () => color || theme.colors.textPrimary,
+    [color, theme.colors.textPrimary]
+  );
+
+  const justifyContent = useMemo<ViewStyle['justifyContent']>(
+    () =>
+      align === 'left'
+        ? 'flex-start'
+        : align === 'right'
+          ? 'flex-end'
+          : 'center',
+    [align]
+  );
+
+  const rowStyle = useMemo<ViewStyle[]>(
+    () => [styles.row, { justifyContent }],
+    [justifyContent]
+  );
+
+  const finalTextStyle = useMemo(
+    () => [styles.text, textStyle, style],
+    [textStyle, style]
+  );
 
-  const textStyle: TextStyle = {
-    textAlign: align,
-    textDecorationLine: underline ? 'underline' : 'none',
-    fontWeight: bold ? '700' : '400',
-  };
+  const handlePress = useSafePressHandler(onPress, disabled);
 
   return (
     <Pressable
-      onPress={onPress}
+      onPress={handlePress}
       disabled={disabled}
       accessibilityRole="button"
       accessibilityState={{ disabled }}
@@ -69,23 +103,11 @@ const TextButton: React.FC<TextButtonProps> = ({
         disabled && styles.disabled,
       ]}
     >
-      <View
-        style={[
-          styles.row,
-          {
-            justifyContent:
-              align === 'left'
-                ? 'flex-start'
-                : align === 'right'
-                  ? 'flex-end'
-                  : 'center',
-          },
-        ]}
-      >
+      <View style={rowStyle}>
         {leftIcon && <View style={styles.iconSpacing}>{leftIcon}</View>}
         <Text
-          color={color || theme.colors.textPrimary}
-          style={[styles.text, textStyle, style]}
+          color={textColor}
+          style={finalTextStyle}
           size={12}
           numberOfLines={1}
           allowFontScaling={false}
@@ -97,7 +119,7 @@ const TextButton: React.FC<TextButtonProps> = ({
   );
 };
 
-export default TextButton;
+export default React.memo(TextButton);
 
 const styles = StyleSheet.create({
   defaultContainer: {