react-native-pager-component v0.0.13

react-native-pager-component

Controllable pager component w/ gesture support for React Native

Installation

yarn add react-native-pager-component

If you're using expo, all dependencies are already installed by default. If not, you'll need to install two dependencies along with this library:

yarn add react-native-gesture-handler
yarn add react-native-reanimated

There are additional steps to setting these up:

• react-native-gesture-handler
• react-native-reanimated

Example

import React from 'react';
import { Text, View, Button } from 'react-native';
import { Pager, ProgressBar } from 'react-native-pager-component';
import Animated from 'react-native-reanimated';
const { Value } = Animated;

const colors = [
  'aquamarine',
  'coral',
  'cadetblue',
  'indianred',
  'lightseagreen',
  'orangered',
  'rebeccapurple',
  'seashell',
  'tomato',
];

class PagerExample extends React.Component<any, any> {
  state = {
    activeIndex: 0,
  };

  dx = new Value(0);

  updateActiveIndex = activeIndex => {
    if (this.state.activeIndex !== -1) {
      if (this.state.activeIndex !== activeIndex) {
        this.setState({ activeIndex });
      }
    }
  };

  increment = () => {
    requestAnimationFrame(() => {
      this.setState(state => ({
        activeIndex: state.activeIndex + 1,
      }));
    });
  };

  decrement = () => {
    requestAnimationFrame(() => {
      this.setState(state => ({
        activeIndex: state.activeIndex - 1,
      }));
    });
  };

  render() {
    const children = Array.from({ length: this.state.activeIndex + 2 });

    return (
      <View style={{ flex: 1 }}>
        <View style={[{ flex: 1 }]}>
          <Pager
            dx={this.dx}
            activeIndex={this.state.activeIndex}
            onChange={this.updateActiveIndex}
          >
            {children.map((c, i) => (
              <View
                key={i}
                style={{
                  flex: 1,
                  alignItems: 'center',
                  justifyContent: 'center',
                  backgroundColor: colors[i % colors.length],
                }}
              >
                <Text>{`Screen: ${i}`}</Text>
              </View>
            ))}
          </Pager>
        </View>


        <ProgressBar
          dx={this.dx}
          numberOfScreens={children.length}
          style={{
            backgroundColor: 'rebeccapurple',
            height: 4,
          }}
        />

        <View style={{ width: '100%', borderWidth: 1, height: 100 }}>
          <Button title="Inc" onPress={this.increment} />
          <Button title="Dec" onPress={this.decrement} />
        </View>
      </View>
    );
  }
}

export default function App() {
  return <PagerExample />;
}

API Reference

Pager

import { Pager } from 'react-native-pager-component'

Props
--------
children: any;
activeIndex?: number;
initialIndex?: number;
defaultIndex: number;
onChange?: (nextIndex: number) => void;
style?: StyleProp<ViewStyle>;
width: number;
height: number;
dx?: Animated.Value<number>;
dy?: Animated.Value<number>;
type: 'horizontal' | 'vertical';
clamp: {
  left?: number,
  right?: number,
  bottom?: number,
  top?: number
}

ProgressBar

import { ProgressBar } from 'react-native-pager-component'

Props
--------
dx: Animated.Value<number>;
numberOfScreens: number;
style?: StyleProp<ViewStyle>;