Skip to main content

ViewPager

ViewPager renders swipeable pages. Each child is rendered as a full-width page that the user can swipe between horizontally.

Import​

import { ViewPager } from '@ui-kitten/components';

Basic Usage​

import React, { useState } from 'react';
import { Layout, ViewPager, Text } from '@ui-kitten/components';

const ViewPagerExample = () => {
  const [selectedIndex, setSelectedIndex] = useState(0);

  return (
    <ViewPager selectedIndex={selectedIndex} onSelect={setSelectedIndex}>
      <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text category="h5">Page 1</Text>
      </Layout>
      <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text category="h5">Page 2</Text>
      </Layout>
      <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text category="h5">Page 3</Text>
      </Layout>
    </ViewPager>
  );
};

Props​

PropertyTypeDefaultDescription
selectedIndexnumber0Index of the currently visible page.
onSelect(index: number) => void-Called when the visible page changes via swipe.
shouldLoadComponent(index: number) => boolean() => truePredicate to lazily load page content. Return false to skip rendering.
childrenReactNode[]-Page content elements.

ViewPager also accepts all standard React Native View props.

Storybook​

Live examples coming soon via Storybook.