@pietile-native-kit/page-slider
TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published

PageSlider

npm version install size

Helps to implement swipeable pages. PageSlider is controlled with selectedPage prop component 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.

Package Sidebar

Install

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

Weekly Downloads

1,310

Version

1.2.0

License

MIT

Unpacked Size

15.9 kB

Total Files

9

Last publish

Collaborators

  • vshab
  • mxck