Comments (16)
@thespacemanatee can you remove Pressable from ThemedChip and just use a View? Zeego also adds a Pressable on Trigger (on Android) so it won't work well with your Pressable. I am working on adding a native menu for android, which will solve it in the future.
from zeego.
Yeah, there is some magic going on here for Android. Under the hood, it's cloning the child and passing down a ref.
It first extracts the Trigger
child here: https://github.com/nandorojo/zeego/blob/master/packages/zeego/src/menu/create-android-menu/index.android.tsx#L119
Update: now that I'm looking at it again, I don't think forward ref should be necessary, since we're measuring the Pressable: https://github.com/nandorojo/zeego/blob/master/packages/zeego/src/menu/create-android-menu/index.android.tsx#L149-L156
So the only thing that really matters is not using a Pressable I believe. This will be fixed when we move to a native menu.
from zeego.
Thank you guys for the informative discussion, and since there isn't an 'issue' with the Android implementation and a better implementation is coming up, feel free to close this issue! 😃
from zeego.
The Android native menu is now live in version 0.4.0
. It requires installing @react-native-menu/menu
.
Shout out to @intergalacticspacehighway for the #6 PR
from zeego.
hey, thanks for checking! android is on the TODO at the bottom, though i thought it worked. does it just render nothing?
from zeego.
it should be a JS version only. i assume you installed the peer deps?
from zeego.
@nandorojo thanks for the prompt response! Yes, I have made sure to install all peer deps. On Android, it renders nothing when I tap on a View that is wrapped by the <DropdownMenu.Trigger />
from the example code.
EDIT: Added repro in the OP
from zeego.
@axeldelafosse @intergalacticspacehighway were planning on adding the native menu support to Android, it should work after that is added.
i don't own an android so i'm sadly not exactly able to reproduce this one
from zeego.
to be sure, can you just put a text node inside of the trigger?
from zeego.
@nandorojo Using a Text node instead works! Does this mean that I have to menunify
my custom components for it to work on Android?
from zeego.
ahh my guess is that your ThemedChip isn't forwarding down the ref and the onPress prop. try that.
this is only necessary for android (for now)
from zeego.
@nandorojo sorry I realised I should have tried debugging more first before replying, but I found that it actually did work (somewhat), but this is what it looks like after I applied some debugging styles (padding and backgroundColor: "black"
):
I am using a Pressable
component in my ThemedChip
which is stealing touch, and it works if I replace it with a View
. Could you give an example of how I could forward the ref from Trigger
to my Pressable
component? Apologies as I am not very familiar with that 😔 Thank you!
from zeego.
As for forwarding the ref, it should look like this:
import { forwardRef } from 'react'
export const ThemedChip = forwardRef((props, ref) => {
return <View ref={ref}>{...}</View>
})
from zeego.
@nandorojo thanks for the example. I am familiar with that and did try it, but wasn't very sure what it does since DropdownMenu.Trigger
doesn't seem to be forwarding any ref to its children.
Simply using a View
instead of a Pressable
works for the moment, though I can't implement any onPressed styles.
from zeego.
@nandorojo there is a "good" popup menu on android. maybe you can take a look at it
https://github.com/saket/cascade
from zeego.
@ddikodroid thanks for sharing! that's a pretty menu.
using the best native library for a menu is very attractive. i'll admit that it's a bit unlikely that i'm able to add that, since i don't even know Java / native code itself, and i worry about maintaining something so out of my reach. i'd prefer to keep the API surface area within using RN libraries.
maybe there could be some sort of binding for these extra cases, like zeego/dropdown-menu/cascade
. it's hard to say the best way to do it
anyway, i'll keep this in mind. appreciate the suggestion.
from zeego.
Related Issues (20)
- Docs menu bug on mobile HOT 2
- Error building the app (pod install fails) HOT 6
- Z-index issue on web in modal HOT 1
- V2 RFC HOT 1
- Can't install on React Native CLI HOT 4
- Ability to change menu theme on android HOT 3
- Why DropdownMenu.ItemIcon is not showing when used in a custom component? HOT 1
- Delay on ContextMenu onSelect HOT 8
- onOpenChange not firing HOT 1
- Android ContextMenu is opening to the left
- Issue when installing Zeego
- Auxiliary gets smaller every time HOT 4
- [iOS] Dropdown menu items ordered incorrectly. HOT 3
- Question: Two Previews or Two Separate Context Menus HOT 5
- Where to find icons for `androidIconName` prop HOT 6
- Question re: tapping outside a DropdownMenu
- expo-router Stack.Screen headerTitle aligned to left instead of center HOT 1
- Context menu doesn't work at all on the web HOT 1
- iOS Context Menu Ignores action Prop and Defaults to Long Press
- Prevent ContextMenu Preview from dismissing ContextMenu when pressed
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from zeego.