@garlicbed/react-native-slide360 NPM

@garlicbed/react-native-slide360

A React Native component that provides a 360-degree view. Users can slide through images to see products from all angles.

Demo

Demo of 360 View Feature

Installation

You can install the package using npm or yarn:

npm install @garlicbed/react-native-slide360

yarn add @garlicbed/react-native-slide360

Dependencies

This package requires react-native-gesture-handler. You can install it as follows:

For React Native:

yarn add react-native-gesture-handler

For Expo:

npx expo install react-native-gesture-handler

Usage

To use the Slide360 component, import it and pass the required props as shown below:

import React from 'react';
import { Slide360 } from '@garlicbed/react-native-slide360';

const App = () => {
  const images = [
    require('./assets/image1.jpg'),
    require('./assets/image2.jpg'),
    require('./assets/image3.jpg'),
  ];

  return (
    <Slide360
      images={images}
      height={300}
      onPressSlide={(slide) => console.log(slide.index)}
      containerStyle={{ margin: 20 }}
    />
  );
};

export default App;

Props

`Slide360PropsType`

Prop	Type	Default	Description
`images`	`ImageSourcePropType[]`	Required	An array of images to display in the 360 view.
`dragDeltaX`	`number`	`0`	The drag delta value for sliding between images.
`height`	`number`	`300`	The height of the component.
`onPressSlide`	`(slide: SlideType) => void`	`undefined`	Callback function that is called when a slide is pressed. It receives the current slide object.
`containerStyle`	`ViewStyle`	`{}`	Custom styles for the container of the component.

Type Definitions

`ImageSlideStyleType`

export interface ImageSlideStyleType
  extends Omit<ImageStyle, 'height' | 'width'> {}

`LoadedImageType`

export interface LoadedImageType {
  source: ImageSourcePropType;
  isLoading: boolean;
  isFailed: boolean;
}

`SlideType`

export interface SlideType extends LoadedImageType {
  index: number;
}

`Slide360PropsType`

export interface Slide360PropsType {
  images: ImageSourcePropType[];
  dragDeltaX?: number;
  height?: number;
  onPressSlide?: (slide: SlideType) => void;
  containerStyle?: ViewStyle;
}