React Native StretchView

StretchView implemented in JavaScript.

---

Example

The demo app can be found at examples/Simple.

To build and run the example app:

$ git clone https://github.com/guoyuan94/react-native-stretchview.git

$ cd react-native-stretchview/examples/Simple
$ npm install

# To deploy to iOS simulator:
$ npm run ios

Installation

Using npm:

$ npm install --save react-native-stretchview

Using yarn:

$ yarn add react-native-stretchview

Usage

import React, { Component } from 'react';

import {
  Text,
  View,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';

import StretchView from 'react-native-stretchview';

const styles = StyleSheet.create({
  container: {
    height: 50,
  },
});

export default class Row extends Component {

  constructor(props) {
    super(props)
    this.state = {
      expanded: false
    };
  }

  componentWillMount() {
    this.stretch = this.stretch.bind(this);
  }

  stretch() {
    this.setState({
      expanded: !this.state.expanded
    });
  }

  renderTopFace() {
    return (
      <View>
        <View style={{ height: styles.container.height, flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center' }}>
          <Text>First View</Text>
          <Text>{ this.props.title }</Text>
          <TouchableOpacity onPress={this.stretch}>
            <Text>Touch Me</Text>
          </TouchableOpacity>
        </View>
        <View style={{ height: 1, backgroundColor: 'red' }} />
      </View>
    )
  }

  renderBottomFace() {
    return (
      <View style={{ height: styles.container.height, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Second View</Text>
      </View>
    )
  }

  render() {
    return(
      <StretchView
        renderTopFace={this.renderTopFace}
        renderBottomFace={this.renderBottomFace}
        animateDistance={styles.container.height}
        expanded={this.state.expanded}
      />
    )
  }
}

Props

Prop	Type	Description
stretchDuration	?number	Length of stretch animation in milliseconds. Default 250.
renderTopFace	() => ReactElement<any>	Callback that renders a top face.
renderBottomFace	() => ReactElement<any>	Callback that renders a bottom face.
expanded	boolean	Allows you to stretch and shrinkage the FoldView content.
onAnimationEnd	?() => void	Called when an animation ends.
onAnimationStart	?() => void	Called before an animation starts.

License

MIT