TapGestureHandler not triggering onHandlerStateChange

Question

I have a onHandlerStateChange event in TapGestureHandler. When the onHandlerStateChange is triggered, i want to change the opacity of a button inside TapGestureHandler.

<View style={{ height: height / 3, justifyContent: 'center' }}>
  <TapGestureHandler onHandlerStateChange={ this.onStateChange }>
    <Animated.View 
        style={{ ...styles.button, opacity: this.buttonOpacity }}>
      <Text style= {{ fontSize:16, fontWeight: 'bold' }}>GET STARTED</Text>
    </Animated.View>
  </TapGestureHandler>        
</View>

And inside this.onStateChange i have the following codes to change the opacity.

constructor(props) {
    super(props);
    this.state={
    }
    this.buttonOpacity = new Value(1)
    this.onStateChange = event([{
      nativeEvent: ({ state }) => 
      block([
        cond( eq(state, State.END), set(this.buttonOpacity, 0) )
      ])
    }])
  }

Im using android studio emulator and trying to run android app using react-native run-android and also imported

import Animated from 'react-native-reanimated'
import {TapGestureHandler, State} from 'react-native-gesture-handler'

Im a beginner to react native programming.

Answer 1

Fix ( Please Follow the Steps )

Update MainActivity.java with the following code

//Dont forget to import

import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

// Add the following method to your main activity class

  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      @Override
      protected ReactRootView createRootView() {
        return new RNGestureHandlerEnabledRootView(MainActivity.this);
      }
    };
  }