UsingSwipeListView. When the action (say delete) of the hiddenRow causes the row to be removed, the row bellow it is set to the open state. closeOnRowPress has no effect if there is a touchable within the row content.

I'm looking through your example and you're not using renderHiddenRows when implementing a per row behaviour list. Are we not able to use that property when doing per row behaviour?

Hi,

We want to use SwipeRow with a transparent background. If we set content style:

backgroundColor: rgba(0, 0, 0, .1)

Then, the hiddenView will be displayed, it's not what we want. We want it just like Notification Center of IOS, Be displayed only when slid open.

Do you have some idea to resolve this? Thank you.

If I do something like this, my onPress method gets call for every rows at render.

renderHiddenRow={(rowData, secId, rowID) => (
  <TouchableHighlight onPress={this._handleRemoveIdea(rowID)} style={styles.rowBack}>
    <Text style={styles.rowBackText}>Delete</Text>
  </TouchableHighlight>
)}

I am in the process of transitioning a react native 0.29 ListView to your SwipeListView.

I've noticed that due to properties on a container I cannot style, the list items are all of equal height.

ListView on the left, SwipeListView on the right.

Happy to help out here -- maybe passing style down the chain? -- but i'm not sure where to start.

Thanks

Hi,

you think with the current setup it would be possible to keep touchables inside a SwipeRow beeing able to respond to touch press? It works for me in the simulator but not on an actual Android device. Swiping works just fine but the press is no longer triggered on the TouchableHighlight inside the row.

Thanks a log

@jemise111 This works like a charm but In the props we put the amount of pixels for left or right swipe but after the orientation of device the pixels changed and the sizes should be changed.is their a way to capture this functionality easily without working with orientation change? thanks in advance

If set DIRECTIONAL_DISTANCE_CHANGE_THRESHOLD value too large, the row can not swipe out easily. If set DIRECTIONAL_DISTANCE_CHANGE_THRESHOLD too small, when scroll the swipe list, the row is easy to bring out.

The large DIRECTIONAL_DISTANCE_CHANGE_THRESHOLD value set 4.
const DIRECTIONAL_DISTANCE_CHANGE_THRESHOLD = 4;
_onMoveShouldSetPanResponder = (event, gestureState) => {
const { dx } = gestureState;
return Math.abs(dx) > DIRECTIONAL_DISTANCE_CHANGE_THRESHOLD;
}

The small DIRECTIONAL_DISTANCE_CHANGE_THRESHOLD value set 0.
const DIRECTIONAL_DISTANCE_CHANGE_THRESHOLD = 0;
_onMoveShouldSetPanResponder = (event, gestureState) => {
const { dx } = gestureState;
return Math.abs(dx) > DIRECTIONAL_DISTANCE_CHANGE_THRESHOLD;
}

How would you do this?

I know that for right buttons, you just increase the right position by whatever the button width is. For left buttons, it seems like the 2nd button gets rendered behind the first right button. Any ideas?

Thanks in advance!

Hey! great component, but I'm having a weird issue that I can't seem to track down. I have a parent component that determines which rn component to render based on a selected filter. The components are changed correctly, but when I want to navigate back to the component with the react-native-swipe-list-view i must press the button twice to get the list view to show on the screen. None of the underlying data has changed. Any ideas?

I'm using an InvertibleScrollView to render my ListView:

renderScrollComponent={props => <InvertibleScrollView {...props} inverted/>}.

And so my first row, i.e. the top row in the view is not the one I want to preview. I want to preview the last row (the bottom most row). It would be nice to be able to pick the row to preview, maybe by sectionId and rowId. Or maybe specify previewLastRow.

Thanks

It's working normally until I turn on the remote debug via chrome, it stops working.

I mean, I just simply can't swift, and I haven't implement any functions to handle the swift so I don't know if they're still working or not, I will update the post after I tried it.

Windows.
React native 0.39
Android development.

@jemise111
when I open one row ,there is a delete-button .And I touch button to delete this row,its not closed when row in not end of listview .

Now ,how to close row which be opened voluntarily,not press to close and slide to close.Thanks

Is it possible to open/slide the row when user touches the row.?

How do I scroll manually scroll the list to its end?
There is any method for it?

