@zezosoft/zezo-ott-react-native-ui-kit 1.1.0 → 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/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,195 @@
+import React, { useCallback, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  View,
+  ScrollView,
+  Dimensions,
+} from 'react-native';
+import type { ViewStyle } from 'react-native';
+import Modal from 'react-native-modal';
+import { X } from 'lucide-react-native';
+import { moderateScale, verticalScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import Animated from 'react-native-reanimated';
+import type { ITheme } from '../../theme';
+import { Text } from '../Text';
+
+const { height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+export interface BottomSheetProps {
+  theme: ITheme;
+  children: ReactNode;
+  title?: string;
+  height?: string | number;
+  showCloseButton?: boolean;
+  visible?: boolean;
+  onClose?: () => void;
+  handleIndicatorStyle?: ViewStyle;
+  scrollable?: boolean;
+}
+
+const BottomSheet: React.FC<BottomSheetProps> = ({
+  theme,
+  children,
+  title,
+  height,
+  showCloseButton = true,
+  visible = false,
+  onClose,
+  handleIndicatorStyle,
+  scrollable = true,
+}) => {
+  const calculatedHeight = useMemo(() => {
+    if (!height) return SCREEN_HEIGHT * 0.75;
+
+    if (typeof height === 'number') return height;
+
+    if (typeof height === 'string' && height.includes('%')) {
+      const num = parseFloat(height);
+      if (!isNaN(num)) {
+        return (num / 100) * SCREEN_HEIGHT;
+      }
+    }
+
+    return SCREEN_HEIGHT * 0.75;
+  }, [height]);
+
+  const handleClosePress = useCallback(() => {
+    onClose?.();
+  }, [onClose]);
+
+  const renderHeader = useMemo(() => {
+    if (title) {
+      return (
+        <Text style={[styles.title, { color: theme.colors.textPrimary }]}>
+          {title}
+        </Text>
+      );
+    }
+    return null;
+  }, [title, theme.colors.textPrimary]);
+
+  const renderCloseButton = useMemo(() => {
+    if (!showCloseButton) return null;
+    return (
+      <TouchableOpacity
+        onPress={handleClosePress}
+        style={[
+          styles.closeButtonWrapper,
+          { backgroundColor: theme.colors.button },
+        ]}
+        activeOpacity={0.8}
+      >
+        <X size={moderateScale(16)} color={theme.colors.buttonText} />
+      </TouchableOpacity>
+    );
+  }, [showCloseButton, handleClosePress, theme.colors]);
+
+  return (
+    <Modal
+      isVisible={visible}
+      onBackdropPress={handleClosePress}
+      onSwipeComplete={handleClosePress}
+      style={styles.modal}
+      backdropOpacity={0.45}
+      // swipeDirection="down"
+      animationIn="slideInUp"
+      animationOut="slideOutDown"
+      animationInTiming={260}
+      animationOutTiming={220}
+      useNativeDriver
+      useNativeDriverForBackdrop
+      propagateSwipe
+      avoidKeyboard
+      statusBarTranslucent={false}
+      hardwareAccelerated
+    >
+      <Animated.View
+        style={[
+          styles.bottomSheetContainer,
+          {
+            backgroundColor: theme.colors.background,
+            maxHeight: calculatedHeight,
+          },
+        ]}
+      >
+        {renderCloseButton}
+        <View
+          style={[
+            styles.handleIndicator,
+            { backgroundColor: theme.colors.button },
+            handleIndicatorStyle,
+          ]}
+        />
+
+        {scrollable ? (
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            bounces={false}
+            nestedScrollEnabled
+            keyboardShouldPersistTaps="handled"
+            contentContainerStyle={styles.scrollContent}
+          >
+            {renderHeader}
+            {children}
+          </ScrollView>
+        ) : (
+          <View style={styles.viewContent}>
+            {renderHeader}
+            {children}
+          </View>
+        )}
+      </Animated.View>
+    </Modal>
+  );
+};
+
+export default BottomSheet;
+
+const styles = StyleSheet.create({
+  modal: {
+    justifyContent: 'flex-end',
+    margin: 0,
+  },
+  bottomSheetContainer: {
+    borderTopLeftRadius: moderateScale(22),
+    borderTopRightRadius: moderateScale(22),
+    overflow: 'hidden',
+    position: 'relative',
+    flex: 1,
+  },
+  handleIndicator: {
+    width: moderateScale(45),
+    height: verticalScale(4),
+    borderRadius: moderateScale(3),
+    alignSelf: 'center',
+    marginVertical: verticalScale(10),
+  },
+  scrollContent: {
+    flex: 1,
+    paddingBottom: verticalScale(30),
+    paddingHorizontal: moderateScale(12),
+  },
+  viewContent: {
+    paddingBottom: verticalScale(10),
+    paddingHorizontal: moderateScale(12),
+    flex: 1,
+  },
+  closeButtonWrapper: {
+    position: 'absolute',
+    top: verticalScale(10),
+    right: moderateScale(14),
+    borderRadius: moderateScale(18),
+    padding: moderateScale(6),
+    zIndex: 1000,
+    elevation: 10,
+  },
+  title: {
+    fontSize: RFValue(16),
+    fontWeight: '700',
+    textAlign: 'center',
+    marginBottom: verticalScale(15),
+  },
+});

package/src/components/BottomSheet/index.ts

@@ -0,0 +1,2 @@
+export { default as BottomSheet } from './BottomSheet';
+export type { BottomSheetProps } from './BottomSheet';

package/src/components/Button/BackBtn.tsx

@@ -2,13 +2,14 @@
  * @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,
   Alert,
   Platform,
   type ViewStyle,
+  type TextStyle,
   type StyleProp,
 } from 'react-native';
 import { ArrowLeft } from 'lucide-react-native';
@@ -17,6 +18,7 @@ import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { BlurView } from '@react-native-community/blur';
 import type { ThemeOverride } from '../../theme/themes';
+import { Text } from '../Text';
 
 type BackBtnProps = {
   size?: number;
@@ -25,6 +27,8 @@ type BackBtnProps = {
   style?: StyleProp<ViewStyle>;
   theme?: ThemeOverride;
   enableBlur?: boolean;
+  label?: string;
+  textStyle?: StyleProp<TextStyle>;
 };
 
 const BackBtn: React.FC<BackBtnProps> = ({
@@ -34,11 +38,13 @@ const BackBtn: React.FC<BackBtnProps> = ({
   style,
   theme,
   enableBlur = false,
+  label,
+  textStyle,
 }) => {
   const insets = useSafeAreaInsets();
   const { theme: appliedTheme } = useInternalTheme(theme);
 
-  const handlePress = () => {
+  const handlePress = useCallback(() => {
     if (onPress) {
       onPress();
     } else {
@@ -47,29 +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 shouldRenderBlur = useMemo(
+    () => enableBlur && hasBackground,
+    [enableBlur, hasBackground]
+  );
 
-  const calculatedTop = Platform.select({
-    ios: insets.top > 20 ? insets.top - verticalScale(5) : insets.top,
-    android: insets.top + verticalScale(5),
-    default: insets.top,
-  });
+  const hasLabel = useMemo(() => !!label, [label]);
 
-  const flattenedStyle = StyleSheet.flatten(style) || {};
-  const hasBackground = !!flattenedStyle.backgroundColor;
+  const iconColor = useMemo(
+    () => color || appliedTheme.colors.textPrimary,
+    [color, appliedTheme.colors.textPrimary]
+  );
 
-  const shouldRenderBlur = enableBlur && hasBackground;
+  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,
-        !hasTopInStyle && { top: calculatedTop },
-        style,
-      ]}
+      style={containerStyle}
       onPress={handlePress}
     >
       {shouldRenderBlur && (
@@ -77,20 +126,21 @@ 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={textStyleMemo} color={iconColor}>
+          {label}
+        </Text>
+      )}
     </TouchableOpacity>
   );
 };
 
-export default BackBtn;
+export default React.memo(BackBtn);
 
 const styles = StyleSheet.create({
   container: {
@@ -102,4 +152,17 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     overflow: 'hidden',
   },
+  containerWithText: {
+    flexDirection: 'row',
+    borderRadius: scale(20),
+    paddingHorizontal: scale(12),
+  },
+  text: {
+    fontSize: scale(14),
+    fontWeight: '600',
+    marginLeft: scale(8),
+    textShadowColor: 'rgba(0, 0, 0, 0.75)',
+    textShadowOffset: { width: 0, height: 1 },
+    textShadowRadius: 3,
+  },
 });

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%',