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

    • rbgoncalves