dancormier / react-native-swipeout Goto Github PK

New props: close, onOpen, scroll

These changes achieve:

• Close open swipeout when initiating a swipeout
• Close open swipeout when scroll is initiated

There is currently an onOpen callback - it would be handy if there were an onClose callback as the buttons/components I have maintain state that I'd like to reset between open/close cycles.

How difficult would this be to implement?

I may be approaching this wrong, but once I wrapped the row with Swipeout, the default click state attached to TouchableHIghlight (e.g. this._getTrackedItems( aircraft)) stopped triggering.

      <TouchableHighlight
        underlayColor='white'
        onPress={() => { this._getTrackedItems( aircraft ) }}>
        <View>
          <Swipeout 
            right={swipeoutBtns}
            autoClose='true'
            backgroundColor= 'transparent'>
            <View style={styles.rowContainer}>
              <View style={styles.countContainer}> 
                <Text style={styles.count}>
                  {aircraft.ti_count} 
                </Text>
                <Text style={styles.countLabel}>
                  TI's
                </Text>
              </View>
              <View style={styles.aircraftContainer}>
                <Text style={styles.aircraft}> 
                  {aircraft.reg_number} 
                </Text>
                <Text style={styles.cacheLabel}>
                  last updated: July 18, 2015 at 2:35 PM
                </Text>
              </View>
            </View>
          </Swipeout>
          <Separator />
        </View>
      </TouchableHighlight>

Great plugin Dan. When using the example project as is, things are working as expected inside the ListView. However, if I just drop a component real quick inside my react native playground app, just like the example snippet on the code page shows, I'm not seeing the swipeout working correctly.

After taking a closer look at the code, I noticed that _handlePanResponderMove is properly setting the contentpos state to the right value, but inside _handlePanResponderEnd the value returned by this.state.contentpos is always 0 which results in the swipeout buttons not being shown.

I'm failing to see what is different in my setup here that makes this fail consistently when it's obviously working just fine for most people. Could I be missing something?

When swiping left and not keeping it exactly on a line the parent scrollView will also scroll. That's a bit annoying and not how a native UITableView works.

I've tried applying directionalLockEnabled={true} to it but I assume that only works for it's own pan handler.

It seems as though when I try to put a component within the swipeout right prop, nothing shows. Here's what I have so far:

Also, is there anyway to change the width of the Swipout view? Thanks!

Thanks for adding proper Android support! It works quite well, but for one thing: a touch event requires holding the finger very still.

Consider the following components:

<Swipeout right={{component: 'MyButton', onPress: this._onMyButtonPress}} close={true}>
  <View>
    <TouchableHighlight onPress={this._onRowPress}>
      <... />
    </TouchableHighlight>
  </View>
</Swipeout>

On iOS this works fine, but on Android triggering the TouchableHighlight is very hard: only a slight movement of the finger during the press triggers the swipeout action, which makes _onRowPress hard to trigger.

trippcr@ce2b048 on 2.0.9 still works.

For my understanding, OnOpen should be triggered when the user clicks on the item itself and not when the user swipes left or right. However, OnOpen is being triggered whenever the user interacts with the component. Can you fix this? (Since TouchableHighlight is no alternative)

I am getting an error in xcode that says "Lexical or preprocessor error 'RTCRootView.h' not found."

Firstly, this is amazing!! I love it, thank you! (been wanting to say that for a few days).

My question..
I can see that you can add a function inline by:

var Swipeoutbuttuns = [
  {
    text: "MyButton",
    onPress: function(){ alert('button pressed') },
  }
]

but what if I have a function already?
e.g.

var rowData = {someData};

myFunction: function(data){
  // do something with data and ref "componentRef"
},

