Where to find icons for androidIconName prop

[JohnSawiris]

It is challenging to find icons for android, I was able to find this list but a lot of the icons there don't work with the androidIconName prop. Is the list of icons I linked to above the intended list to use or is there a different one?

[dedanmsafari]

Also how can i use Ionicons on Zeego...Am aiming for parity on both android and ios.....Having to use different icons for both platforms simply is good DX for me

[nandorojo]

I believe the list is the official Material icons from Google.

To use Ionicons you’d need to use ItemImage

[JohnSawiris]

Thanks @nandorojo

[dedanmsafari]

@nandorojo According to the documentation you state that ItemImage are not yet supported on Android..An example would be highly aprreciated.Thank you

[dedanmsafari]

Thanks @nandorojo

Where you able to get the Icons from material-icons to work?..if so please post a snippet i would highly appreciate. on my end only drawables work..on hover the prop states that

"The name of an android-only resource drawable. For a full list, see https://developer.android.com/reference/android/R.drawable.html.

@platform — android"

[JohnSawiris]

Thanks @nandorojo

Where you able to get the Icons from material-icons to work?..if so please post a snippet i would highly appreciate. on my end only drawables work..on hover the prop states that

"The name of an android-only resource drawable. For a full list, see https://developer.android.com/reference/android/R.drawable.html.

@platform — android"

@dedanmsafari I haven't gotten around to it yet but If I get something working I'll post it. I was going to try ItemImage instead of fiddling around with androidIconName.

@nandorojo do you mean this list? If yes, then none of them worked in my case.
In this example it appears to use the icons from Drawable not from Material Icons.

[Anubiso]

I only found a list here:
https://web.archive.org/web/20171031105029/http://androiddrawables.com:80/
but most of these icons are really old and ugly.
Nesting a icon directly into ItemIcon doesn't work on Android. Using ItemImage doesn't work on Android.
So we are stuck with the old icons, showing no icons at all on android or rendering a completely different component on android.

[nandorojo]

Yeah Android's native menu kind of sucks. Maybe we can make one ourselves someday for v3

[sidorchukandrew]

You can add Material icons to your Android project. Here's how:

1. Open your project in Android studio
2. Right click on drawable (under app/res/drawable) and click New Vector Asset
3. Click the "Clip art" section as seen in the screenshot below
4. Find whatever icon you'd like, edit the color, size and name.
5. Go through the wizard and hit "Finish".
6. Now under the android prop for ItemIcon you can reference it by the name you gave it in step 4.

If you're using Expo, you'll need to write a config plugin that copies the icon into your Android directory during prebuild.

[VGerris]

I believe the list is the official Material icons from Google.

To use Ionicons you’d need to use ItemImage

I don't get any icons to show using it as :

              <ContextMenu.Item key="delete" destructive>
                <ContextMenu.ItemTitle>Delete Tweet</ContextMenu.ItemTitle>
                <ContextMenu.ItemIcon ios={{name: "trash"}} androidIconName='trash'/>
              </ContextMenu.Item>

Also it is documented here that ItemImagine doesn't get used on Android :
https://zeego.dev/components/context-menu

If I use many of the example code as is on SDK 52, I get this error :
error: TypeError: CSS2Properties doesn't have an indexed property setter for '0'

which has something to do with how the properties are built :

const Item = ContextMenu.create(
  styled(({ children, title, ...props }: React.ComponentProps<typeof ContextMenu['Item']>) => {
    console.log({ children, title, props });
    return (
      <ContextMenu.Item {...props}>
        {children ?? title}
      </ContextMenu.Item>
    );
  })({
    height: 52,
    padding: '$3',
    flexDirection: 'row-reverse',
    alignItems: 'center',
    justifyContent: 'flex-end',
  }),
  'Item'
);

I read that the content needs to be rendered as 1 piece and some other web specific notes, but as someone with little experience at the moment, this is very hard to debug and fix.

It would be really helpful to see a complete example in the documentation that shows a menu that has icons on Android, Web and iOS.

I was able to style a menu on web in a separate file, and on iOS it looks great, but on Android the icons are missing and the alignment is off, so when using long click the menu pops up in the left corner and when let go the next page is loaded ( based on the example of the video I believe ).

