React Native synchronised scroll views in view pager.js

import Exponent from 'exponent';
import React from 'react';
import { range } from 'lodash';

import {
  StyleSheet,
  Dimensions,
  ScrollView,
  Animated,
  Text,
  View,
} from 'react-native';

const ViewPager = require('react-native-viewpager');

// each page is full-screen wide and 1000px tall
const w = Dimensions.get('window').width;
const h = 1000;

const PAGES = [
  {color: "rgba(255, 0, 0, 0.2)", name: "One"}, 
  {color: "rgba(0, 255, 0, 0.2)", name: "Two"}, 
  {color: "rgba(0, 0, 255, 0.2)", name: "Three"}
];

// render arbitrary row, not important
const Row = ({ title, index, height, color }) => (
  <View
    key={`${title}-${index}`}
    style={{
      height,
      backgroundColor: index % 2 === 0 ? 'white' : color,
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center'
    }}
  >
    <Text>{title} #{index}</Text>
  </View>
);


class Page extends React.Component {

  componentDidMount() {
    // when the scroll position of the currently visible
    // view changes, update this scrollview position
    this.listener = this.props.position.addListener((position) => {
      if (!this.props.active) {
        this._scrollInstance.scrollTo({
          x: 0,
          y: position.value,
          animated: false
        });
      }
    });
  }

  componentWillUnmount() {
    this.props.position.removeListener(this.listener);
  }

  render() {
    const {name, rowCount, onScroll, active, color} = this.props;
    return (
      <View onxPress={()=>{this.alert("hello")}}>
        <ScrollView
          key={name}
          ref={(instance) => this._scrollInstance = instance}
          style={{flex: 1, width: w}}
          scrollEventThrottle={100}
          onScroll={active ? onScroll : null}
        >
          {range(rowCount).map((index) => (
            <Row
              key={`row-${index}`}
              color={color}
              title={name}
              index={index}
              height={h / rowCount}
            />
          ))}
        </ScrollView>
      </View>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {page: 0};

    var dataSource = new ViewPager.DataSource({
      pageHasChanged: (p1, p2) => p1 !== p2,
    });

    // create an animated value and update it with the y-scroll
    // position on the active scrollview when it scrolls.
    // we will then pass the position to all the scroll views,
    // who will synchronize their scroll states to the current position
    // on each change
    this.pageScrollPosition = new Animated.Value(0);
    this.pageScrollListener = Animated.event(
      [{nativeEvent: {contentOffset: {y: this.pageScrollPosition }}}]
    );
    this.state = {
      dataSource: dataSource.cloneWithPages(PAGES)
    }
  }

  _renderPage = (data, pageID, currentPage) => {
    return (
      <Page
        name={data.name}
        rowCount={25}
        color={data.color}
        onScroll={this.pageScrollListener}
        position={this.pageScrollPosition}
        active={currentPage == pageID}
      />
    )
  };

  render() {
    return (
      <View
        style={{flex: 1}}
      >
        <ViewPager
          ref={(viewpager) => {this.viewpager = viewpager}}
          style={this.props.style}
          dataSource={this.state.dataSource}
          renderPage={this._renderPage}
          isLoop={true}
          autoPlay={false}
          onChangePage={this._onChangePage}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
});

Exponent.registerRootComponent(App);