react native - binding functions not working

Question

I'm using this library: https://github.com/wix/react-native-interactable to create an interactable view.

Here's an example of a working use case:

import { Component }, React from 'react';
import { View } from 'react-native';
import Interactable from 'react-native-interactable';


class MainScreen extends Component {

  onDrag() {
    console.log("dragging...")
  }

  onSnap() {
    console.log("snapped!")
  }

  render() {
      return(
          <View>
              <Interactable.View
                  style={{backgroundColor: '#000000', width: 100, height: 100}}
                  horizontalOnly={true}
                  snapPoints={[{x: 0}, {x: 200}]}
                  onDrag={ () => this.onDrag() }
                  onSnap={ () => this.onSnap() }>

              </Interactable.View>
          </View>
      )
  }

}

However, because I wanted to get the event object in the call (as mentioned here), I'm unable to implement it correctly. For some reason, the onDrag and onSnap functions aren't getting called. Here's my implementation of binding functions (that isn't working correctly):

import { Component }, React from 'react';
import { View } from 'react-native';
import Interactable from 'react-native-interactable';


class MainScreen extends Component {

  onDrag(event) {
    console.log("dragging...", event)
  }

  onSnap(event) {
    console.log("snapped!", event)
  }

  render() {
      return(
          <View>
              <Interactable.View
                  style={{backgroundColor: '#000000', width: 100, height: 100}}
                  horizontalOnly={true}
                  snapPoints={[{x: 0}, {x: 200}]}
                  onDrag={ this.onDrag.bind(this) }
                  onSnap={ this.onSnap.bind(this) }>

              </Interactable.View>
          </View>
      )
  }

}

Anyone has any idea what am I missing out on? I also tried binding the functions within the constructor, but it didn't seem to work.

score 0 · Answer 1 · answered Mar 30 '18 at 10:24

You need to pass the event object to the arrow function while binding like

  <View>
          <Interactable.View
              style={{backgroundColor: '#000000', width: 100, height: 100}}
              horizontalOnly={true}
              snapPoints={[{x: 0}, {x: 200}]}
              onDrag={ (e) => this.onDrag(e) }
              onSnap={ (e) => this.onSnap(e) }>

          </Interactable.View>
      </View>

However its not a good idea to bind functions in render method as a new instance of it is created everytime render is called. Check this question for more details:

How to avoid binding in render method

You could instead bind the function in constructor for your use case

class MainScreen extends Component {

  constructor(props) {
     super(props);
     this.onDrag = this.onDrag.bind(this);
     this.onSnap = this.onSnap.bind(this);
  }
  onDrag(event) {
    console.log("dragging...", event)
  }

  onSnap(event) {
    console.log("snapped!", event)
  }

  render() {
      return(
          <View>
              <Interactable.View
                  style={{backgroundColor: '#000000', width: 100, height: 100}}
                  horizontalOnly={true}
                  snapPoints={[{x: 0}, {x: 200}]}
                  onDrag={ this.onDrag }
                  onSnap={ this.onSnap }>

              </Interactable.View>
          </View>
      )
  }

}

I've already tried this. I did mention this above: `I also tried binding the functions within the constructor, but it didn't seem to work.`. Tried it again, it's still not working. — Ketan Malhotra, Mar 30 '18 at 10:29
is the event object null or the function is not called at all — Shubham Khatri, Mar 30 '18 at 10:30
can you produce a reproducible demo of codesandbox or something — Shubham Khatri, Mar 30 '18 at 10:33
I just checked again. When I print simple text like `console.log("testing");`, it's showing it in logs, but right when `console.log("event", event);` is executed code-wise, everything in the app stops functioning. Even the `testing` doesn't show in logs when I try to drag the component again. I think the app is crashing or something but it shows no error. Everything just hangs by itself. P.S. the bound function is getting called, but on printing `event` in console, everything stops working. — Ketan Malhotra, Mar 30 '18 at 10:38

score 0 · Answer 2 · answered Mar 30 '18 at 10:52

I realized the reason it wasn't working was because printing console.log("dragging...", event); caused an error leading the app to crash and stop working.

The easy fix was to not print the object event directly. When I tried to print event.nativeEvent.state, the code was working. Though, this was the only error, I'm not sure why React Native debugger didn't pop up the error OR print the error in the logger.

react native - binding functions not working

2 Answers2