@garlicbed/react-native-slide360 v0.1.2

@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

Installation

You can install the package using npm or yarn:

npm install @garlicbed/react-native-slide360

or

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

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;
}

Contributing

If you'd like to contribute, please fork the repository and submit a pull request.

Contact

For any inquiries or support, please open an issue on the GitHub repository.

License

This package is licensed under the MIT License. See the LICENSE file for more details.

Made with create-react-native-library