@zezosoft/zezo-ott-react-native-ui-kit 0.1.0 → 1.0.0

package/src/components/Settings/AppSettings.tsx

@@ -0,0 +1,287 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 23 Jun 2025 at 11:22 AM
+ */
+
+import React, { useState, isValidElement, cloneElement, type FC, type ReactElement } from 'react';
+import { View, ScrollView, StyleSheet, Switch, TouchableOpacity, type ViewStyle, type TextStyle } from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { useTheme } from '../../theme';
+import DeviceInfo from 'react-native-device-info';
+import AppHeader from '../Headers/AppHeader';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import UserSection, { type UserInfo, type UserInfoTextStyle } from '../User/components/UserSection';
+import { Text } from '../Text';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import type { AppTheme } from '../../theme/themes';
+
+// ✅ Types
+interface ToggleMenuItem {
+  key: string;
+  icon?: React.ReactNode;
+  label: string;
+  isToggle: true;
+  toggleValue?: boolean;
+  onToggleChange?: (value: boolean) => void;
+}
+
+interface PressableMenuItem {
+  key: string;
+  icon?: React.ReactNode;
+  label: string;
+  isToggle?: false;
+  onPress: () => void;
+}
+
+type MenuItem = ToggleMenuItem | PressableMenuItem;
+
+interface MenuItemStyle {
+  container?: ViewStyle;
+  icon?: ViewStyle;
+  label?: TextStyle;
+}
+
+export type AppSettingsProps = {
+  title?: string;
+  titleAlign?: 'left' | 'center';
+  userInfo?: UserInfo;
+  menuItems: MenuItem[];
+  theme?: AppTheme;
+  isLoading?: boolean;
+  versionText?: string;
+  onBackPress?: () => void;
+  renderHeader?: () => React.ReactNode;
+  renderMenuItem?: (item: MenuItem) => React.ReactNode;
+  renderFooter?: () => React.ReactNode;
+  renderUserInfo?: (userInfo: UserInfo) => React.ReactNode;
+  avatarComponent?: React.ReactNode;
+  onMenuItemPress?: (item: MenuItem) => void;
+  skeletonProps?: Partial<React.ComponentProps<typeof SkeletonPlaceholder>>;
+  headerStyle?: ViewStyle;
+  userInfoTextStyle?: UserInfoTextStyle;
+  menuItemStyle?: MenuItemStyle;
+};
+
+// ✅ Type Guard
+const isToggleMenuItem = (item: MenuItem): item is ToggleMenuItem => {
+  return item.isToggle === true;
+};
+
+// ✅ Main Component
+export const AppSettings: FC<AppSettingsProps> = ({
+  title,
+  titleAlign = 'center',
+  userInfo,
+  menuItems,
+  theme,
+  isLoading = false,
+  versionText = `Version ${DeviceInfo.getVersion()}`,
+  onBackPress,
+  renderHeader,
+  renderMenuItem,
+  renderFooter,
+  renderUserInfo,
+  avatarComponent,
+  onMenuItemPress,
+  skeletonProps = {},
+  headerStyle,
+  userInfoTextStyle = {},
+  menuItemStyle = {}
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const insets = useSafeAreaInsets();
+  // ✅ State for toggle values
+  const [toggleStates, setToggleStates] = useState<Record<string, boolean>>(
+    menuItems.reduce<Record<string, boolean>>((acc, item) => {
+      if (isToggleMenuItem(item)) {
+        acc[item.key] = item.toggleValue ?? false;
+      }
+      return acc;
+    }, {})
+  );
+
+  // ✅ Handle toggle change
+  const handleToggleChange = (key: string, value: boolean) => {
+    setToggleStates((prev) => ({ ...prev, [key]: value }));
+    const item = menuItems.find((i) => i.key === key) as ToggleMenuItem | undefined;
+    item?.onToggleChange?.(value);
+  };
+  const renderIconWithColor = (icon: React.ReactNode, color: string): React.ReactNode => {
+    if (isValidElement(icon)) {
+      return cloneElement(icon as ReactElement<any>, { color });
+    }
+    return icon;
+  };
+  const renderToggleMenuItem = (item: ToggleMenuItem) => {
+    return (
+      <View
+        key={item.key}
+        style={[
+          styles.menuItem,
+          {
+            backgroundColor: appliedTheme.colors.surfaceDisabled,
+            borderColor: appliedTheme.colors.border
+          },
+          menuItemStyle.container
+        ]}
+      >
+        <View style={styles.menuItemContent}>
+          {item.icon && (
+            <View style={[styles.menuIcon, menuItemStyle.icon]}>
+              {renderIconWithColor(item.icon, appliedTheme.colors.textPrimary)}
+            </View>
+          )}
+          <Text
+            numberOfLines={1}
+            style={[styles.menuLabel, { color: appliedTheme.colors.onBackground }, menuItemStyle.label]}
+          >
+            {item.label}
+          </Text>
+        </View>
+        <Switch
+          trackColor={{
+            false: appliedTheme.colors.switchTrackColorDisabled,
+            true: appliedTheme.colors.switchTrackColor
+          }}
+          thumbColor={
+            toggleStates[item.key] ? appliedTheme.colors.switchThumbColor : appliedTheme.colors.switchThumbColorDisabled
+          }
+          value={toggleStates[item.key]}
+          onValueChange={(value) => handleToggleChange(item.key, value)}
+          style={styles.switchStyle}
+        />
+      </View>
+    );
+  };
+
+  const renderPressableMenuItem = (item: PressableMenuItem) => {
+    return (
+      <TouchableOpacity
+        key={item.key}
+        activeOpacity={0.6}
+        onPress={() => {
+          item.onPress?.();
+          onMenuItemPress?.(item);
+        }}
+        style={[
+          styles.menuItem,
+          {
+            backgroundColor: appliedTheme.colors.surfaceDisabled,
+            borderColor: appliedTheme.colors.border
+          },
+          menuItemStyle.container
+        ]}
+      >
+        {item.icon && (
+          <View style={[styles.menuIcon, menuItemStyle.icon]}>
+            {renderIconWithColor(item.icon, appliedTheme.colors.textPrimary)}
+          </View>
+        )}
+        <Text
+          numberOfLines={1}
+          style={[styles.menuLabel, { color: appliedTheme.colors.onBackground }, menuItemStyle.label]}
+        >
+          {item.label}
+        </Text>
+      </TouchableOpacity>
+    );
+  };
+
+  const renderMenuItemDefault = (item: MenuItem) => {
+    return isToggleMenuItem(item) ? renderToggleMenuItem(item) : renderPressableMenuItem(item);
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: appliedTheme.colors.background }]}>
+      {(renderHeader || title || onBackPress) &&
+        (renderHeader ? (
+          renderHeader()
+        ) : (
+          <AppHeader
+            style={headerStyle}
+            title={title || 'Settings'}
+            titleAlign={titleAlign}
+            onBackPress={onBackPress}
+            theme={appliedTheme}
+          />
+        ))}
+      <ScrollView
+        contentContainerStyle={[styles.scrollContent, { paddingBottom: verticalScale(40) + insets.bottom }]}
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+      >
+        {userInfo && (
+          <UserSection
+            theme={appliedTheme}
+            userInfo={userInfo}
+            avatarComponent={avatarComponent}
+            isLoading={isLoading}
+            renderUserInfo={renderUserInfo}
+            skeletonProps={skeletonProps}
+            userInfoTextStyle={userInfoTextStyle}
+          />
+        )}
+        <View style={styles.menuList}>
+          {menuItems.map((item) =>
+            renderMenuItem ? (
+              <React.Fragment key={item.key}>{renderMenuItem(item)}</React.Fragment>
+            ) : (
+              renderMenuItemDefault(item)
+            )
+          )}
+        </View>
+        {renderFooter?.()}
+        <View style={styles.versionContainer}>
+          <Text style={[styles.versionText, { color: appliedTheme.colors.onSurface }]}>{versionText}</Text>
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+// ✅ Styles
+const styles = StyleSheet.create({
+  container: { flex: 1 } as ViewStyle,
+  scrollContent: {
+    paddingHorizontal: scale(12)
+  },
+  menuList: {
+    marginBottom: verticalScale(16)
+  } as ViewStyle,
+  menuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: scale(1),
+    paddingVertical: verticalScale(10),
+    paddingHorizontal: scale(12),
+    borderRadius: moderateScale(8),
+    marginBottom: verticalScale(10),
+    position: 'relative'
+  } as ViewStyle,
+  menuIcon: {
+    marginRight: scale(10),
+    alignItems: 'center',
+    justifyContent: 'center'
+  } as ViewStyle,
+  menuLabel: {
+    flex: 1,
+    fontSize: moderateScale(14),
+    fontWeight: '500'
+  } as TextStyle,
+  menuItemContent: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center'
+  } as ViewStyle,
+  switchStyle: {
+    transform: [{ scaleX: 1 }, { scaleY: 1 }]
+  } as ViewStyle,
+  versionContainer: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  } as ViewStyle,
+  versionText: {
+    fontSize: moderateScale(12),
+    opacity: 0.6
+  } as TextStyle
+});

