Question: How do you call your own functions predefined functions from the SwipeoutButton?

[MossP]

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?

[dancormier]

Hello MossP,
I'm glad you're finding swipeout handy! I think I may have a solution to your problem...

The scope of this is changed when containing it within a function (basically, this references this function, not the component). You can tie this to a variable so you reference it within your onPress function. For example:

/// define "self"  as "this"
var self = this;


// use "self" in functions to retain scope
var Swipeoutbuttuns = [
  {
    text: "MyButton",
    onPress: function(){ self.myFunction(rowData) },
  }
];

[MossP]

Hi Dan.

Thanks for getting back to me. I hadn't thought of trying to assign a reference to "this" so that i could pass it down the chain. I'll try this out. Thank you :) and thanks again for the plugin :)

[dancormier]

My pleasure!

[MossP]

That worked great. Thank you :)