dcangulo/react-native-outside-press

airbnb/react-outside-click-handler but for React Native.

Hi 👋, I'm David Angulo

Software Engineer

• 🔭 I’m currently working at Advance Tech Lending Inc.

• 🎓 I'm currently taking MSCS at Georgia Institute of Technology

• 👨‍💻 My projects are available at https://github.com/dcangulo

• 📝 I write tutorials on https://www.davidangulo.xyz

• 💬 Ask me about Ruby, Ruby on Rails, React, Next.js, React Native, Expo, and WordPress Plugin

• 📫 Reach me at [email protected] or LinkedIn

Stats

Languages

Trophies

react-native-outside-press's Issues

Fantastic library!

It's just to say to all contributors that you did an awesome job!!!

Thanks a lot for your work!

Renders white screen

For some reasons it doesn't work for me

I do have this in my app.js

const App = () => ( <Provider store={configureStore()}> <PaperProvider> <SafeAreaView style={styles.safeAreaContainer}> <EventProvider> <Screens /> </EventProvider> </SafeAreaView> </PaperProvider> </Provider> );

and in another component this:

<OutsidePressHandler onOutsidePress={() => { console.log('Pressed outside the box!'); }} > <View style={{ height: 200, width: 200, backgroundColor: 'black' }} /> </OutsidePressHandler>

And it shows me just a white screen, and no errors

Allow outside press event to bubble on web

The basic idea is this: clicking on i.e. a button, which would trigger the outside press handler of a different element, should still also execute its own click handler, without having to re-press it.

Based on some crude testing, it seems this already works on native platforms (though I haven't tested all of them), but not on the web.

Now, this might be an issue with my particular project, but sadly I can't share it's code. I hope someone else can confirm the issue, otherwise I'll see about getting a minimal example running.

Can we drop the node engine check

When I install this package, it complains incompatible node version.

error [email protected]: The engine "node" is incompatible with this module. Expected version ">= 16.0.0". Got "14.21.3"

I don't think this is necessary, cause we don't run these code on node. So can we drop the engine check?

`onOutsidePress` doesn't trigger if clicked on any event outside OutsidePressHandler

Thanks for the awesome library. I'm using it on react native web.

I'm facing the issue where clicking anything outside like Buttons or TouchableOpacity doesn't trigger onOutsidePress

Example:

<>
  <OutsidePressHandler
  disabled={false}
  onOutsidePress={() => {
    console.log("Clicked outside 200 x 200 view")
  }}>
    <View style={{  height: 200, width: 200}}></View>
  </OutsidePressHandler>
  <TouchableOpacity onPress={() => console.log("Clicked!")}>
    <Text>Click Me</Text>
  </TouchableOpacity>
</>

Clicking on Click Me doesn't trigger onOutsidePress

Triggers when scrolling

If I touch anywhere just to scroll my outer ScrollView around, the library will immediately fire, causing my expanded component to collapse, which is not what I intended.

Since IMHO that should be the default behavior, I just pushed PR #360 to fire the event on touchEnd instead of touchStart, thus allowing the OS to decide whether this is going to be a scroll or not.

Make `onOutsidePress` optional

Setting onOutsidePress={undefined} should be the same as setting disabled

Warning: Maximum update depth exceeded.

Hi! I found your library and seems to works well, but there is an issue in react-native-web (running with EXPO and webpack)
As soon as OutsidePressHandler is added it starts warning like below:

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

<>
... 
  <OutsidePressHandler onOutsidePress={closeAttachmentsMenu} disabled={!isAttachmentsMenuOpen}>
        <AttachmentsMenu isOpen={isAttachmentsMenuOpen} />
  </OutsidePressHandler>
  <ActionBar />
</>

functionality is ok, but I thing there something missing in the library.