render: function(){
  var Swipeoutbuttuns = [
    {
      text: "MyButton",
      onPress: function(){ this.myFunction(rowData) },
    }
  ];

return (
  <Swipeout right={swipeoutbuttons} ref="componentRef">
    // my layout using rowData
  </Swipeout>
}

I considered passing in a custom component but figure that I'll have the same issues as I can't passProps to it either?

Add a wiki for scroll prop to prevent README.md clutter.

getInitialState: function() {
  return { scrollEnabled: true }
}
...
allowScroll: function(scrollEnabled) {
  this.setState({ scrollEnabled: scrollEnabled })
}
...
<Swipeout scroll={event => this.allowScroll(event)}>
  <View>
    ...
  </View>
</Swipeout>
...
<ListView scrollEnabled={this.state.scrollEnabled}.../>

Right now this.props.scroll gets called a lot which means anywhere that calls setState using this value (ie to disable scrolling in parent) will suffer performance issues.

Why is the container red:

Hi,

I am experiencing slow performance (lagging) when I run your example code. Both on Xcode simulator and when built on Iphone 6. everything is up-to-date (xcode, ios).

any ideas? thanks.

After installing react-native-swipeout to my functioning app, I get the following error from React-Native:

"TransformError: /app/node_modules/react-native-swipeout/node_modules/react-native/Libraries/CustomComponents/Navigator/Navigation/NavigationContext.js: This transform does not support getter methods for ES6 classes. (line: 53, col: 2)."

Any idea how I can remedy this? Thanks!

Detect device rotation and render with newly-established device width. I'll need to look into how to detect rotation gesture from within react-native.

I followed the wiki on disabling the scrolling on lists when swiping:
https://github.com/dancormier/react-native-swipeout/wiki/Scrolling

Which works, but when you have large lists (~60+ rows), the swipeout is slow to respond because it's setting state on the list constantly.

I managed to modify the suggested code to first check if the scrollEnabled value has changed and it's a little bit quicker:

  allowScroll(scrollEnabled) {
    if (this.state.scrollEnabled != scrollEnabled) {
      this.setState({ scrollEnabled: scrollEnabled })
    }
  }

However, after scrolling through the list a few times and then swiping out, it eventually gets clunky. It's more noticeable on an actual device also.

Workarounds? Suggestions?

The dependency on react-tween-state is causing these to be pulled in which is not desirable:

├── [email protected]
├── [email protected] ([email protected], [email protected])

There seems to be an issue with PanResponder and 3D touch on new iPhone devices. A TouchableHighlight inside a Swipeout component does not respond to its onPress handler. This issue has been raised in the react-native project (facebook/react-native#3082) but could also be handled in react-native-swipeout by looking at the position of the child component (see facebook/react-native#3082 (comment)).

When you set
scrollEnabled={this.state.scrollEnabled}

Looking at the RN docs and code, there doesnt seem to be any hook for a scrollEnabled property on a list view to lock scrolling. Am I missing something? Did you extend the ListView component?

I am making a page alike IOS Phone - Favorites when you can swipe left for actions and auto-close the swipeouts when tabbing other components or change tab view

licecap is a great way to capture gifs easily on your screen - it would be useful for people browsing this to get a quick look at how it works 😄

Great plugin, thank you. Just a heads up that it's not compatible with Android.

  Attempt to invoke virtual method 'android.view.ViewParent android.view.View.getParent()' on a null object reference

React Native v0.14.2

Like this:

i wish can close an opened swipe,the way ?
if i swipe a row's button, when i swipe at another row, i hope close other swipe, how ?
@dancormier

Running npm start after installing I get
Error: Naming collision detected: /<path-to-app>/node_modules/react-native/node_modules/fbjs/lib/EventListener.js collides with /<path-to-app>/node_modules/react-native-swipeout/node_modules/react/node_modules/fbjs/lib/EventListener.js

This line yields:

2016-01-29 13:38:22.549 [trace][tid:com.facebook.React.JavaScript] onOpen: -1 -1

I've just tried this package and it works correctly with that version of RN, would you update the package json to support it and perhaps publish a new release?

This does not work correctly since the onpress never makes it to the parent.

      <Listitem
          onPress={() => {....;}}
          backgroundColor='#EEE' >
          <Swipeout right={swipeoutBtns} style={{backgroundColor: '#EEE'}}>
              ....

How do you pass a custom property such as a 'row id' to an onPress function on your swipeoutBtns? Since these actions are meant to act on list items, this seems like an obvious need. However I can't find how you approach this in any of your examples?

eg.

onPress: function(id) { console.log('You clicked the button on row ' + id); }

??

Hi, this package looks awesome. I would love to implement something similar on a hover event on a React component for the web. Any tips on the translation? This is not super relevant to the project so feel free to close if you don't have an answer. Thanks!

Hi, Dan!

There is a problem with using a label for swipeout component with a long word, such as "Unsubscribe". The label breaks in two lines. It happens because the the width is limited to 1/5 of Device width.
I've tried to use button component to use a custom View with fixed width, but it didn't fix the issue.

I see two ways to fix this problem:

1. Add a new optional property style to set just stylesheet (not the whole component).
2. Read style property from swipeout component and use style.width for container.

What do you think about it?

1. It renders in parent not visible
2. Then I do show parent
3. And swipeout items not showing <- error

I did investigation and problem with this style prop

swipeout: {
    backgroundColor: '#dbddde',
    flex: 1,
    -> overflow: 'hidden',
  },

Can it be removed or may be another variant ?

Hello,
I am using this plugin and really this is very good. Really good work. 👍

I am trying to use this into ListViews. I am facing below issues:

1. If we try to open swipe-out bar then first should be closed if open
2. There should be provision to check if swipe-out bar is closed or not ?

Current example:

  getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (row1, row2) => true})
    return {
      dataSource: ds.cloneWithRows(rows),
      scrollEnabled: true
    }
  }
