RN-list-cards.js

import React, { Component, PropTypes } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ScrollView,
  Animated
} from 'react-native';

// navbar height:
const NAVBAR_HEIGHT = 64;
// statusBar height:
const STATUS_BAR_HEIGHT = 20;
// when hiding navbar, translateY this value:
const HIDE_NAVBAR_TRANSLATE_VALUE = 0 - NAVBAR_HEIGHT + STATUS_BAR_HEIGHT;


const Card = ({
  children,
  cardWidth,
  cardHeight,
  isFirst,
  isLast
}) => {
  return (
    <View
      style={{
        marginTop: 20,
        marginLeft: isFirst ? 20  : 15,
        marginRight: isLast ? 5 : 5,
        // paddingLeft: 1 * 5,
        // width: cardWidth - 40,
        width: cardWidth - 40,
        height: cardHeight - 40,
        flex: 1,
        backgroundColor: 'blue',
        borderRadius: 5
      }}>
      {children}
    </View>
  );
};
Card.propTypes = {
  chilren: PropTypes.node,
  cardWidth: PropTypes.number,
  cardHeight: PropTypes.number,
  isFirst: PropTypes.bool,
  isLast: PropTypes.bool
};

Card.defaultProps = {
  isFirst: false,
  isLast: false
};

export default class CardList extends Component {
  state = {
    // scrollView y offset to watch on scrollView scroll:
    yOffset: 0,
    // navigationBar
    scrollTop: new Animated.Value(0)
  };

  render() {
    const {scrollTop} = this.state;

    return (
      <View style={styles.container}>

        {/* navbar */}
        <Animated.View
          style={
            [
            styles.navbarContainer,
            { transform: [ {translateY: scrollTop} ] }
            ]
          }>
          {/* need to hide navbar content since translationY is not enough */}
          <Animated.View
            style={{
              flex: 1,
              opacity: scrollTop.interpolate({
                inputRange: [HIDE_NAVBAR_TRANSLATE_VALUE, 0],
                outputRange: [0, 1],
                extrapolate: 'clamp'
              })
            }}>
            <Text
              style={{
                marginTop: 30,
                alignSelf: 'center',
                color: '#F1F1F1'
              }}>
              NAVBAR HERE
            </Text>
          </Animated.View>
        </Animated.View>

        {/* content */}
        <View style={{
          flex: 1,
          justifyContent: 'flex-end',
          // backgroundColor: 'red',
          marginTop: -NAVBAR_HEIGHT,  // important
          // paddingTop: NAVBAR_HEIGHT   // important
        }}>
          <View style={{flex: 2}}>
            <Text>
              en haut
            </Text>
          </View>
          <ScrollView
            style={[
              {
                flex: 1,
                // backgroundColor: 'green',
                height: 200
              }
            ]}
            bounces={true} // ios only: remove bounce to prevent on bottom scroll show/hide navbar glitch
            onScroll={this.onScroll}
            onLayout={this.adjustCardSize}

            horizontal={true}
            pagingEnabled={true}

            scrollEventThrottle={100}
            showsVerticalScrollIndicator={true}>

            <Card
              cardWidth={this.state.cardWidth}
              cardHeight={this.state.cardHeight}
              isFirst={true}
              isLast={false}>
              <Text style={styles.instructions}>
                To get started, edit index.ios.js
              </Text>
            </Card>

            <Card
              cardWidth={this.state.cardWidth}
              cardHeight={this.state.cardHeight}>
              <Text style={styles.instructions}>
                Press Cmd+R to reload,{'\n'}
                Cmd+D or shake for dev menu
              </Text>
            </Card>

            <Card
              cardWidth={this.state.cardWidth}
              cardHeight={this.state.cardHeight}>
              <Text style={styles.instructions}>
                Press Cmd+R to reload,{'\n'}
                Cmd+D or shake for dev menu
              </Text>
            </Card>

            <Text style={styles.instructions}>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
            </Text>
            <Text style={styles.instructions}>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
            </Text>
            <Text style={styles.instructions}>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
            </Text>
            <Text style={styles.instructions}>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
            </Text>
            <Text style={styles.instructions}>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
            </Text>
            <Text style={styles.instructions}>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
            </Text>
            <Text style={styles.instructions}>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
            </Text>
            <Text style={styles.instructions}>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
            </Text>
            <Text style={styles.instructions}>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
            </Text>
            <Text style={styles.instructions}>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
            </Text>
            <Text style={styles.instructions}>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
            </Text>
            <Text style={styles.instructions}>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
            </Text>
            <Text style={styles.instructions}>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
            </Text>
            <Text style={styles.instructions}>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
            </Text>
          </ScrollView>
        </View>
      </View>
    );
  }

  adjustCardSize = (e) => {
    this.setState({
      cardWidth: e.nativeEvent.layout.width,
      cardHeight: e.nativeEvent.layout.height,
    });
  }

  onScroll = ({ nativeEvent }) => {
    const nextYOffset = nativeEvent.contentOffset.y;
    const showNavBar =  nextYOffset > 0 &&
                        this.state.yOffset > 0 &&
                        nextYOffset > this.state.yOffset ? false : true;

    this.setState({yOffset: nextYOffset});
    this.showHideNavbarWithAnimation(showNavBar);
  }

  showHideNavbarWithAnimation = (showNavBar = true) => {
    let navBarTargetValue = 0;
    if (showNavBar) {
      navBarTargetValue = 0;
    } else {
      navBarTargetValue =  HIDE_NAVBAR_TRANSLATE_VALUE;
    }
    Animated.spring(
      this.state.scrollTop,
      {
        toValue: navBarTargetValue,
        friction: 10
      }
    ).start();
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  navbarContainer: {
    height: NAVBAR_HEIGHT,
    backgroundColor: '#4A4A4A',
    zIndex: 10 // important when show/hide navbar
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    marginTop: 40,
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('CardList', () => CardList);