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

package/src/components/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,204 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  View,
+  ScrollView,
+  Dimensions,
+} from 'react-native';
+import type { ViewStyle, StyleProp } 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 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?: StyleProp<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}
+      onBackButtonPress={handleClosePress}
+      onSwipeComplete={handleClosePress}
+      style={styles.modal}
+      backdropOpacity={0.45}
+      animationIn="slideInUp"
+      animationOut="slideOutDown"
+      animationInTiming={260}
+      animationOutTiming={220}
+      backdropTransitionInTiming={200}
+      backdropTransitionOutTiming={180}
+      useNativeDriver
+      useNativeDriverForBackdrop
+      propagateSwipe
+      avoidKeyboard
+      statusBarTranslucent={false}
+      hardwareAccelerated
+      hideModalContentWhileAnimating={false}
+      deviceHeight={SCREEN_HEIGHT}
+    >
+      <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>
+        )}
+      </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,
+    minHeight: 0,
+  },
+  handleIndicator: {
+    width: moderateScale(45),
+    height: verticalScale(4),
+    borderRadius: moderateScale(3),
+    alignSelf: 'center',
+    marginVertical: verticalScale(10),
+  },
+  scrollContent: {
+    flexGrow: 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/BottomSheetOne.tsx

@@ -0,0 +1,223 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  View,
+  ScrollView,
+  Dimensions,
+  ImageBackground,
+  Platform,
+} from 'react-native';
+import type { ViewStyle, StyleProp } 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 type { ITheme } from '../../theme';
+import { Text } from '../Text';
+import FastImage from 'react-native-fast-image';
+
+const { height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+export interface BottomSheetOneProps {
+  theme: ITheme;
+  children: ReactNode;
+  backgroundImage?: string;
+  title?: string;
+  height?: string | number;
+  showCloseButton?: boolean;
+  visible?: boolean;
+  onClose?: () => void;
+  handleIndicatorStyle?: StyleProp<ViewStyle>;
+  scrollable?: boolean;
+}
+
+const BottomSheetOne: React.FC<BottomSheetOneProps> = ({
+  theme,
+  children,
+  title,
+  height,
+  backgroundImage,
+  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.black },
+        ]}
+        activeOpacity={0.8}
+      >
+        <X size={moderateScale(22)} color={theme.colors.white} />
+      </TouchableOpacity>
+    );
+  }, [showCloseButton, handleClosePress, theme.colors]);
+
+  return (
+    <Modal
+      isVisible={visible}
+      onBackdropPress={handleClosePress}
+      onSwipeComplete={handleClosePress}
+      style={styles.modal}
+      backdropOpacity={0.45}
+      animationIn="slideInUp"
+      animationOut="slideOutDown"
+      animationInTiming={260}
+      animationOutTiming={220}
+      useNativeDriver
+      useNativeDriverForBackdrop
+      propagateSwipe
+      avoidKeyboard
+      statusBarTranslucent={false}
+      hardwareAccelerated
+    >
+      <View
+        style={[
+          styles.bottomSheetContainer,
+          {
+            backgroundColor: theme.colors.background,
+            height: calculatedHeight,
+          },
+        ]}
+      >
+        {backgroundImage && (
+          <>
+            <ImageBackground
+              source={{ uri: backgroundImage }}
+              style={[
+                StyleSheet.absoluteFill,
+                { backgroundColor: theme.colors.background },
+              ]}
+              resizeMode={FastImage.resizeMode.cover}
+              blurRadius={Platform.OS === 'ios' ? 15 : 25}
+            />
+            <View style={styles.backgroundOverlay} />
+          </>
+        )}
+
+        {renderCloseButton}
+
+        <View
+          style={[
+            styles.handleIndicator,
+            { backgroundColor: theme.colors.textSecondary },
+            handleIndicatorStyle,
+          ]}
+        />
+
+        {scrollable ? (
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            bounces={false}
+            nestedScrollEnabled
+            keyboardShouldPersistTaps="handled"
+            contentContainerStyle={styles.scrollContent}
+          >
+            {renderHeader}
+            {children}
+          </ScrollView>
+        ) : (
+          <View style={styles.viewContent}>
+            {renderHeader}
+            {children}
+          </View>
+        )}
+      </View>
+    </Modal>
+  );
+};
+
+export default BottomSheetOne;
+
+const styles = StyleSheet.create({
+  modal: {
+    justifyContent: 'flex-end',
+    margin: 0,
+  },
+  bottomSheetContainer: {
+    borderTopLeftRadius: moderateScale(22),
+    borderTopRightRadius: moderateScale(22),
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  backgroundOverlay: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: 'rgba(0,0,0,0.55)',
+  },
+
+  handleIndicator: {
+    width: moderateScale(60),
+    height: verticalScale(4),
+    borderRadius: moderateScale(30),
+    alignSelf: 'center',
+    marginVertical: verticalScale(10),
+  },
+  scrollContent: {
+    flexGrow: 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(30),
+    padding: moderateScale(10),
+    zIndex: 1000,
+    elevation: 10,
+  },
+  title: {
+    fontSize: RFValue(16),
+    fontWeight: '700',
+    textAlign: 'center',
+    marginBottom: verticalScale(15),
+  },
+});

