react-native-stuff-swiper

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	-