React-native-image-gallery-swiper NPM

react-native-image-gallery-swiper

A simple React Native component to render image gallery with common gestures like swiping up/down or swiping left/right to navigate to next image, as well as thumbnails for easy image navigation.

react native image gallery swiper

Built and similar to react-native-gallery-swiper.

Getting started

# with npm
$ npm install react-native-image-gallery-swiper

# with yarn
$ yarn add react-native-image-gallery-swiper

Usage

import * as React from 'react';
import { View, Text } from 'react-native';

import { ImageGallerySwiper } from 'react-native-image-gallery-swiper';

export default function App() {
  const [swipedImage, setSwipedImage] = React.useState();
  const images = [
    {
      id: 1,
      url: 'https://source.unsplash.com/random?sig=1',
      name: 'cool pic 1',
    },
    {
      id: 2,
      url: 'https://source.unsplash.com/random?sig=2',
      name: 'cool pic 2',
    },
    {
      id: 3,
      url: 'https://source.unsplash.com/random?sig=3',
      name: 'cool pic 3',
    },
    {
      id: 4,
      url: 'https://source.unsplash.com/random?sig=4',
      name: 'cool pic 4',
    },
    {
      id: 5,
      url: 'https://source.unsplash.com/random?sig=5',
      name: 'cool pic 5',
    },
  ];

  console.log('swipedImage ->', swipedImage);

  return (
    <>
      <ImageGallerySwiper
        images={images}
        swipeUp={() => console.log('up')}
        swipeDown={() => console.log('down')}
        displayName
        showThumbs
        getSwipedImage={setSwipedImage}
        activeImage={2}
        arrows={{
          arrowRight: require('../assets/SkipRight.png'),
          arrowLeft: require('../assets/SkipLeft.png'),
          arrowStyles: {
            // backgroundColor: 'gray',
            height: 30,
            width: 30,
            borderRadius: 10,
          },
          containerStyles: {
            width: '100%',
            position: 'absolute',
            display: 'flex',
            flexDirection: 'row',
            marginTop: 300,
            justifyContent: 'space-between',
            paddingHorizontal: 20,
          },
        }}
        // setHandlePressRight={handlePressRight}
        // textStyles={{ fontSize: 20, color: 'white', backgroundColor: 'green' }}
        // imageStyles={{ height: 300 }}
      >
        <View>
          <Text> Children will show here </Text>
        </View>
      </ImageGallerySwiper>
    </>
  );
}

:books: Props

Props	Description	Type	Default
`images`	An array of objects. With `id`, `url` or `imageUrl` is a required field. Example. `[ { uri: "https://source.unsplash.com/random?sig=1"}, { uri: "https://source.unsplash.com/random?sig=2"}]`	`Array`	Required
`swipeUp`	Function to pass for when swiping up an image	`Function`	Optional
`swipeDown`	Function to pass for when swiping down an image	`Function`	Optional
`displayName`	Text component with name of image to show on top of image	`Boolean`	Optional
`textStyle`	Styling the Display Name. Example: `textStyles={{ fontSize: 20, color: 'white' }}`	`object` type `TextStyle`	Optional
`imageStyles`	Styling the images within the array. Example: `imageStyles={{ height: 300 }}`	`object` type `ImageStyle`	Optional
`showThumbs`	To show thumbnails under the main image`\|`boolean` \| Optional
`thumbStyles`	Styling the thumbs within the array. Example: `thumbStyles={{ borderRadius: 10 }}`	`object` type `ImageStyle`	Optional
`getActiveImage`	To get active image sent back to the parent component Example: `setActiveImage={getActiveImage}`	`function` type	Optional
`activeImage`	To set active image index Example: `activeImage={4}`	`number` type	Optional
`arrows`	To set arrow images and styles Example: `arrows={{arrowRight: require('../assets/SkipRight.png'), arrowLeft: require('../assets/SkipLeft.png'), arrowStyles: {}`	`object` type	Optional