Question: I have a button with an onPress event in React Native.

I want to get the entire class this

Here's my code:

```
        <TouchableOpacity onPress={this.onFBLoginButtonPress}>
          <View>
            <Text>Sign In with Facebook</Text>
            <Image source={FBImg} />
          </View>
        </TouchableOpacity>

```

I have tried onPress={() => this.onFBLoginButtonPress}

But this causes the button to not actually process.

How do I pass the entire class's this, without breaking the button?

Answer: 
`onPress={() => this.onFBLoginButtonPress}` is missing the trailing parentheses so it's not actually invoking the method. Should be `onPress={() => this.onFBLoginButtonPress()}`

> 
> I didn't know you needed the parenthesis when you used an arrow function, as you don't without it
> 
> 
> 

You're passing a function to be invoked. `this.onFBLoginButtonPress` *is* a function, so you don't need the parens. But your original arrow function:

```js
() => this.onFBLoginButtonPress

```

Is the equivalent of:

```js
function () {
  return this.onFBLoginButtonPress;
}

```

Which *returns* the function but does not invoke it.

---

### Why the arrow function works and passing this.onFBLoginButtonPress doesn't:

Generally speaking, scope (`this`) within a function is set to the object upon which it was invoked. So consider:

```js
foo.doSomethingCool();

```

Inside `doSomethingCool`, `this` will be set to `foo`, because it was called as a method on `foo`.

However, if you detach the method from the object, the scope doesn't get set:

```js
foo.doSomethingCool() // scope === foo

const cool = foo.doSomethingCool;
cool(); // scope === undefined

```

And this is effectively what you're doing when you pass `this.onFBLoginButtonPress` as an event handler:

```
<TouchableOpacity onPress={this.onFBLoginButtonPress}>

```

You're passing the function itself, which gets called in isolation:

```
// Inside the component receiving the handler prop
// it's just an ordinary function
const {onPress} = this.props;
onPress(); // no scope

```

You could resolve this problem by setting the scope explicitly using [function.bind](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind):

```
// create a copy of onFBLoginButtonPress that's explicitly bound to 'this'
<TouchableOpacity onPress={this.onFBLoginButtonPress.bind(this)}>

```

The reason you don't see this problem with an arrow function is because arrow functions [use the enclosing scope](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this):

> 
> An arrow function does not have its own this. The this value of the enclosing lexical scope is used; arrow functions follow the normal variable lookup rules. So while searching for this which is not present in current scope, an arrow function ends up finding the this from its enclosing scope.
> 
> 
> 

So when you do:

```
onPress={() => this.onFBLoginButtonPress()}

```

`this` inside the handler function is pre-bound to whatever `this` is where the function is declared. So even when invoked in isolation you get the correct scope:

```
// Inside the component receiving the handler prop
// it's just an ordinary function
const {onPress} = this.props;
onPress(); // arrow function's 'this' is already bound

```

Hope this helps.
Ther are two ways to call/invoke `methods/functions` in react native.

> 
> Way-1: Binding the function in constructor.
> 
> 
> 

```
export default class yourClassName extends React.Component {
  constructor(props) {
    super(props);
    this.onFBLoginButtonPress = this.onFBLoginButtonPress.bind(this); //->This will bind your function to the class and have access of this.
  }

  onFBLoginButtonPress() {
    alert('I am Called');
  }
  render() {
    return (
      <TouchableOpacity onPress={this.onFBLoginButtonPress}>
        <View>
          <Text>Sign In with Facebook</Text>
          <Image source={FBImg} />
        </View>
      </TouchableOpacity>
    )
  }
}

```

> 
> Way-2 : Using fat arrow function introduced in ECMA-6
> 
> 
> 

```
export default class yourClassName extends React.Component {

  onFBLoginButtonPress = () => {
    alert('I am Called');
  }

  render() {
    return (
      <TouchableOpacity onPress={() => this.onFBLoginButtonPress()}>
        <View>
          <Text>Sign In with Facebook</Text>
          <Image source={FBImg} />
        </View>
      </TouchableOpacity>
    )
  }
}

```

Try this and this will resolve the issue.