react-native-stuff-swiper v2.1.3

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

Public methods