package/src/components/BottomSheet/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+export { default as BottomSheet } from './BottomSheet';
+export { default as BottomSheetOne } from './BottomSheetOne';
+export type { BottomSheetProps } from './BottomSheet';
+export type { BottomSheetOneProps } from './BottomSheetOne';

package/src/components/Button/BackBtn.tsx

@@ -0,0 +1,149 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Tue 14 Jul 2026 at 3:45 PM
+ */
+
+import React, { useCallback } from 'react';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  Alert,
+  Platform,
+  type ViewStyle,
+  type TextStyle,
+  type StyleProp,
+} from 'react-native';
+import { ArrowLeft } from 'lucide-react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { BlurView } from '@react-native-community/blur';
+import { scale, verticalScale } from 'react-native-size-matters';
+
+import { useTheme } from '../../theme';
+import type { ThemeOverride } from '../../theme/themes';
+import { Text } from '../Text';
+
+type BackBtnProps = {
+  size?: number;
+  color?: string;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  theme?: ThemeOverride;
+  enableBlur?: boolean;
+  label?: string;
+  textStyle?: StyleProp<TextStyle>;
+};
+
+const BackBtn: React.FC<BackBtnProps> = ({
+  size = scale(30),
+  color,
+  onPress,
+  style,
+  theme,
+  enableBlur = false,
+  label,
+  textStyle,
+}) => {
+  const insets = useSafeAreaInsets();
+  const { theme: appliedTheme } = useTheme(theme);
+
+  const handlePress = useCallback(() => {
+    if (onPress) {
+      onPress();
+      return;
+    }
+
+    Alert.alert(
+      'Back Action Not Provided',
+      'Please define the back action using onPress prop.'
+    );
+  }, [onPress]);
+
+  const flattenedStyle = StyleSheet.flatten(style) || {};
+
+  const hasTopStyle = flattenedStyle.top !== undefined;
+
+  const top = Platform.select({
+    ios: insets.top > 20 ? insets.top - verticalScale(5) : insets.top,
+    android: insets.top + verticalScale(5),
+    default: insets.top,
+  });
+
+  const iconColor = color || appliedTheme.colors.textPrimary;
+
+  const shouldRenderBlur = enableBlur && !!flattenedStyle.backgroundColor;
+
+  const blurFallbackColor =
+    typeof flattenedStyle.backgroundColor === 'string'
+      ? flattenedStyle.backgroundColor
+      : String(appliedTheme.colors.backdrop);
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      onPress={handlePress}
+      hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+      style={[
+        styles.container,
+        {
+          width: size,
+          height: size,
+        },
+        label && styles.containerWithLabel,
+        !hasTopStyle && { top },
+        style,
+      ]}
+    >
+      {shouldRenderBlur && (
+        <BlurView
+          style={StyleSheet.absoluteFill}
+          blurType="light"
+          blurAmount={10}
+          reducedTransparencyFallbackColor={blurFallbackColor}
+        />
+      )}
+
+      <ArrowLeft size={size * 0.65} color={iconColor} />
+
+      {!!label && (
+        <Text
+          color={iconColor}
+          style={[styles.label, { color: iconColor }, textStyle]}
+        >
+          {label}
+        </Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+export default React.memo(BackBtn);
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: scale(13),
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: scale(100),
+    overflow: 'hidden',
+  },
+
+  containerWithLabel: {
+    width: undefined,
+    paddingHorizontal: scale(12),
+    flexDirection: 'row',
+    borderRadius: scale(20),
+  },
+
+  label: {
+    marginLeft: scale(8),
+    fontSize: scale(14),
+    fontWeight: '600',
+    textShadowColor: 'rgba(0,0,0,0.75)',
+    textShadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    textShadowRadius: 3,
+  },
+});