react-native-stuff-swiper

A lightweight React Native component for swipe stuff out!

Besides horizontal swipe motion, it has support for side buttons, static header and footer.

Usage

 import React, { useRef, useState } from 'react';
 import StuffSwiper from 'react-native-stuff-swiper';
 ...
 
 const YourAwesomeComponent = () => {
  const [screensData, setScreensData] = useState(null);
  const swiperRef = useRef(null);

  const onPaginationChange = ({ pagination, total, currentIndex})  => {
    // Do your stuff here ...
  }

  return (
    <StuffSwiper
      ref={swiperRef}
      HeaderComponent={<YourHeaderComponent />}
      screensData={screensData}
      enableSideButtons
      loop
      onPaginationChange={onPaginationChange}
      DefaultScreenComponent={MyScreenComponent}
    />
  );
};

NOTE: ref it's required in order to use public methods (e.g. swiperRef.current.goToIndex(0) in the above example)

screensData example

screenData prop must be an array of objects with the following format:

    {
        id: 2,
        screen: <ReactComponent />,
        // OR
        props: {
          //your props
        }
    }

Example of full screensData array:

Without Default screen component:

[
  {
    id: '1',
    screen: 
    	<View>
    		<Text>My first screen </Text>
    	</View>,
  },
  {
    id: '2',
    screen: 
      <View>
        <FlatList
          data={myListInfos}
          keyExtractor={(item, index) => item + index}
          renderItem={({ item }) => <Text style={{ fontSize: 16 }}>{item}</Text>}
        />
      </View>,
  },
  {
    id: '3',
    screen: 
        <Image
          style={{width: 100, height: 100}}
          source={{uri: 'https://facebook.github.io/react-native/img/tiny_logo.png'}}
        />
  },
]

With Default screen component:

[
  {
    id: '1',
    props: {
      title: 'first screen',
    },
  {
    id: '2',
    props: {
      title: 'second screen',
    },
  },
  {
    id: '3',
    props: {
      title: 'third screen',
      // any other props that you want to be injected into our DefaultScreenComponent
    },
  },
]

API Reference

Props

| Prop name | Info | Type | |--------------------------|------------------------------------------------------------------------------------------------|------------------| | onPaginationChange | Callback that returns pagination (aka formatted current/total), currentIndex and total | Function | | loop | Specify if the loop behaviour it's enabled (default: false) | Bool | | animated | Specify if the animations are enabled (default: true) | Bool | | screensData | Data that will be rendered on screens | Array of Objects | | HeaderComponent | Component that will be rendered as header | React Component | | FooterComponent | Component that will be rendered as footer | React Component | | DefaultScreenComponent | Component that will be rendered as screen | React Component | | DefaultScreenProps | Global Props that will be injected in DefaultScreenComponent | Object | | enableSideButtons | Specify if side buttons are enabled (default: false) | Bool | | nextButtonComponent | Component that will be rendered as next side button | React Component | | previousButtonComponent | Component that will be rendered as previous side button | React Component | | styleHeaderContainer | Specify the header container styles | Style Object | | styleFooterContainer | Specify the footer container styles | Style Object | | styleContentContainer | Specify the content container styles | Style Object | | styleSideButtonsContainer| Specify the side buttons container styles | Style Object | | styleButton | Specify the default side button container styles | Style Object | | buttonSize | Specify the side buttons size (default: 30) | Number |

Public methods

| Method name | Info | Parameters | Return | |--------------------------|------------------------------------|---------------|-------------------------------------| | getPagination | Get current pagination status | - | { currentIndex, pagination, total } | | next | Go to the next screen | - | - | | prev | Go to the previous screen | - | - | | goToIndex | Go to the specified index | index | - |