RectButton onPress does not work

[mfgabriel92]

Hi,

RectButton's onPress doesn't work. I'm using React Native 0.60.4 inside of a Styled Component:

export const Hour = styled(RectButton)`
  background: #fff;
  padding: 20px;
  flex: 1;
  opacity: ${props => (props.enabled ? 1 : 0.7)};
  align-items: center;
  margin: 0 10px 20px;
`

I've tried running jestify, a manual React Native link despite the recommendations, cleaning cache but nothing works. It decided not to work for NOTHING.

[thecodecafe]

The same issue I'm facing, were you able to fix this?

[4yki]

Make sure you followed this insctructions

[hladf]

...
Make sure you followed this insctructions

Dont worked here :(

[hladf]

Resolved for me. In my case, I forgot to pass spreading props...

[hladf]

The same problem happens again...
Clean cache and run react-native run-android again fix the problem.

[thalesrbs]

Resolved for me. In my case, I forgot to pass spreading props...
Diego`s code! Rocketseat...rs
I also copied them

[yvwbimpong]

Make sure you followed this insctructions

I'm on react-native 0.60.5 and this worked flawlessly. cheers mate.
P.S next time dont use a picture :(

[fellypsantos]

UPDATE 2022-08-17

Documentation changed and the installation is now more easier the ever.
Take a look at the docs:

https://docs.swmansion.com/react-native-gesture-handler/docs/next/installation/#js

Resume:

install the lib
yarn add react-native-gesture-handler

After installation, wrap your entry point with <GestureHandlerRootView> or gestureHandlerRootHOC

export default function App() { return <GestureHandlerRootView style={{ flex: 1 }}>{/* content */}</GestureHandlerRootView>; }

[trsp400]

Make sure you followed this insctructions

Thank you, its working now!!
That's what we got when do not read the docs rsrsrs

[ehxxn]

for me onPress trigger but ripple effect sometimes and most of the time not working. an strange behaviour

[adblanc]

for me onPress trigger but ripple effect sometimes and most of the time not working. an strange behaviour

I have the exact same problem and I'm loosing my mind, did you ever found something ?

[jakub-gonet]

@adblanc, please don't comment on closed issues, those reports are easily missed. You can create a new issue with repro, we'll try to figure this out 😄

[pinchez254]

perhaps you can try this.
In order to make buttons accessible, you have to wrap your children in a View with accessible and accessibilityRole="button" props. https://docs.swmansion.com/react-native-gesture-handler/docs/api/components/buttons/

// Not accessible:
const NotAccessibleButton = () => (
  <RectButton onPress={this._onPress}>
    <Text>Foo</Text>
  </RectButton>
);
// Accessible:
const AccessibleButton = () => (
  <RectButton onPress={this._onPress}>
    <View accessible accessibilityRole="button">
      <Text>Bar</Text>
    </View>
  </RectButton>
);

[lincolnBerlick]

Make sure you followed this insctructions

just add in your MainActivity.java

at the imports

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

and at the final

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

it'll look like this

import android.os.Bundle;
import com.facebook.react.ReactActivity;

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

public class MainActivity extends ReactActivity {
  @Override
  protected String getMainComponentName() {
    return "applicationName";
  }

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }

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

[pedromesmer]

thanks @lincolnBerlick, this solution worked for me

[KJ-GM]

Hello, I am using react-native-gesture-handler version "~2.1.0" , I tried the above solution and it works fine, but then I get this new error: Possible Unhandled Promise Rejection (id: 0):Error: No native splash screen registered for provided activity. Please configure your application's main Activity to call 'SplashScreen.show' (https://github.com/expo/expo/tree/master/packages/expo-splash-screen#-configure-android). Any help?

This what I had before :

@OverRide
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegateWrapper(this,
new ReactActivityDelegate(this, getMainComponentName())
);
}

Added this as stated above :

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

[KJ-GM]

Hello, I am using react-native-gesture-handler version "~2.1.0" , I tried the above solution and it works fine, but then I get this new error: Possible Unhandled Promise Rejection (id: 0):Error: No native splash screen registered for provided activity. Please configure your application's main Activity to call 'SplashScreen.show' (https://github.com/expo/expo/tree/master/packages/expo-splash-screen#-configure-android). Any help?

This what I had before :

@OverRide protected ReactActivityDelegate createReactActivityDelegate() { return new ReactActivityDelegateWrapper(this, new ReactActivityDelegate(this, getMainComponentName()) ); }

Added this as stated above :

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

Any one who has same problem with this just add this line to the onCreate function:
SplashScreen.show(this, SplashScreenImageResizeMode.CONTAIN, ReactRootView.class, false);

[xyeres]

Be sure to follow complete setup steps for react-native-gesture-handler, including wrapping your root component in <GestureHandlerRootView>

[HenriqueVazquez]

you need adjust of this way, involving with GestureHandlerRootView

[dukoo]

Why this issue is closed? The problem hasn't been resolved and still occurs on Android.