Hi! I was using your library and realized that something wrong when I implement it on tabBar using
react-native-navigation
https://github.com/wix/react-native-navigation

I use the same component and the backRow is not rendered in the second tab and above. But in the first tab, it's rendered perfectly (I'm using your example as the component)

Is it a bug or did I do something wrong?

Hi @jemise111

Have you ever thought of doing a swipe behaviour like this one: http://browniefed.com/blog/react-native-animated-listview-row-swipe/

The idea is an action gets triggered after a threshold.

I tried implementing the behaviour above but for some reason, the whole row changes color and not just the view behind the actual row.

after i npm install the component and i wrote the codes just like the example, but when i run
the app, it shows

Element type is invalid: expected a string(for built-in components) or a class/function (for composite components) but got: object. Check the render method of 'TestSwipeListView'

I really don't know why? would you help me? THX

I'm getting an error when deployed to an iPhone in production mode. The behaviour seems to be different than when connecting to a local npm server.

I'm trying to use the new per-row features, but they're failing when I deploy it to TestFlight with this error:

Fatal Exception: RCTFatalException: Unhandled JS Exception: this.props.renderHiddenRow is not a function. (In 'this.props.renderHiddenRow(e,o,s,this._rows)', 'this.props.renderHiddenRow' is undefined)

It's a guess, but I think maybe this is failing:

