Custom image/icon

[Bilalwarind]

trafficstars

How we can use custom image or icon from assets folder other than SF symbols?

[Gregoirevda]

patch the library and use UIImage(named: image)

[Gregoirevda]

@Bilalwarind Seems like this was merged: https://github.com/react-native-menu/menu/pull/731/files but not depoyed to npmjs yet

[ptahdunbar]

@Gregoirevda @Gregoirevda its deployed in 1.0.0 — but how do you use it?

[honcon]

You can pass the image name from an image you have put in xcassets

[alaughlin]

@honcon are you able to elaborate a little more for us react native devs who never really have to touch the native code? in my case I'm using EAS so the ios dir isn't even part of the repo - it's generated at build time

[honcon]

I think something like this https://github.com/EvanBacon/expo-apple-targets could be a solution

[hesselbom]

Here's how I solved adding custom icons to Expo project using CNG/prebuild.

It involves creating an asset and writing a custom Expo config plugin to copy it into XCode on clean prebuilds.

1. In XCode, create a new asset (New File... > Asset Catalog) and add all your images there, let's say you call it MyImages.
2. Right click on that asset, press Show in Finder, then move the file to your project root so it's not part of XCode anymore.
3. Create a file called plugins/withXcodeBundleResource.js with the following content (inspired by this comment):

/* eslint @typescript-eslint/no-var-requires: 0 */
const path = require('path')
const { withXcodeProject, IOSConfig } = require('expo/config-plugins')

function withXcodeBundleResource(config, fileArray) {
  return withXcodeProject(config, async (config) => {
    for (const file of fileArray) {
      config.modResults = await setFileAsync({
        file,
        projectName: config.modRequest.projectName,
        project: config.modResults,
      })
    }
    return config
  })
}

async function setFileAsync({ file, projectName, project }) {
  const thisFilePath = path.join('../', file)
  if (!project.hasFile(thisFilePath)) {
    console.log(`Adding ${thisFilePath} to Xcode project`)
    IOSConfig.XcodeUtils.addResourceFileToGroup({
      filepath: thisFilePath,
      groupName: projectName,
      project,
      isBuildFile: true,
    })
  }

  return project
}

module.exports = withXcodeBundleResource

4. Then in your app.json, add it as a plugin with an array of files to copy, in this case your newly created MyImages.xcasset:

[...]
    "plugins": [
      [
        "./plugins/withXcodeBundleResource.js",
        ["./MyImages.xcassets"]
      ],
[...]

5. Now I can use any image from MyImages.xcassets as the image value for an item.