, _allowScroll: function(scrollEnabled) {
    this.setState({ scrollEnabled: scrollEnabled })
  }
, _handleSwipeout: function(sectionID, rowID) {
    for (var i = 0; i < rows.length; i++) {
      if (i != rowID) rows[i].active = false
      else rows[i].active = true
    }
    this._updateDataSource(rows)
  }
, _updateDataSource: function(data) {
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(data)
    })
  }
, _renderRow: function (rowData: string, sectionID: number, rowID: number) {
    return <Swipeout
            left={rowData.left}
            right={rowData.right}
            rowID={rowID}
            sectionID={sectionID}
            autoClose={rowData.autoClose}
            backgroundColor={rowData.backgroundColor}
            close={!rowData.active}
            onOpen={(sectionID, rowID) => this._handleSwipeout(sectionID, rowID)}
            scroll={event => this._allowScroll(event)}>
              <View style={styles.li}>
                <Text style={styles.liText}>{rowData.text}</Text>
              </View>
            </Swipeout>
  }

Hey @dancormier, I'm having some issues getting this to work on the 6s+. It works as expected on every other device I've tested, but a child TouchableHighlight does not respond to being pressed on a 6s+. This may be an issue with react-native itself.

The swipeout action itself works, but the panResponder appears to block the onPress from firing on child elements. I did some research and found https://botbot.me/freenode/reactnative/2015-08-28/?page=8 which refers to a similar issue, though I was wondering whether something in the new "3d touch" that may get in the way of correctly passing the onPress action.

//  open swipeout manually
, _open: function(direction) {
    this.refs.swipeoutContent.measure((ox, oy, width, height) => {
      this.setState({
        btnWidth: (width/5),
        btnsLeftWidth: this.props.left ? (width/5)*this.props.left.length : 0,
        btnsRightWidth: this.props.right ? (width/5)*this.props.right.length : 0,
        contentHeight: height,
        contentWidth: width,
      });
    });
    btnsRightWidth = this.state.btnsRightWidth;
    btnsLeftWidth = this.state.btnsLeftWidth;
    if (direction == 'right') {
      // open swipeout right
      this._tweenContent('contentPos', -btnsRightWidth);
      this.setState({ contentPos: -btnsRightWidth, openedLeft: false, openedRight: true });
    } else if (direction == 'left') {
      // open swipeout left
      this._tweenContent('contentPos', btnsLeftWidth);
      this.setState({ contentPos: btnsLeftWidth, openedLeft: true, openedRight: false });
    }
  }
,

I add this function to open swipeout manually, it works only when I touched swipeout content at least once. Actually I found solution without trying to touch once, which write the direct width in btnsRightWidth and btnsLeftWidth variable but it's not universal way at all. What do you think about?

I'm getting this after i've deleted element, datasource was updated and component was re-rendered...

Hell of a bug=)
It started after moving to 0.14.2 from 0.13.1.

1. MainScreen has a ListView with rows rendered to Swipeout nodes.
2. Pressing each node transfers Navigator to node's details page where you can trigger actions that change rows for MainScreen.
3. Hence render is triggered on inactive MainScreen while still observing node's details page.
4. Going back (popping Navigator's history) I observe MainScreen with invisible elements.

If I remove Swipeout the list becomes visible and updated properly after these actions. Also was working with Swipeout and 0.13.1

Like this:

Hi, I'm using react-native-swipeout in a ListView, with the onOpen prop to show the Swipeout buttons only once, as in the wiki.

However, when the dataSource is updated, the component is rendered again and the swipe gesture is not as fluid as without this trick. Sometimes, it doesn't even open the buttons, making the component unusable.

Do you have also this issue? It cannot be seen on the simulator, just on a real device.