Need private packages and team management tools?Check out npm Teams »

react-native-stuff-swiper

2.1.3 • Public • Published

react-native-stuff-swiper

npm

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 -

Install

npm i react-native-stuff-swiper

DownloadsWeekly Downloads

0

Version

2.1.3

License

MIT

Unpacked Size

23.1 kB

Total Files

10

Last publish

Collaborators

  • avatar