diff --git a/Libraries/Experimental/SwipeableRow/SwipeableRow.js b/Libraries/Experimental/SwipeableRow/SwipeableRow.js
index 1880f559e..dfac8e99b 100644
--- a/Libraries/Experimental/SwipeableRow/SwipeableRow.js
+++ b/Libraries/Experimental/SwipeableRow/SwipeableRow.js
@@ -25,7 +25,6 @@
const Animated = require('Animated');
const PanResponder = require('PanResponder');
-const Platform = require('Platform');
const React = require('React');
const StyleSheet = require('StyleSheet');
const View = require('View');
@@ -49,11 +48,7 @@ const SwipeableRow = React.createClass({
propTypes: {
isOpen: PropTypes.bool,
- /**
- * Left position of the maximum open swipe. If unspecified, swipe will open
- * fully to the left
- */
- maxSwipeDistance: PropTypes.number,
+ maxSwipeDistance: PropTypes.number.isRequired,
onOpen: PropTypes.func,
onSwipeEnd: PropTypes.func.isRequired,
onSwipeStart: PropTypes.func.isRequired,
@@ -79,17 +74,13 @@ const SwipeableRow = React.createClass({
* component A to be transparent until component B is loaded.
*/
isSwipeableViewRendered: false,
- /**
- * scrollViewWidth can change based on orientation, thus it's stored as a
- * state variable. This means all styles depending on it will be inline
- */
- scrollViewWidth: 0,
};
},
getDefaultProps(): Object {
return {
isOpen: false,
+ maxSwipeDistance: 0,
onSwipeEnd: emptyFunction,
onSwipeStart: emptyFunction,
swipeThreshold: 30,
@@ -122,26 +113,26 @@ const SwipeableRow = React.createClass({
},
render(): ReactElement {
- const slideoutStyle = [styles.slideOutContainer];
- if (Platform.OS === 'ios') {
- slideoutStyle.push({opacity: this.state.isSwipeableViewRendered ? 1 : 0});
+ // The view hidden behind the main view
+ let slideOutView;
+ if (this.state.isSwipeableViewRendered) {
+ slideOutView = (
+
+ {this.props.slideoutView}
+
+ );
}
- // The view hidden behind the main view
- const slideOutView = (
-
- {this.props.slideoutView}
-
- );
-
- // The swipable item
+ // The swipeable item
const swipeableView = (
+ style={[
+ styles.swipeableContainer,
+ {
+ transform: [{translateX: this.state.currentLeft}],
+ },
+ ]}>
{this.props.children}
);
@@ -149,8 +140,7 @@ const SwipeableRow = React.createClass({
return (
+ style={styles.container}>
{slideOutView}
{swipeableView}
@@ -158,7 +148,7 @@ const SwipeableRow = React.createClass({
},
_onSwipeableViewLayout(event: Object): void {
- if (!this._isSwipeableViewRendered && this.state.scrollViewWidth !== 0) {
+ if (!this.state.isSwipeableViewRendered) {
this.setState({
isSwipeableViewRendered: true,
});
@@ -198,10 +188,7 @@ const SwipeableRow = React.createClass({
},
_animateToOpenPosition(): void {
- const toValue = this.props.maxSwipeDistance
- ? -this.props.maxSwipeDistance
- : -this.state.scrollViewWidth;
- this._animateTo(toValue);
+ this._animateTo(-this.props.maxSwipeDistance);
},
_animateToClosedPosition(): void {
@@ -235,15 +222,6 @@ const SwipeableRow = React.createClass({
this.props.onSwipeEnd();
},
-
- _onLayoutChange(event: Object): void {
- const width = event.nativeEvent.layout.width;
- if (width && width !== this.state.scrollViewWidth) {
- this.setState({
- scrollViewWidth: width,
- });
- }
- },
});
const styles = StyleSheet.create({
@@ -259,6 +237,9 @@ const styles = StyleSheet.create({
right: 0,
top: 0,
},
+ swipeableContainer: {
+ flex: 1,
+ },
});
module.exports = SwipeableRow;