if (Component.type.name === 'SwipeRow') {

Is it possible that the deployment (minification?) process destroys the name, and so this statement never resolves to true? Perhaps instead use if(!this.props.renderHiddenRow) {...?

If I make a PR with the example code moved to a separate DIR (which we can easily npmignore then) would it be accepted?

I have this block of code
<SwipeListView dataSource={this.ds.cloneWithRows(this.state.listViewData)} renderRow={this._renderRow.bind(this)} />

For some reason, _renderRow gets a empty object {} for its rowMap argument. Any idea what's happening?

hi, i was wondering how i can make "rightOpenValue" value dynamic? i tried adding "ref=" to a "View" element, and then doing something like: facebook/react-native#953
but that didn't work seems the "ref" is not available inside "renderHiddenRow". any ideas or examples would be appreciated.

I want to use a SwipeRow in a ListView rather than use a SwipeListView because i want different behaviour on different rows. Some for example should not be swipeable.

The behaviour I'm seeing is that the right-swipe works fine, but the left-swipe doesn't. After releasing the left-swipe, the view immediately switches as if I'd done a right-swipe.

`import { SwipeRow, SwipeListView } from 'react-native-swipe-list-view';

< SwipeListView
dataSource={this.state.dataSource}
renderRow={this._renderRow}
renderHiddenRow={ (data, sectionID, rowID, rowMap) => (
< View style={styles.rowBack}>
< TouchableOpacity style={[styles.backRightBtn, styles.backRightBtnRight]} onPress={ _ => rowMap[rowID].closeRow()}>
< Text>delete< /Text>
< /TouchableOpacity>
< TouchableOpacity style={[styles.backRightBtn, styles.backRightBtnLeft]} onPress={ _ => rowMap[rowID].closeRow()}>
< Text>cancel< /Text>
< /TouchableOpacity>
< /View>
)}
leftOpenValue={0}
rightOpenValue={-150}
renderSeparator={(sectionID, rowID) => <View key={${sectionID}-${rowID}} style={styles.separator} />}
disableRightSwipe={true}
/>`

I wrote codes like above, but when I run the app, the screen tells me "Cannot read property 'closeRow' of undefined", at fiirst i thought it might be the low version of react native caused this problem, but after i updated my react native to 0.24.1, the problem still occurred. Is there any wrong usage in my codes? I really don't know what is going on here……

I'm not understanding how to close the row when the user taps a button from the hidden row.

In the example: https://github.com/jemise111/react-native-swipe-list-view/blob/master/SwipeListExample/example.js#L92, it's using something called rowMap, however, I don't see that in the docs: https://facebook.github.io/react-native/docs/listview.html#renderrow

Has it been changed to highlightRow in RN 0.39?

In any case, I'm just following the example (called from <ListView renderRow={this.renderRow}:

renderRow(record, sectionID, rowID, rowMap) {
  return(
    <SwipeRow disableRightSwipe={true} rightOpenValue={-77} closeOnRowPress={true}>
      <View style={styles.swipeRow}>
        <TouchableOpacity key={1} style={[styles.swipeButton, {backgroundColor: '#ff3b30'}]} onPress={_ => this.deleteRec(record, sectionID, rowID, rowMap)}>
          <Text style={styles.swipeButtonText}>Delete</Text>
        </TouchableOpacity>
      </View>
      <RecordRow record={record} />
    </SwipeRow>
  )
}

deleteRec function:

deleteRec(record, sectionID, rowID, rowMap){
  this.deleteRecord(record);
  rowMap[`${sectionID}${rowID}`].closeRow();
},

I'm getting a Cannot read property 'closeRow' of undefined error when calling rowMap[${sectionID}${rowID}].closeRow()

What am I doing wrong?

If I wanted my SwipeRow to do one thing when tapped while the row is closed and another while it's open (say, close the row), is that possible with how things stand?

Hi,

It' working perfect with Android, for iOS it's not working the hidden layer exist under the row, I can swap 2 pixel only and I can see there is button beneath it, My swap margin is 150 pixel.

OS version 10
Any idea?

Hello!
Would you do support to rows with different height? Otherwise, rows height break.

ExceptionsManager.js:76 Attempted to transition from state RESPONDER_INACTIVE_PRESS_IN to RESPONDER_ACTIVE_LONG_PRESS_IN, which is not supported. This is most likely due to Touchable.longPressDelayTimeout not being cancelled.reactConsoleError @ ExceptionsManager.js:76console.error @ YellowBox.js:60_handleLongDelay @ Touchable.js:595JSTimersExecution.callbacks.(anonymous function) @ JSTimers.js:47callTimer @ JSTimersExecution.js:84(anonymous function) @ JSTimersExecution.js:119callTimers @ JSTimersExecution.js:119__callFunction @ MessageQueue.js:204(anonymous function) @ MessageQueue.js:95guard @ MessageQueue.js:41callFunctionReturnFlushedQueue @ MessageQueue.js:94onmessage @ debuggerWorker.js:39

eg :
<SwipeListView
dataSource={ds.cloneWithRows([1,2,3,4,5])}
renderRow={data=>{
console.log(data);
return test
}}
/>

log :

null
null
null
null
null

When you swipe quickly rows one by one (without scrolling the ListView, be careful), the swipe becomes really buggy at a time: the swipe is blocked, you can't discover buttons behind rows. Then if you scroll up/down a bit the ListView, it unblocks the swipe. You can reproduce this bug using the example file, I've tested it on iOS devices (iPad, iPhone).

I'm using a per-row configuration and am seeing some strange behaviour. I think its related to the view being updated with new rows while an existing row is a swiped state. It looks like its getting confused as to while row was in the swiped state when the model was updated. I'm not sure how to fix, but a workaround might be to programatically close all rows before the model changes - which in my case would be fine. But how do you do that?

hi,

I love this project. but recently I used it, and found a issues. I set a right button, when click this right button, the row will close manually. Then I remove the last item, it will crash. The console is "Cannot read property 'closeRow' of null". I think maybe the "openCellId" out of array. Should the "openCellId" reset when items changed or the row close manually?

Thanks.

Right now, we have to swipe past the middle of the row and release for it to open. If we release before that the row will close back. How can we adjust this?

I'm trying to use the standalone swipe row component but seems like it always swipe to left.

Really great work, thanks for making this!

How can I close the row if I press on the one of the buttons in the renderHiddenRowfunc?

            renderHiddenRow={ rowData => (
                        <View style={styles.rowBack}>
                            <Text>Left</Text>

                            <TouchableHighlight style={[styles.backRightBtn, styles.backRightBtnLeft]}
                  onPress={ ()=> this._setDefault(rowData)}>
                                <Text style={styles.backTextWhite}>Make Default</Text>
                            </TouchableHighlight>

                            <TouchableHighlight style={[styles.backRightBtn, styles.backRightBtnRight]}
                  onPress={ ()=> this._delete(rowData)}>               
                                <Text style={styles.backTextWhite}>Delete</Text>
                            </TouchableHighlight>
                        </View>
                    )}
                    leftOpenValue={75}
                    rightOpenValue={-150}
                />

When I swipe a row in a SwipeListView it immediately bourse back and won't stay open. I tried reverting back to 0.2.3 but that didn't help, so maybe is an issue with RN0.32

Hi,
i am trying to use a SortableListView with SwipeRow.
the SortableListView item has to be a TouchableHighlight so i wrap SwipeRow inside it but i got this error:

Unhandled JS Exception: Touchable child must either be native or forward setNativeProps to a native component

this is my component:

import React, { Component } from 'react';
import SortableListView from 'react-native-sortable-listview';
import { SwipeRow } from 'react-native-swipe-list-view';
import {
  StyleSheet,
  View,
  Text,
  TouchableHighlight,
} from 'react-native';

class CoolList extends Component {
  constructor(props) {
    super(props);

    this.state = {
        data = {
            a: {mydata: 'one'},
            b: {mydata: 'two'},
            c: {mydata: 'three'},
            d: {mydata: 'four'},
        }
    }
    this.order = Object.keys(this.state.data);
    this._createRow = this._createRow.bind(this);
  }

  _createRow({ mydata }) {
    const {
      rowStyle,
      rowContainer,
      dataStyle,
      dataTimeStyle,
    } = styles;

    return (
      <TouchableHighlight
        underlayColor={'#eee'}
        style={rowStyle}
        {...this.props.sortHandlers}
      >
        <SwipeRow
          leftOpenValue={150}
          rightOpenValue={-150}
          style={rowStyle}
        >
          <View>
            <Text>test1</Text>
            <Text>test2</Text>
          </View>
          <View style={rowContainer}>
            <Text style={dataStyle}>{mydata}</Text>
          </View>
        </SwipeRow>
      </TouchableHighlight>
    );
  }

  render() {
    const { container, buttonsContainer, listContainer } = styles;
    return (
      <View style={container}>
        <View style={listContainer}>
          <SortableListView
            style={{ flex: 1 }}
            data={this.state.data}
            order={this.order}
            onRowMoved={e => {
              this.order.splice(e.to, 0, this.order.splice(e.from, 1)[0]);
              this.forceUpdate();
            }}
            renderRow={this._createRow}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  listContainer: {
    flex: 1
    borderWidth: 1,
    borderColor: 'red',
  },
  rowStyle: {
    flex: 1,
    alignItems: 'stretch',
    padding: 25,
    backgroundColor: '#F8F8F8',
    borderBottomWidth: 1,
    borderColor: '#eee',
  },
  rowContainer: {
    flex: 1,
    flexDirection: 'row',
    // justifyContent: 'space-between',
    alignItems: 'center',
  },
  dataStyle: {
    flex: 3,
  },
  dataTimeStyle: {
    flex: 1,
  },
});

CoolList.propTypes = {
  sortHandlers: React.PropTypes.object,
};

export default CoolList;

How can i fix this?

It would be nice to have a method to bounce the 1st row of the list so users know it's a swipeable list.

Is there a way of telling which way a row is open?

I would like to be able to do something like:

onRowOpen={() => {
  let row = this.refs.row
  if (row.openLeft) {
    doSomethingForLeft()
  } else {
    doSomethingForRight();
  }
}

I'm unable to call the getScrollResponder() function on my ListView. I get:

TypeError: messagesList.getScrollResponder is not a function

I maybe missed something, but anyone had issue with that ? :

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of ListView.

I put a unique key prop on each <View> child of my row, sectionHeader and hiddenRow, method returns, and it doesn't solve anything. I tried to put a key prop on the <View> wrapper in the render method of <SwipeRow> but still get the warning.

Any idea ?

Possibility to have a prop to disable the rows bouncing when they are swiped or when they return to their normal position

Just FYI for searchers:

https://github.com/facebook/react-native/tree/26a92220c2a6355afc0a54be4a7266da50f7c692/Libraries/Experimental/SwipeableRow

https://github.com/facebook/react-native/releases/tag/v0.27.0

It's possible to use refreshControl prop in the SwipeListView??

hi, is there an example of how to delete a row?

This would be useful for applying computationally heavy stuff after the row close is done animating.

Hi Jesse,

I am using cloneWithRowsAndSections according to this simple tutorial but cloneOnPress and the "manually closing rows" does only work on my last section.

Thanks!