cannot able to access function in Keyboard class

Question

export default someclass extends React.component{
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide',keyboardhide);
}

keyboardhide(){
this.somefunc();
}
somefunc(){

if(mode=='up'){

  Animated.timing(
    this.state.animate.marginTop,
    {
      toValue:0,
      duration: 2000,

    }
  ).start();
  Animated.timing(
    this.state.animate.width,
    {
      toValue:this.screenmanipulate(100,'width'),
      duration: 2000,

    }
  ).start();

}

else {

  Animated.timing(
    this.state.animate.marginTop,
    {
      toValue:top,
      duration: 2000,

    }
  ).start();
  Animated.timing(
    this.state.animate.width,
    {
      toValue:width,
      duration: 2000,

    }
  ).start();

}    
render{
....

.....

}

if I keyboard is closed it throws an error that somefunc() is not defined, bu console.log() is working, I don't know where I am going wrong,

What i expected : the key event will trigger the animation

But what happened: Error undefined is not an object this.somefunc()

@DevAS I have updated the code please have a look – subhashchandru Dec 02 '19 at 02:15 — subhashchandru, Dec 02 '19 at 02:15

score 2 · Answer 1 · answered Dec 02 '19 at 04:19

2

Can you bind the code like the following?

  _keyboardDidHide = () => {
    this.somefunc();
  };

answered Dec 02 '19 at 04:19

Jebin Benny

933
1
5
9

@subhashchandru you need to bind all your functions. Then only you will get the 'this' object. – Jebin Benny Dec 02 '19 at 09:16

Lenoarod · Accepted Answer · 2019-12-02T05:20:09.607

2

you can try to move the someFun before the keyboardhide method. the following code is what I suugest:

componendDidMount(){
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide',this.keyboardhide);
}

componentWillUnmount(){
this.keyboardDidHideListener.remove()
}

someFun = () => {
  // you code
}

keyboardhide = () => {
this.somefunc();
}

the arrow function is default bind this, but the method you define the way is not to bind this. you have to bind this by manual. I suggest you use an arrow function. for more about bind this, you can see this document

constructor(props) {
        super(props);
        this.keyboardhide.bind(this);
    }

the method define order in javascript is important. for that, you can see this answer. it explanations it well.

edited Dec 02 '19 at 05:20

answered Dec 02 '19 at 04:23

Lenoarod

3,441
14
25

why the this is not working, it supposed to work right, what is the reason, Sir? – subhashchandru Dec 02 '19 at 04:47
@subhashchandru, what is the error info? if no error, you first check if the `somefun` is called, if called, it may be the `somefun` content problem – Lenoarod Dec 02 '19 at 05:09
no some fun is not called, I don't think it's a content problem, I also looked into typo I think its bug, what do you think sir? – subhashchandru Dec 02 '19 at 05:15
@subhashchandru, I update the answer, the wrong place is in the addListener, it should be `Keyboard.addListener( 'keyboardDidShow', this.[your function]);` – Lenoarod Dec 02 '19 at 05:21
what is happening in addListener can you explain it genius!!! – subhashchandru Dec 02 '19 at 05:29
@subhashchandru, your addListener is `Keyboard.addListener( 'keyboardDidShow', keyboardhide)`, it means the second parms not hold the component method. it should be `addListener('keyboardDidShow', this.keyboardhide)` – Lenoarod Dec 02 '19 at 05:38

cannot able to access function in Keyboard class

2 Answers2