example of scrollview

famous_App_famous.jsx

import React from 'react'
import Modifier from 'react-famous/core/Modifier';
import Transform from 'famous/core/Transform';
import Surface from 'react-famous/core/Surface';
import View from 'react-famous/core/View';
import ScrollView from 'react-famous/views/ScrollView';
import startsWith from 'lodash/string/startsWith';
import range from 'lodash/utility/range'

const SURFACE_REF_PREFIX = 'surface_';
let NUM_SURFACES = 3;

class AppFam extends React.Component {

    constructor() {
        this.state = {};
    }

    componentDidMount() {
        let scrollview = this.refs.scrollview.getFamous();

        Object.keys(this.refs)
            .filter((key) => startsWith(key, SURFACE_REF_PREFIX))
            .map((key) => this.refs[key].getFamous())
            .forEach((surface) => surface.pipe(scrollview));

    }

    componentWillReceiveProps() {}

    render() {
        let options = {
            size: [undefined, 100],
            properties: {
                backgroundColor: 'yellow',
                borderColor: 'black',
                border: '1px solid'
            }
        };

        let surfaces = this.props.surfaces.map((surf, idx) => {
            return (
                <Surface options={options} key={idx} ref={`${SURFACE_REF_PREFIX}${idx}`}>
                    <h1>{this.props.surfaces.length}</h1>
                </Surface>
            )
        });


        return (
            <ScrollView ref='scrollview'>
                {surfaces}
            </ScrollView>
        )
    }
}

export default AppFam;

famous_AppContainer_famous.jsx

import React from 'react';
import App from './App_famous';
import Context from 'react-famous/core/Context';


class AppContainerFam extends React.Component {

    constructor() {
        this.state = {
            el: [0,1,2]
        };
    }

    componentDidMount() {
        var count = 0;
        [1000, 1400, 1600, 1800, 2000].forEach((time) => {
            setTimeout(() => {
                let el = this.state.el;
                el.push(count);

                this.setState({
                    el: el
                });
                count += 1;
            }, time)
        });
    }

    render() {
        return (
            <Context>
                <App surfaces={this.state.el}/>
            </Context>
        )
    }
}

export default AppContainerFam;