@pietile-native-kit/page-slider

    1.1.0 • Public • Published

    PageSlider

    npm version

    Helps to implement swipeable pages. PageSlider is controlled with selectedPage prop compnent and can work in two modes: page when page occupies whole width of the screen and card when adjacent pages are visible at sides.

    Installation

    Using yarn

    yarn add @pietile-native-kit/page-slider

    or using npm

    npm install -S @pietile-native-kit/page-slider

    Usage

    PageSlider should occupy whole width of the screen. Each element inside will be wrapped with a view and you can safely use all available space in it. PageSlider is controlled so you should pass at least selectedPage and implement onSelectedPageChange. There is also optional onCurrentPageChange callback that fires currently active page (for example while the page is being dragged). By default PageSlider works in page mode.

    Example

    import React, { useState } from 'react';
     
    import PageSlider from '@pietile-native-kit/page-slider';
    import { StyleSheet, Text, View } from 'react-native';
     
    function PageSliderExample() {
      const [selectedPage, setSelectedPage] = useState(0);
     
      return (
        <PageSlider
          style={styles.pageSlider}
          selectedPage={selectedPage}
          onSelectedPageChange={setSelectedPage}
        >
          <View style={[styles.page, { backgroundColor: 'red' }]}>
            <Text>1</Text>
          </View>
          <View style={[styles.page, { backgroundColor: 'orange' }]}>
            <Text>2</Text>
          </View>
          <View style={[styles.page, { backgroundColor: 'yellow' }]}>
            <Text>3</Text>
          </View>
        </PageSlider>
      );
    }
     
    const styles = StyleSheet.create({
      pageSlider: {
        width: '100%',
      },
      page: {
        alignItems: 'center',
        height: 128,
        justifyContent: 'center',
        padding: 16,
      },
    });

    API

    Properties

    name description type default
    children Content Node -
    mode "page" or "card" string page
    contentPaddingVertical Vertical padding of content container number -
    pageMargin Space between pages number 8
    peek Space between page and edge of the screen number 24
    selectedPage Selected page index number -
    style Style of component itself style -
    onCurrentPageChange Fires when current page changed function -
    onSelectedPageChange Fires when selected page changed function -

    License

    Pietile PageSlider is MIT License.

    Install

    npm i @pietile-native-kit/page-slider

    DownloadsWeekly Downloads

    168

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    8.75 kB

    Total Files

    4

    Last publish

    Collaborators

    • mxck
    • vshab