react-native-3d-model-carousel 0.4.0

package/lib/typescript/src/hooks/useModelLoader.d.ts

@@ -0,0 +1,2 @@
+export declare const useModelLoader: (modelPath: unknown) => unknown;
+//# sourceMappingURL=useModelLoader.d.ts.map

package/lib/typescript/src/hooks/useModelLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModelLoader.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useModelLoader.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,GAAI,WAAW,OAAO,YAIhD,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ModelCarousel } from './components/ModelCarousel';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC"}

package/lib/typescript/src/multiply.d.ts

@@ -0,0 +1,2 @@
+export declare function multiply(a: number, b: number): number;
+//# sourceMappingURL=multiply.d.ts.map

package/lib/typescript/src/multiply.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiply.d.ts","sourceRoot":"","sources":["../../../src/multiply.tsx"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAErD"}

package/package.json

@@ -0,0 +1,162 @@
+{
+  "name": "react-native-3d-model-carousel",
+  "version": "0.4.0",
+  "description": "A React Native library for rendering interactive 3D GLB models in a smooth, customizable carousel powered by Three.js",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-3d-model-carousel-example",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Tehseem110/react-native-3d-model-carousel.git"
+  },
+  "author": "Tehseem <tehseem010@gmail.com> (https://github.com/Tehseem110)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Tehseem110/react-native-3d-model-carousel/issues"
+  },
+  "homepage": "https://github.com/Tehseem110/react-native-3d-model-carousel#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^20.5.0",
+    "@eslint/compat": "^2.0.3",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^10.0.1",
+    "@jest/globals": "^30.0.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@release-it/conventional-changelog": "^10.0.6",
+    "@types/react": "^19.2.0",
+    "commitlint": "^20.5.0",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.5.5",
+    "jest": "^30.3.0",
+    "lefthook": "^2.1.4",
+    "prettier": "^3.8.1",
+    "react": "19.0.0",
+    "react-native": "0.79.6",
+    "react-native-builder-bob": "^0.41.0",
+    "release-it": "^19.2.4",
+    "turbo": "^2.8.21",
+    "typescript": "^6.0.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.60.0"
+  }
+}

package/src/components/ModelCarousel.tsx