In short, to me it seems this library does not deliver on it's promises, or at least not what I can figure out based on docs and examples. The complete example gives the same error currently.

Again, a full example would be greatly appreciated, as a clear indication of the limitations. Currently I still have to code for 3 platforms unfortunately.
Nevertheless, great promising start, if I find the time and understand it fully, I might try to contribute with code instead of feedback.
Thank you for your work and help!

[VGerris]

I came across this example ( similar idea ) and tried it out and noticed that it also works with zeego :
https://github.com/mpiannucci/react-native-context-menu-view/blob/main/example/App.js

I noticed that when the property set as so:
<ContextMenu.ItemIcon ios={{name: "trash"}} androidIconName='outline_circle'/>

that the menu on Android also gets an icon if that icon exists in path:
android/app/src/main/res/drawable
in this case as outline_circle.xml as in the example.

So it seems that the library may be looking in the wrong path?
Or does there need to be an addition of icons somehow ? There is type completion that shows things like 'pin' that work on iOS.

Just sharing what I found, I am not familiar with where the icons on Android are otherwise, but the above works.

Now there is only one remaining issue, which is that the menu pops up elsewhere then where long pressed - this does not happen on iOS not in the other library.
Should I file an issue for that ?
thank you

[sidorchukandrew]

@VGerris Yes, you need to add the icon to your Android folder. Please follow the instructions here.

When you're developing with React Native, you have to remember that each platform (iOS and Android) has differences. The power of RN is that you get to access each platform's unique qualities. iOS comes with a bunch of icons pre-baked (see here). Android has some pre-baked but they are very very dated looking. You need to add the icons manually to your Android project. Then, whatever the file name is that you added to the Android project, you pass to the Zeego menu as the icon name.

[VGerris]

@VGerris Yes, you need to add the icon to your Android folder. Please follow the instructions here.

When you're developing with React Native, you have to remember that each platform (iOS and Android) has differences. The power of RN is that you get to access each platform's unique qualities. iOS comes with a bunch of icons pre-baked (see here). Android has some pre-baked but they are very very dated looking. You need to add the icons manually to your Android project. Then, whatever the file name is that you added to the Android project, you pass to the Zeego menu as the icon name.

hi, thank you for the references, I found them before. I am very much aware of the differences between iOS and Android to a certain degree and also the possibility of styling separately. I hope you agree that the prupose of this library is as much as possible to style once and have the library take care of styling in a native way.
The reason I want to use as much as possible libraries that take care of things cross platform, that is in my perception the whole purpose of React Native itself to a certain degree on OS level and for things like Solito, Moti, Zeego and such on the styling level.

So in my simple percerption, if I have a snippet like this :

              <ContextMenu.Item key="delete" destructive>
                <ContextMenu.ItemTitle>Delete Tweet</ContextMenu.ItemTitle>
                <ContextMenu.ItemIcon ios={{name: "trash"}} androidIconName='trash'/>
                <Ionicons name="trash">Delete Tweet web</Ionicons>
              </ContextMenu.Item>

I expect to have a menu that looks and works the same on at least iOS and Android and ideally show an unstyled menu on web, with an icon if that is what the documentation suggests.

The reality is that the Android menu is not popping up under the longpress, the icon doesn't show up on Android and I believe not on web either - I am using 2 files any way now to style web separately and use radix-ui because of the issue with properties.

A few improvements to the docs I would make:

• Android icons when written as above need to be in res folder or be named like ( link to old icons ) to work
• Android right click alignment should be like ..... ( I have no idea, so if this bug is not fixed I will change to the library I linked and radix-ui on web )
• web styling one can do like ( ideally dripsy example that uses same style set )

Now I see the potential of this and I think it is the way forward, but for wider adoption it needs to get some more love I think. I am guessing to someone familiar with the code these changes are not the hardest, I unfortunately do not have time now to dig that deep, I need things that work across platforms.

I will try to find time to make PRs for what I mentioned and see if I can find how to align the long press on Android.

I suggest to check the full example here : https://zeego.dev/style/dripsy and run it on an Expo 52 ( new platform enabled ) and see what the error is - with a good full working example and some mods to docs, this is already a lot better.

Just trying to help and improve with the resources at hand, thank you again for your work and help!