package/src/components/Settings/index.ts

@@ -0,0 +1 @@
+export * from './AppSettings';

package/src/components/SplashScreen/SplashScreen.tsx

@@ -0,0 +1,131 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Fri 13 Jun 2025 at 09:13 AM
+ */
+
+import React, { useEffect, useMemo, useCallback } from 'react';
+import SplashImage from './components/SplashImage/SplashImage';
+import SplashVideo from './components/SplashVideo/SplashVideo';
+import SplashLottie from './components/SplashLottie/SplashLottie';
+import { useInitSplashCacheSync } from '../../hooks/useInitSplashCacheSync';
+import { BackgroundLayout } from '../BackgroundLayout/BackgroundLayout';
+import { ZezoUIProvider } from '../../theme/ThemeProvider';
+import type { ViewStyle } from 'react-native';
+import type { AppTheme } from '../../theme/themes';
+
+interface SplashScreenConfig {
+  source: string;
+  type?: 'image' | 'video' | 'lottie-animation';
+  width: number;
+  height: number;
+  isStatic?: boolean;
+  timeout?: number;
+  fullscreen?: boolean;
+  resizeMode?: 'cover' | 'contain' | 'stretch' | 'center';
+  backgroundColor?: string;
+  backgroundImage?: string;
+}
+
+interface SplashScreenProps {
+  splashScreenConfig: SplashScreenConfig;
+  gradientEnabled?: boolean;
+  innerContainerStyle?: ViewStyle;
+  onImageError?: (error: Error) => void;
+  onRedirect: () => void;
+  autoSwitchTheme?: boolean;
+  gradientSplit?: number;
+  theme?: AppTheme;
+}
+
+const DEFAULT_TIMEOUT = 5;
+
+export const SplashScreen: React.FC<SplashScreenProps> = ({
+  splashScreenConfig: {
+    source,
+    type = 'image',
+    width,
+    height,
+    isStatic = false,
+    timeout,
+    fullscreen = false,
+    resizeMode = 'contain',
+    backgroundColor,
+    backgroundImage
+  },
+  gradientEnabled = false,
+  innerContainerStyle,
+  onImageError,
+  onRedirect,
+  autoSwitchTheme = false,
+  gradientSplit = 0.42,
+  theme
+}) => {
+  const isRemote = useMemo(() => source.startsWith('http'), [source]);
+
+  const {
+    data: { localPathLogo }
+  } = useInitSplashCacheSync({
+    logoUrl: isRemote ? source : undefined,
+    backgroundUrl: backgroundImage
+  });
+
+  const actualSource = isRemote && localPathLogo ? localPathLogo : source;
+  const effectiveTimeout = timeout ?? (type === 'image' || isStatic ? DEFAULT_TIMEOUT : undefined);
+
+  const handleRedirect = useCallback(() => {
+    try {
+      onRedirect();
+    } catch (error) {
+      console.error('[SplashScreen] Redirect failed:', error);
+    }
+  }, [onRedirect]);
+
+  useEffect(() => {
+    if (effectiveTimeout) {
+      const timer = setTimeout(handleRedirect, effectiveTimeout * 1000);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [effectiveTimeout, handleRedirect]);
+
+  const commonProps = useMemo(
+    () => ({
+      source: actualSource as any,
+      localSource: actualSource,
+      width,
+      height,
+      fullscreen,
+      resizeMode: resizeMode as any
+    }),
+    [actualSource, width, height, fullscreen, resizeMode]
+  );
+
+  const renderSplash = useCallback(() => {
+    switch (type) {
+      case 'video':
+        return <SplashVideo {...commonProps} onEnd={effectiveTimeout ? undefined : handleRedirect} />;
+      case 'lottie-animation':
+        return <SplashLottie {...commonProps} onAnimationFinish={effectiveTimeout ? undefined : handleRedirect} />;
+      case 'image':
+        return <SplashImage {...commonProps} />;
+      default:
+        console.warn(`[SplashScreen] Unsupported type: ${type}`);
+        return <SplashImage {...commonProps} />;
+    }
+  }, [type, commonProps, effectiveTimeout, handleRedirect]);
+  return (
+    <ZezoUIProvider theme={theme} autoSwitchTheme={autoSwitchTheme}>
+      <BackgroundLayout
+        backgroundImage={backgroundImage}
+        backgroundColor={backgroundColor}
+        resizeMode="cover"
+        gradientEnabled={gradientEnabled}
+        innerContainerStyle={innerContainerStyle}
+        onImageError={onImageError}
+        gradientSplit={gradientSplit}
+      >
+        {renderSplash()}
+      </BackgroundLayout>
+    </ZezoUIProvider>
+  );
+};

package/src/components/SplashScreen/components/SplashImage/SplashImage.tsx

@@ -0,0 +1,84 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 09 Jun 2025 at 05:30 PM
+ */
+
+import React, { useState, useMemo } from 'react';
+import FastImage from 'react-native-fast-image';
+import { ActivityIndicator, View, StyleSheet } from 'react-native';
+import Display from '../../../../utils/Display';
+
+type SplashImageProps = {
+  localSource: string;
+  source?: string;
+  width: number;
+  height: number;
+  fullscreen: boolean;
+  resizeMode?: 'cover' | 'contain' | 'stretch' | 'center';
+  backgroundColor?: string;
+};
+
+const SplashImage: React.FC<SplashImageProps> = ({
+  fullscreen,
+  height,
+  localSource,
+  resizeMode = 'contain',
+  width,
+  source
+}) => {
+  const [isLoading, setIsLoading] = useState(!!source); // Only show loader for remote images
+
+  // Memoize image styles to prevent unnecessary recalculations
+  const imageStyles = useMemo(
+    () => ({
+      width: fullscreen ? Display.fullWidth : width,
+      height: fullscreen ? Display.fullHeight : height,
+      flex: 1
+    }),
+    [fullscreen, width, height]
+  );
+
+  const handleLoadEnd = useMemo(() => (source ? () => setIsLoading(false) : undefined), [source]);
+
+  if (source) {
+    return (
+      <View style={styles.container}>
+        {isLoading && <ActivityIndicator size="large" style={styles.loader} />}
+        <FastImage
+          source={{
+            uri: source.startsWith('file://') ? source : `file://${source}`
+          }}
+          onLoadEnd={handleLoadEnd}
+          style={imageStyles}
+          resizeMode={resizeMode}
+          onError={() => setIsLoading(false)}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <FastImage
+      source={{
+        uri: localSource.startsWith('file://') ? localSource : `file://${localSource}`
+      }}
+      style={imageStyles}
+      resizeMode={resizeMode}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: Display.fullWidth,
+    height: Display.fullHeight,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  loader: {
+    position: 'absolute'
+  }
+});
+
+export default React.memo(SplashImage);

package/src/components/SplashScreen/components/SplashLottie/SplashLottie.tsx

@@ -0,0 +1,83 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Thu 12 Jun 2025 at 09:22 AM
+ */
+import React, { useMemo } from 'react';
+import LottieView from 'lottie-react-native';
+import { StyleSheet } from 'react-native';
+import Display from '../../../../utils/Display';
+import PlatformSelector from '../../../../utils/PlatformSelector';
+
+type ResizeMode = 'cover' | 'contain' | 'center';
+
+interface IProps {
+  localSource: string;
+  width: number;
+  height: number;
+  fullscreen: boolean;
+  resizeMode?: ResizeMode;
+  onAnimationFinish?: () => void;
+}
+
+const SplashLottie: React.FC<IProps> = ({
+  fullscreen,
+  height,
+  localSource,
+  resizeMode = 'contain',
+  width,
+  onAnimationFinish
+}) => {
+  // Memoize the source configuration
+  const source = useMemo(() => {
+    if (!localSource) {
+      console.warn('SplashLottie: localSource is empty');
+      return null;
+    }
+
+    return PlatformSelector.isAndroid()
+      ? { uri: localSource }
+      : {
+          uri: localSource.startsWith('file://') ? localSource : `file://${localSource}`
+        };
+  }, [localSource]);
+
+  // Memoize the style object
+  const lottieStyle = useMemo(
+    () => ({
+      ...styles.base,
+      width: fullscreen ? Display.fullWidth : width,
+      height: fullscreen ? Display.fullHeight : height,
+      ...(fullscreen ? styles.fullscreen : {})
+    }),
+    [fullscreen, width, height]
+  );
+
+  // Early return if invalid source
+  if (!source) {
+    return null;
+  }
+
+  return (
+    <LottieView
+      source={source}
+      autoPlay
+      loop={false}
+      onAnimationFinish={onAnimationFinish}
+      style={lottieStyle}
+      resizeMode={resizeMode}
+      hardwareAccelerationAndroid
+      cacheComposition
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  base: {
+    alignSelf: 'center'
+  },
+  fullscreen: {
+    flex: 1
+  }
+});
+
+export default React.memo(SplashLottie);

package/src/components/SplashScreen/components/SplashVideo/SplashVideo.tsx

@@ -0,0 +1,94 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 09 Jun 2025 at 04:29 PM
+ */
+import React, { useRef, useMemo, useCallback } from 'react';
+import Video, { type VideoRef } from 'react-native-video';
+import Display from '../../../../utils/Display';
+
+interface IProps {
+  localSource: string;
+  width: number;
+  height: number;
+  fullscreen: boolean;
+  resizeMode?: 'cover' | 'contain' | 'stretch' | 'none';
+  onEnd?: () => void;
+  onLoadStart?: () => void;
+  onLoaded?: (data: any) => void;
+  onError?: (error: any) => void;
+}
+
+const SplashVideo: React.FC<IProps> = ({
+  fullscreen,
+  height,
+  localSource,
+  resizeMode = 'cover',
+  width,
+  onEnd,
+  onLoadStart,
+  onLoaded,
+  onError
+}) => {
+  const videoRef = useRef<VideoRef>(null);
+
+  // Memoize video style to prevent unnecessary recalculations
+  const videoStyle = useMemo(
+    () => ({
+      width: fullscreen ? Display.fullWidth : width,
+      height: fullscreen ? Display.fullHeight : height
+    }),
+    [fullscreen, width, height]
+  );
+
+  // Memoize video source to prevent unnecessary recreations
+  const videoSource = useMemo(
+    () => ({
+      uri: `file://${localSource}`
+    }),
+    [localSource]
+  );
+
+  // Optimize event handlers with useCallback
+  const handleLoadStart = useCallback(() => {
+    onLoadStart?.();
+  }, [onLoadStart]);
+
+  const handleLoad = useCallback(
+    (data: any) => {
+      onLoaded?.(data);
+    },
+    [onLoaded]
+  );
+
+  const handleError = useCallback(
+    (e: any) => {
+      // More robust error handling
+      const error = e?.error?.message || e?.message || e?.error || e || 'Unknown video error';
+      console.error('Video playback error:', error);
+      onError?.(error);
+    },
+    [onError]
+  );
+
+  return (
+    <Video
+      ref={videoRef}
+      source={videoSource}
+      style={videoStyle}
+      resizeMode={resizeMode}
+      paused={false}
+      onLoadStart={handleLoadStart}
+      onLoad={handleLoad}
+      onError={handleError}
+      onEnd={onEnd}
+      // Additional performance optimizations
+      ignoreSilentSwitch="obey"
+      playInBackground={false}
+      playWhenInactive={false}
+      allowsExternalPlayback={false}
+      automaticallyWaitsToMinimizeStalling={true}
+    />
+  );
+};
+
+export default React.memo(SplashVideo);

package/src/components/SplashScreen/index.ts

@@ -0,0 +1,6 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 09 Jun 2025 at 04:04 PM
+ */
+
+export * from './SplashScreen';