react-native-ensys-camera-x 1.0.7

package/src/CameraPreview.tsx

@@ -0,0 +1,352 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  Text,
+  ActivityIndicator,
+  Dimensions,
+} from 'react-native';
+
+import { openCameraPicker } from './index';
+import type { CameraAsset, CameraThemeConfig } from './types';
+import {
+  ResponsivePreviewContainer,
+  calcPreviewDimensions,
+} from './ResponsivePreviewContainer';
+import { useCameraTheme } from './theme';
+import { useCameraLocalization } from './localization';
+import { RenderIcon } from './icons';
+
+interface CameraPreviewProps {
+  onCapture: (assets: CameraAsset[]) => void;
+  onClose: () => void;
+  /** Override aspect ratio; defaults to WhatsApp-like 720:1165 */
+  aspectRatio?: number;
+  /** Maximum number of items that can be selected. 0 or undefined = unlimited. */
+  selectionLimit?: number;
+}
+
+/** Stable camera-preview aspect ratio locked once for the lifetime of this
+ *  component instance.  All captures share this value so every asset arrives
+ *  at EditingScreen with identical framing metadata. */
+const LOCKED_ASPECT_RATIO = (() => {
+  const { width: w, height: h } = Dimensions.get('window');
+  const { aspectRatio } = calcPreviewDimensions(w, h);
+  return aspectRatio;
+})();
+
+export const CameraPreview: React.FC<CameraPreviewProps> = ({
+  onCapture,
+  onClose,
+  aspectRatio = LOCKED_ASPECT_RATIO,
+  selectionLimit,
+}) => {
+  const [isCapturing, setIsCapturing] = useState(false);
+  const [showNativeCamera, setShowNativeCamera] = useState(false);
+  const [mediaType, setMediaType] = useState<'photo' | 'video'>('photo');
+  const theme = useCameraTheme();
+  const { t, isRtl, writingDirectionStyle } = useCameraLocalization();
+
+  // Every render recomputes preview dimensions from the STABLE locked
+  // aspect ratio; no stale per-capture state can drift.
+  const { width: previewW, height: previewH } = useMemo(() => {
+    const { width: screenW, height: screenH } = Dimensions.get('window');
+    return calcPreviewDimensions(screenW, screenH);
+  }, []);
+
+  const handleCaptureFromNativeCamera = useCallback(async () => {
+    try {
+      setIsCapturing(true);
+      setShowNativeCamera(true);
+
+      const result = await openCameraPicker({
+        mediaTypes: mediaType,
+        selectionLimit: selectionLimit ?? 0,
+      });
+
+      if (!result.cancelled && result.assets && result.assets.length > 0) {
+        const capturedWidth = previewW;
+        const capturedHeight = previewH;
+
+        const processedAssets: CameraAsset[] = result.assets.map((asset) => ({
+          id: asset.id || Date.now().toString(),
+          uri: asset.uri || '',
+          type: asset.type || 'photo',
+          width: capturedWidth,
+          height: capturedHeight,
+          fileName:
+            asset.fileName ||
+            (asset.type === 'video'
+              ? `video_${Date.now()}.mp4`
+              : `photo_${Date.now()}.jpg`),
+          dateTaken: asset.dateTaken || Date.now(),
+          // Use the native capture's previewAspectRatio (set by CustomCameraActivity)
+          // which reflects the actual aspect ratio used during capture (including FULL mode),
+          // rather than the fixed LOCKED_ASPECT_RATIO. This ensures the editor uses the
+          // exact same framing as the capture screen.
+          previewAspectRatio: asset.previewAspectRatio ?? aspectRatio,
+          needsThumbnail: asset.needsThumbnail || false,
+          mimeType: asset.mimeType,
+          caption: asset.caption,
+          duration: asset.duration,
+          size: asset.size,
+          location: asset.location,
+        }));
+
+        onCapture(processedAssets);
+      }
+    } catch (error) {
+      console.error('Error capturing from native camera:', error);
+    } finally {
+      setIsCapturing(false);
+      setShowNativeCamera(false);
+    }
+  }, [previewW, previewH, mediaType, onCapture, aspectRatio]);
+
+  const cameraPreviewTheme = theme.components.cameraPreview;
+  const styles = useMemo(() => createCameraPreviewStyles(theme), [theme]);
+
+  if (showNativeCamera) {
+    return (
+      <ResponsivePreviewContainer width={previewW} height={previewH}>
+        <ActivityIndicator size="large" color={cameraPreviewTheme.loadingText} />
+        <Text
+          style={[
+            styles.loadingText,
+            writingDirectionStyle,
+            { color: cameraPreviewTheme.loadingText },
+          ]}
+        >
+          {t('openingCamera')}
+        </Text>
+      </ResponsivePreviewContainer>
+    );
+  }
+
+  return (
+    <ResponsivePreviewContainer width={previewW} height={previewH}>
+      {/* Camera preview placeholder – shows what the capture area looks like */}
+      <View
+        style={[
+          styles.cameraPlaceholder,
+          { backgroundColor: cameraPreviewTheme.background },
+        ]}
+      >
+        <View
+          style={[styles.cameraOverlay, { backgroundColor: cameraPreviewTheme.overlay }]}
+        />
+        <Text
+          style={[
+            styles.cameraPlaceholderText,
+            writingDirectionStyle,
+            { color: cameraPreviewTheme.placeholderText },
+          ]}
+        >
+          {mediaType === 'photo' ? t('photoMode') : t('videoMode')}
+        </Text>
+        <View
+          style={[
+            styles.modeIndicator,
+            isRtl ? styles.modeIndicatorRtl : styles.modeIndicatorLtr,
+            { backgroundColor: cameraPreviewTheme.modeIndicatorBackground },
+          ]}
+        >
+          <View style={styles.modeIndicatorContent}>
+            <RenderIcon
+              name={mediaType === 'photo' ? 'camera' : 'video'}
+              size={cameraPreviewTheme.modeIndicatorIconSize}
+              color={cameraPreviewTheme.modeIndicatorText}
+            />
+          </View>
+        </View>
+      </View>
+
+      {/* Controls */}
+      <View
+        style={[
+          styles.controlsContainer,
+          { flexDirection: isRtl ? 'row-reverse' : 'row' },
+        ]}
+      >
+        <TouchableOpacity
+          style={[
+            styles.controlButton,
+            { backgroundColor: cameraPreviewTheme.controlButtonBackground },
+          ]}
+          disabled={isCapturing}
+          accessibilityLabel={t('toggleFlashlight')}
+        >
+          <RenderIcon name="flash_auto" size={cameraPreviewTheme.controlIconSize} color={cameraPreviewTheme.controlButtonText} />
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={[
+            styles.captureButton,
+            { backgroundColor: cameraPreviewTheme.captureButtonBackground },
+            isCapturing && styles.captureButtonDisabled,
+          ]}
+          onPress={handleCaptureFromNativeCamera}
+          disabled={isCapturing}
+          accessibilityLabel={
+            mediaType === 'photo' ? t('photoMode') : t('videoMode')
+          }
+        >
+          {isCapturing ? (
+            <ActivityIndicator color={cameraPreviewTheme.controlButtonText} size="small" />
+          ) : (
+            <View
+              style={[
+                styles.captureButtonInner,
+                { borderColor: cameraPreviewTheme.captureButtonInnerBorder },
+              ]}
+            />
+          )}
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={[
+            styles.controlButton,
+            { backgroundColor: cameraPreviewTheme.controlButtonBackground },
+          ]}
+          disabled={isCapturing}
+          accessibilityLabel={
+            mediaType === 'photo' ? t('videoMode') : t('photoMode')
+          }
+          onPress={() =>
+            setMediaType(mediaType === 'photo' ? 'video' : 'photo')
+          }
+        >
+          <RenderIcon
+            name={mediaType === 'photo' ? 'video' : 'camera'}
+            size={cameraPreviewTheme.controlIconSize}
+            color={cameraPreviewTheme.controlButtonText}
+          />
+        </TouchableOpacity>
+      </View>
+
+      {/* Close button */}
+      <TouchableOpacity
+        style={[
+          styles.closeButton,
+          isRtl ? styles.closeButtonRtl : styles.closeButtonLtr,
+          { backgroundColor: cameraPreviewTheme.closeButtonBackground },
+        ]}
+        onPress={onClose}
+        accessibilityLabel={t('close')}
+      >
+        <RenderIcon name="close" size={cameraPreviewTheme.closeIconSize} color={cameraPreviewTheme.closeButtonText} />
+      </TouchableOpacity>
+    </ResponsivePreviewContainer>
+  );
+};
+
+/**
+ * Builds every CameraPreview style from the active theme. Components never
+ * hardcode sizing/typography/spacing — they all flow from `theme.components.cameraPreview`,
+ * `theme.typography`, and `theme.spacing` (see src/types.ts / src/theme.tsx).
+ */
+const createCameraPreviewStyles = (theme: CameraThemeConfig) => {
+  const cp = theme.components.cameraPreview;
+  const spacing = theme.spacing;
+  const weights = theme.typography.fontWeights;
+
+  return StyleSheet.create({
+    cameraPlaceholder: {
+      width: '100%',
+      height: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'relative',
+    },
+    cameraOverlay: {
+      ...StyleSheet.absoluteFill,
+    },
+    cameraPlaceholderText: {
+      fontSize: cp.placeholderTextSize,
+      fontWeight: weights.semibold,
+      marginBottom: spacing.sm,
+      zIndex: 1,
+    },
+    loadingText: {
+      marginTop: spacing.lg,
+      fontSize: cp.loadingTextSize,
+    },
+    controlsContainer: {
+      position: 'absolute',
+      bottom: cp.controlsBottomInset,
+      left: 0,
+      right: 0,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingHorizontal: cp.controlsPaddingHorizontal,
+    },
+    controlButton: {
+      width: cp.controlButtonSize,
+      height: cp.controlButtonSize,
+      borderRadius: cp.controlButtonSize / 2,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    controlButtonText: {
+      fontSize: cp.controlButtonTextSize,
+    },
+    captureButton: {
+      width: cp.captureButtonSize,
+      height: cp.captureButtonSize,
+      borderRadius: cp.captureButtonSize / 2,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    captureButtonDisabled: {
+      opacity: cp.disabledOpacity,
+    },
+    captureButtonInner: {
+      width: cp.captureButtonInnerSize,
+      height: cp.captureButtonInnerSize,
+      borderRadius: cp.captureButtonInnerSize / 2,
+      borderWidth: cp.captureButtonBorderWidth,
+    },
+    closeButton: {
+      position: 'absolute',
+      top: cp.topInset,
+      width: cp.closeButtonSize,
+      height: cp.closeButtonSize,
+      borderRadius: cp.closeButtonSize / 2,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    closeButtonLtr: {
+      right: cp.sideInset,
+    },
+    closeButtonRtl: {
+      left: cp.sideInset,
+    },
+    closeButtonText: {
+      fontSize: cp.closeButtonTextSize,
+      fontWeight: weights.bold,
+    },
+    modeIndicator: {
+      position: 'absolute',
+      top: cp.topInset,
+      paddingHorizontal: cp.modeIndicatorPaddingHorizontal,
+      paddingVertical: cp.modeIndicatorPaddingVertical,
+      borderRadius: cp.modeIndicatorRadius,
+      zIndex: 1,
+    },
+    modeIndicatorLtr: {
+      left: cp.sideInset,
+    },
+    modeIndicatorRtl: {
+      right: cp.sideInset,
+    },
+    modeIndicatorContent: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    modeIndicatorText: {
+      fontSize: cp.modeIndicatorTextSize,
+    },
+  });
+};

package/src/NativeAnimatedImageView.tsx

@@ -0,0 +1,71 @@
+import type { FC } from 'react';
+import {
+  Image,
+  type ImageStyle,
+  type StyleProp,
+  type ViewProps,
+} from 'react-native';
+import {
+  resolveNativeComponent,
+  toImageSourceUri,
+} from './nativeComponentSupport';
+
+export interface NativeAnimatedImageViewProps extends Omit<ViewProps, 'style'> {
+  /** Image source uri (content://, file:// or a plain path). */
+  src?: string;
+  /**
+   * Whether this view is the currently-visible page in a paging viewer. Only the active page
+   * animates; deactivating stops the animation on its current frame so an off-screen or
+   * recycled cell never burns CPU animating something the user cannot see.
+   *
+   * Optional — defaults to true natively, so a single-image consumer that never sets it just
+   * animates.
+   */
+  active?: boolean;
+  /** How the frame is scaled into the view. Defaults to `contain`. */
+  resizeMode?: 'contain' | 'cover';
+  /**
+   * Typed as an image style rather than a view style: both the native view and the `<Image>`
+   * fallback render image content, and the fallback would not accept a plain ViewStyle.
+   */
+  style?: StyleProp<ImageStyle>;
+}
+
+// Native animated-image view (Android). ReactNative's own <Image> renders only a static first
+// frame for a GIF on Android unless the host app adds Fresco's animated-gif decoder — a
+// dependency every consumer of this library would otherwise have to add themselves.
+const NativeAnimatedImageComponent =
+  resolveNativeComponent<NativeAnimatedImageViewProps>(
+    'NativeAnimatedImageView'
+  );
+
+/** True when native animated-image playback is available on this platform/build. */
+export const isNativeAnimatedImageAvailable = (): boolean =>
+  NativeAnimatedImageComponent !== null;
+
+/**
+ * Renders an animated image (GIF), animating where the platform supports it.
+ *
+ * The fallback is a plain `<Image>` rather than an empty view: iOS animates GIFs through
+ * `<Image>` natively, and on any other target the still frame is the correct degraded result.
+ * Either way the underlying file is only ever read, never rewritten.
+ */
+export const NativeAnimatedImageView: FC<NativeAnimatedImageViewProps> = (
+  props
+) => {
+  if (NativeAnimatedImageComponent) {
+    return <NativeAnimatedImageComponent {...props} />;
+  }
+  // ViewProps is a superset of ImageProps, so forward only the props an <Image> accepts
+  // rather than spreading the rest.
+  return (
+    <Image
+      style={props.style}
+      testID={props.testID}
+      // Bare filesystem paths — what the media database stores — need a scheme before Fresco
+      // will load them at all.
+      source={{ uri: toImageSourceUri(props.src) }}
+      resizeMode={props.resizeMode ?? 'contain'}
+    />
+  );
+};

package/src/NativeAudioPlayerView.tsx

@@ -0,0 +1,39 @@
+import type { ComponentType, FC } from 'react';
+import {
+  Platform,
+  requireNativeComponent,
+  View,
+  type ViewProps,
+} from 'react-native';
+
+export interface NativeAudioPlayerViewProps extends ViewProps {
+  /** Audio source uri (content:// or file://). */
+  src?: string;
+  /** False while the audio page is off-screen — force-pauses playback. */
+  active?: boolean;
+  /** Accent color for the play button and scrubber, e.g. "#4A56FF". */
+  tintColor?: string;
+}
+
+// Native (Android) audio transport built on MediaPlayer — play/pause, a scrubbable
+// progress bar and elapsed/total time, all drawn natively with no third-party
+// playback or preview library. Resolved lazily and platform-guarded so non-Android
+// targets (or an app without the native view registered) fall back to a plain view.
+let NativeAudioComponent: ComponentType<NativeAudioPlayerViewProps> | null =
+  null;
+if (Platform.OS === 'android') {
+  try {
+    NativeAudioComponent =
+      requireNativeComponent<NativeAudioPlayerViewProps>('CustomAudioPlayer');
+  } catch {
+    NativeAudioComponent = null;
+  }
+}
+
+export const NativeAudioPlayerView: FC<NativeAudioPlayerViewProps> = (props) => {
+  if (NativeAudioComponent) {
+    return <NativeAudioComponent {...props} />;
+  }
+  const { src, active, tintColor, ...rest } = props;
+  return <View {...rest} />;
+};

package/src/NativeBlurView.tsx

@@ -0,0 +1,40 @@
+import type { ComponentType, FC } from 'react';
+import {
+  Platform,
+  requireNativeComponent,
+  View,
+  type ViewProps,
+} from 'react-native';
+
+export interface NativeBlurViewProps extends ViewProps {
+  /** When true, snapshots + blurs the content behind it; when false, clears. */
+  active?: boolean;
+  /** Box-blur radius applied to the down-sampled snapshot (1–25). */
+  blurRadius?: number;
+  /** Snapshot down-sample divisor — higher is softer and cheaper (1–16). */
+  downsampleFactor?: number;
+}
+
+// The native blur is an Android-only capability (a pure-Kotlin snapshot blur, no
+// third-party library). It is resolved lazily and guarded by platform so iOS/web —
+// or an app where the native view is not registered — fall back to a plain view
+// instead of crashing. Callers overlay their own dim scrim, so the fallback simply
+// renders no blur.
+let NativeBlurComponent: ComponentType<NativeBlurViewProps> | null = null;
+if (Platform.OS === 'android') {
+  try {
+    NativeBlurComponent =
+      requireNativeComponent<NativeBlurViewProps>('CustomBlurBackground');
+  } catch {
+    NativeBlurComponent = null;
+  }
+}
+
+export const NativeBlurView: FC<NativeBlurViewProps> = (props) => {
+  if (NativeBlurComponent) {
+    return <NativeBlurComponent {...props} />;
+  }
+  // Graceful fallback: a plain (non-blurring) view so layout is unaffected.
+  const { active, blurRadius, downsampleFactor, ...rest } = props;
+  return <View {...rest} />;
+};