@@ -0,0 +1,426 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import type { DimensionValue, StyleProp, ViewStyle } from 'react-native';
+import { useGLTF } from '@react-three/drei/native';
+import ModelViewer from './ModelViewer';
+
+export type ModelCarouselConfiguredItem = {
+  path: unknown;
+  scale?: number;
+  position?: number[];
+  cameraPosition?: number[];
+};
+
+export type ModelCarouselItem = unknown | ModelCarouselConfiguredItem;
+
+export type NavigationButtonRenderProps = {
+  onPress: () => void;
+  disabled: boolean;
+  index: number;
+  total: number;
+  isAnimating: boolean;
+};
+
+type Props = {
+  models: ModelCarouselItem[];
+
+  // layout
+  width?: DimensionValue;
+  height?: DimensionValue;
+  containerStyle?: StyleProp<ViewStyle>;
+
+  // model props
+  scale?: number;
+  position?: number[];
+
+  // camera
+  cameraPosition?: number[];
+  fov?: number;
+
+  // controls
+  autoRotate?: boolean;
+  autoRotateSpeed?: number;
+  autoPlay?: boolean;
+  autoPlayInterval?: number;
+  enableSwipeNavigation?: boolean;
+  swipeThreshold?: number;
+  showPaginationDots?: boolean;
+  showDefaultButtons?: boolean;
+
+  // transition
+  transitionDuration?: number;
+  transitionScale?: number;
+
+  // custom controls
+  renderPrevButton?: (props: NavigationButtonRenderProps) => ReactNode;
+  renderNextButton?: (props: NavigationButtonRenderProps) => ReactNode;
+};
+
+const isConfiguredModel = (
+  item: ModelCarouselItem
+): item is ModelCarouselConfiguredItem => {
+  return typeof item === 'object' && item !== null && 'path' in item;
+};
+
+const getModelPath = (item: ModelCarouselItem) =>
+  isConfiguredModel(item) ? item.path : item;
+
+const getResolvedValue = <T,>(
+  itemValue: T | undefined,
+  fallbackValue: T | undefined
+) => itemValue ?? fallbackValue;
+
+const ModelCarousel = ({
+  models,
+
+  width = '100%',
+  height = '100%',
+  containerStyle,
+
+  scale,
+  position,
+
+  cameraPosition,
+  fov,
+
+  autoRotate,
+  autoRotateSpeed,
+  autoPlay = false,
+  autoPlayInterval = 2500,
+  enableSwipeNavigation = true,
+  swipeThreshold = 36,
+  showPaginationDots = true,
+  showDefaultButtons = false,
+
+  transitionDuration = 260,
+  transitionScale = 0.96,
+  renderPrevButton,
+  renderNextButton,
+}: Props) => {
+  const [index, setIndex] = useState(0);
+  const fade = useRef(new Animated.Value(1)).current;
+  const zoom = useRef(new Animated.Value(1)).current;
+  const isAnimating = useRef(false);
+  const touchStartX = useRef<number | null>(null);
+  const touchStartY = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (models.length === 0) {
+      setIndex(0);
+      return;
+    }
+
+    if (index >= models.length) {
+      setIndex(0);
+    }
+  }, [index, models.length]);
+
+  useEffect(() => {
+    models.forEach((modelItem) => {
+      useGLTF.preload(getModelPath(modelItem) as string);
+    });
+  }, [models]);
+
+  const runTransition = useCallback(
+    (nextIndex: number) => {
+      if (isAnimating.current || models.length <= 1) {
+        return;
+      }
+
+      isAnimating.current = true;
+
+      Animated.parallel([
+        Animated.timing(fade, {
+          toValue: 0,
+          duration: Math.round(transitionDuration * 0.45),
+          useNativeDriver: true,
+        }),
+        Animated.timing(zoom, {
+          toValue: transitionScale,
+          duration: Math.round(transitionDuration * 0.45),
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        setIndex(nextIndex);
+        fade.setValue(0);
+        zoom.setValue(transitionScale);
+
+        Animated.parallel([
+          Animated.timing(fade, {
+            toValue: 1,
+            duration: Math.round(transitionDuration * 0.55),
+            useNativeDriver: true,
+          }),
+          Animated.timing(zoom, {
+            toValue: 1,
+            duration: Math.round(transitionDuration * 0.55),
+            useNativeDriver: true,
+          }),
+        ]).start(() => {
+          isAnimating.current = false;
+        });
+      });
+    },
+    [fade, models.length, transitionDuration, transitionScale, zoom]
+  );
+
+  useEffect(() => {
+    if (!autoPlay || models.length <= 1) {
+      return;
+    }
+
+    const timeout = setTimeout(() => {
+      const nextIndex = (index + 1) % models.length;
+      runTransition(nextIndex);
+    }, autoPlayInterval);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [autoPlay, autoPlayInterval, index, models.length, runTransition]);
+
+  const next = () => {
+    if (models.length === 0) {
+      return;
+    }
+
+    const nextIndex = (index + 1) % models.length;
+    runTransition(nextIndex);
+  };
+
+  const prev = () => {
+    if (models.length === 0) {
+      return;
+    }
+
+    const nextIndex = (index - 1 + models.length) % models.length;
+    runTransition(nextIndex);
+  };
+
+  const onViewerTouchStart = (event: {
+    nativeEvent: { pageX: number; pageY: number };
+  }) => {
+    if (!enableSwipeNavigation) {
+      return;
+    }
+
+    touchStartX.current = event.nativeEvent.pageX;
+    touchStartY.current = event.nativeEvent.pageY;
+  };
+
+  const onViewerTouchEnd = (event: {
+    nativeEvent: { pageX: number; pageY: number };
+  }) => {
+    if (
+      !enableSwipeNavigation ||
+      touchStartX.current === null ||
+      touchStartY.current === null
+    ) {
+      return;
+    }
+
+    const deltaX = event.nativeEvent.pageX - touchStartX.current;
+    const deltaY = event.nativeEvent.pageY - touchStartY.current;
+
+    touchStartX.current = null;
+    touchStartY.current = null;
+
+    if (
+      Math.abs(deltaX) < swipeThreshold ||
+      Math.abs(deltaX) <= Math.abs(deltaY)
+    ) {
+      return;
+    }
+
+    if (deltaX < 0) {
+      next();
+      return;
+    }
+
+    prev();
+  };
+
+  const wrapperStyle = useMemo(
+    () => [{ width, height }, containerStyle],
+    [containerStyle, height, width]
+  );
+  const controlsDisabled = models.length <= 1;
+  const controlsProps: NavigationButtonRenderProps = {
+    onPress: () => undefined,
+    disabled: controlsDisabled,
+    index,
+    total: models.length,
+    isAnimating: isAnimating.current,
+  };
+
+  if (models.length === 0) {
+    return <View style={wrapperStyle} />;
+  }
+
+  const activeItem = models[index];
+  const activeModelPath = getModelPath(activeItem);
+  const activeScale = getResolvedValue(
+    isConfiguredModel(activeItem) ? activeItem.scale : undefined,
+    scale
+  );
+  const activePosition = getResolvedValue(
+    isConfiguredModel(activeItem) ? activeItem.position : undefined,
+    position
+  );
+  const activeCameraPosition = getResolvedValue(
+    isConfiguredModel(activeItem) ? activeItem.cameraPosition : undefined,
+    cameraPosition
+  );
+  const shouldRenderPrevButton = !!renderPrevButton || showDefaultButtons;
+  const shouldRenderNextButton = !!renderNextButton || showDefaultButtons;
+
+  return (
+    <View style={wrapperStyle}>
+      <Animated.View
+        onTouchStart={onViewerTouchStart}
+        onTouchEnd={onViewerTouchEnd}
+        style={[
+          styles.viewer,
+          {
+            opacity: fade,
+            transform: [{ scale: zoom }],
+          },
+        ]}
+      >
+        <ModelViewer
+          modelPath={activeModelPath}
+          scale={activeScale}
+          position={activePosition}
+          cameraPosition={activeCameraPosition}
+          fov={fov}
+          autoRotate={autoRotate}
+          autoRotateSpeed={autoRotateSpeed}
+          enablePan={!enableSwipeNavigation}
+        />
+      </Animated.View>
+
+      <View style={styles.controls}>
+        <View style={styles.buttonsRow}>
+          {shouldRenderPrevButton ? (
+            renderPrevButton ? (
+              renderPrevButton({
+                ...controlsProps,
+                onPress: prev,
+              })
+            ) : (
+              <Pressable
+                onPress={prev}
+                disabled={controlsDisabled}
+                style={({ pressed }) => [
+                  styles.navButton,
+                  pressed && styles.navButtonPressed,
+                  controlsDisabled && styles.navButtonDisabled,
+                ]}
+              >
+                <Text style={styles.arrow}>{'<'}</Text>
+              </Pressable>
+            )
+          ) : (
+            <View />
+          )}
+
+          {shouldRenderNextButton ? (
+            renderNextButton ? (
+              renderNextButton({
+                ...controlsProps,
+                onPress: next,
+              })
+            ) : (
+              <Pressable
+                onPress={next}
+                disabled={controlsDisabled}
+                style={({ pressed }) => [
+                  styles.navButton,
+                  pressed && styles.navButtonPressed,
+                  controlsDisabled && styles.navButtonDisabled,
+                ]}
+              >
+                <Text style={styles.arrow}>{'>'}</Text>
+              </Pressable>
+            )
+          ) : (
+            <View />
+          )}
+        </View>
+
+        {showPaginationDots && models.length > 0 ? (
+          <View style={styles.dotsContainer}>
+            {models.map((_, modelIndex) => (
+              <View
+                key={`dot-${modelIndex}`}
+                style={[styles.dot, modelIndex === index && styles.dotActive]}
+              />
+            ))}
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  viewer: {
+    flex: 1,
+  },
+  controls: {
+    position: 'absolute',
+    bottom: 24,
+    width: '100%',
+    gap: 12,
+  },
+  buttonsRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+  },
+  dotsContainer: {
+    flexDirection: 'row',
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: 'rgba(196, 37, 37, 0.45)',
+  },
+  dotActive: {
+    width: 18,
+    borderRadius: 6,
+    backgroundColor: 'rgba(255, 255, 255, 0.95)',
+  },
+  arrow: {
+    fontSize: 28,
+    color: '#fff',
+    fontWeight: '700',
+    textAlign: 'center',
+    lineHeight: 30,
+  },
+  navButton: {
+    width: 52,
+    height: 52,
+    borderRadius: 26,
+    backgroundColor: 'rgba(21, 29, 44, 0.75)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.2)',
+  },
+  navButtonPressed: {
+    opacity: 0.75,
+    transform: [{ scale: 0.96 }],
+  },
+  navButtonDisabled: {
+    opacity: 0.5,
+  },
+});
+
+export default ModelCarousel;

package/src/components/ModelViewer.tsx

@@ -0,0 +1,60 @@
+import { createElement, Suspense } from 'react';
+import { Canvas } from '@react-three/fiber/native';
+import { OrbitControls } from '@react-three/drei/native';
+import { useModelLoader } from '../hooks/useModelLoader';
+
+type Props = {
+  modelPath: unknown;
+  scale?: number;
+  position?: number[];
+
+  cameraPosition?: number[];
+  fov?: number;
+
+  autoRotate?: boolean;
+  autoRotateSpeed?: number;
+
+  enableZoom?: boolean;
+  enablePan?: boolean;
+  enableRotate?: boolean;
+};
+
+const ModelViewer = ({
+  modelPath,
+  scale = 0.8,
+  position = [0, -2.7, 0],
+
+  cameraPosition = [0, 9, 5],
+  fov = 35,
+
+  autoRotate = true,
+  autoRotateSpeed = 10,
+
+  enableZoom = true,
+  enablePan = true,
+  enableRotate = true,
+}: Props) => {
+  const scene = useModelLoader(modelPath);
+
+  return (
+    <Canvas camera={{ position: cameraPosition, fov }}>
+      {createElement('ambientLight' as any, { intensity: 2.5 })}
+
+      <OrbitControls
+        enableRotate={enableRotate}
+        enableZoom={enableZoom}
+        enablePan={enablePan}
+        maxPolarAngle={Math.PI / 2}
+        minPolarAngle={Math.PI / 2}
+        autoRotate={autoRotate}
+        autoRotateSpeed={autoRotateSpeed}
+      />
+
+      <Suspense fallback={null}>
+        {createElement('primitive' as any, { object: scene, scale, position })}
+      </Suspense>
+    </Canvas>
+  );
+};
+
+export default ModelViewer;

package/src/hooks/useModelLoader.ts

@@ -0,0 +1,7 @@
+import { useGLTF } from '@react-three/drei/native';
+
+export const useModelLoader = (modelPath: unknown) => {
+  const { scene } = useGLTF(modelPath as string);
+
+  return scene;
+};

package/src/index.tsx

@@ -0,0 +1 @@
+export { default as ModelCarousel } from './components/ModelCarousel';

package/src/multiply.tsx

@@ -0,0 +1,3 @@
+export function multiply(a: number, b: number): number {
+  return a * b;
+}

package/src/types/glb.d.ts

@@ -0,0 +1,9 @@
+declare module '*.glb' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.gltf' {
+  const content: any;
+  export default content;
+}