react-native-tabbed-view-pager-android/index.js

An android ViewPager wrapper with built-in tabs.

import React from "react";
import PropTypes from "prop-types";
import {
  UIManager,
  View,
  dismissKeyboard,
  requireNativeComponent,
  findNodeHandle,
  ColorPropType,
  processColor
} from "react-native";

var ReactPropTypes = PropTypes;

var VIEWPAGER_REF = "viewPager";

type Event = Object;

export type ViewPagerScrollState = $Enum<{
  idle: string,
  dragging: string,
  settling: string
}>;

/**
 * Container that allows to flip left and right between child views. Each
 * child view of the `TabbedViewPager` will be treated as a separate page
 * and will be stretched to fill the `TabbedViewPager`.
 *
 * It is important all children are `<View>`s and not composite components.
 * You can set style properties like `padding` or `backgroundColor` for each
 * child.
 *
 * Example:
 *
 * ```
 * render: function() {
 *   return (
 *     <TabbedViewPager
 *       style={styles.viewPager}
 *       initialPage={0}>
 *       <View style={styles.pageStyle}>
 *         <Text>First page</Text>
 *       </View>
 *       <View style={styles.pageStyle}>
 *         <Text>Second page</Text>
 *       </View>
 *     </TabbedViewPager>
 *   );
 * }
 *
 * ...
 *
 * var styles = {
 *   ...
 *   pageStyle: {
 *     alignItems: 'center',
 *     padding: 20,
 *   }
 * }
 * ```
 */
class TabbedViewPager extends React.Component {
  props: {
    initialPage?: number,
    onPageScroll?: Function,
    onPageScrollStateChanged?: Function,
    onPageSelected?: Function,
    pageMargin?: number,
    keyboardDismissMode?: "none" | "on-drag",
    scrollEnabled?: boolean
  };

  static propTypes = {
    ...View.propTypes,
    /**
     * Index of initial page that should be selected. Use `setPage` method to
     * update the page, and `onPageSelected` to monitor page changes
     */
    initialPage: ReactPropTypes.number,

    /**
     * Executed when transitioning between pages (ether because of animation for
     * the requested page change or when user is swiping/dragging between pages)
     * The `event.nativeEvent` object for this callback will carry following data:
     *  - position - index of first page from the left that is currently visible
     *  - offset - value from range [0,1) describing stage between page transitions.
     *    Value x means that (1 - x) fraction of the page at "position" index is
     *    visible, and x fraction of the next page is visible.
     */
    onPageScroll: ReactPropTypes.func,

    /**
     * Function called when the page scrolling state has changed.
     * The page scrolling state can be in 3 states:
     * - idle, meaning there is no interaction with the page scroller happening at the time
     * - dragging, meaning there is currently an interaction with the page scroller
     * - settling, meaning that there was an interaction with the page scroller, and the
     *   page scroller is now finishing it's closing or opening animation
     */
    onPageScrollStateChanged: ReactPropTypes.func,

    /**
     * This callback will be called once ViewPager finish navigating to selected page
     * (when user swipes between pages). The `event.nativeEvent` object passed to this
     * callback will have following fields:
     *  - position - index of page that has been selected
     */
    onPageSelected: ReactPropTypes.func,

    /**
     * Blank space to show between pages. This is only visible while scrolling, pages are still
     * edge-to-edge.
     */
    pageMargin: ReactPropTypes.number,

    /**
     * Determines whether the keyboard gets dismissed in response to a drag.
     *   - 'none' (the default), drags do not dismiss the keyboard.
     *   - 'on-drag', the keyboard is dismissed when a drag begins.
     */
    keyboardDismissMode: ReactPropTypes.oneOf([
      "none", // default
      "on-drag"
    ]),

    /**
     * When false, the content does not scroll.
     * The default value is true.
     */
    scrollEnabled: ReactPropTypes.bool,

    /**
     * Tab properties
     */
    tabGravity: ReactPropTypes.oneOf(["fill", "center"]),
    tabMode: ReactPropTypes.oneOf(["fixed", "scrollable"]),
    tabBackground: ColorPropType,
    tabIndicatorColor: ColorPropType,
    tabTextColor: ColorPropType,
    tabSelectedTextColor: ColorPropType,
    tabIndicatorHeight: ReactPropTypes.number,
    tabElevation: ReactPropTypes.number,
    tabNames: ReactPropTypes.array.isRequired
  };

  componentDidMount() {
    if (this.props.initialPage != null) {
      this.setPageWithoutAnimation(this.props.initialPage);
    }
  }

  getInnerViewNode = (): ReactComponent => {
    return this.refs[VIEWPAGER_REF].getInnerViewNode();
  };

  _childrenWithOverridenStyle = (): Array => {
    // Override styles so that each page will fill the parent. Native component
    // will handle positioning of elements, so it's not important to offset
    // them correctly.
    return React.Children.map(this.props.children, function(child) {
      if (!child) {
        return null;
      }
      var newProps = {
        ...child.props,
        style: [
          child.props.style,
          {
            position: "absolute",
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            width: undefined,
            height: undefined
          }
        ],
        collapsable: false
      };
      if (
        child.type &&
        child.type.displayName &&
        child.type.displayName !== "RCTView" &&
        child.type.displayName !== "View"
      ) {
        console.warn(
          "Each ViewPager child must be a <View>. Was " + child.type.displayName
        );
      }
      return React.createElement(child.type, newProps);
    });
  };

  _onPageScroll = (e: Event) => {
    if (this.props.onPageScroll) {
      this.props.onPageScroll(e);
    }
    if (this.props.keyboardDismissMode === "on-drag") {
      dismissKeyboard();
    }
  };

  _onPageScrollStateChanged = (e: Event) => {
    if (this.props.onPageScrollStateChanged) {
      this.props.onPageScrollStateChanged(e.nativeEvent.pageScrollState);
    }
  };

  _onPageSelected = (e: Event) => {
    if (this.props.onPageSelected) {
      this.props.onPageSelected(e);
    }
  };

  /**
   * A helper function to scroll to a specific page in the ViewPager.
   * The transition between pages will be animated.
   */
  setPage = (selectedPage: number) => {
    UIManager.dispatchViewManagerCommand(
      findNodeHandle(this),
      UIManager.TabbedViewPager.Commands.setPage,
      [selectedPage]
    );
  };

  /**
   * A helper function to scroll to a specific page in the ViewPager.
   * The transition between pages will *not* be animated.
   */
  setPageWithoutAnimation = (selectedPage: number) => {
    UIManager.dispatchViewManagerCommand(
      findNodeHandle(this),
      UIManager.TabbedViewPager.Commands.setPageWithoutAnimation,
      [selectedPage]
    );
  };

  render() {
    return (
      <NativeTabbedViewPager
        {...this.props}
        ref={VIEWPAGER_REF}
        style={this.props.style}
        onPageScroll={this._onPageScroll}
        onPageScrollStateChanged={this._onPageScrollStateChanged}
        onPageSelected={this._onPageSelected}
        tabTextColor={processColor(this.props.tabTextColor)}
        tabBackground={processColor(this.props.tabBackground)}
        tabSelectedTextColor={processColor(this.props.tabSelectedTextColor)}
        tabIndicatorColor={processColor(this.props.tabIndicatorColor)}
        children={this._childrenWithOverridenStyle()}
      />
    );
  }
}

var NativeTabbedViewPager = requireNativeComponent(
  "TabbedViewPager",
  TabbedViewPager
);
var TabbedViewPagerAndroid = TabbedViewPager;
module.exports = TabbedViewPagerAndroid;