okwasniewski / react-native-menubar-extra Goto Github PK

View Code? Open in Web Editor NEW

238.0 238.0 0.0 798 KB

Add MenuBar to your React Native MacOS Application

License: MIT License

JavaScript 7.84% Ruby 8.75% Objective-C 32.51% Objective-C++ 35.77% TypeScript 15.12%

hacktoberfest library macos menubar menubar-app react-native react-native-macos

react-native-menubar-extra's Introduction

react-native-menubar-extra

Easily add native menubar (NSMenu) to your React Native MacOS App.

Warning

This library supports only react-native-macos

Installation

yarn add react-native-menubar-extra
# or ---
npm install react-native-menubar-extra

cd macos && pod install

Usage

import { MenuBarExtraItem, MenubarExtraView } from 'react-native-menubar-extra';

const MenuBar = () => {
  return (
    <MenubarExtraView icon="car">
      <MenuBarExtraItem
        title="Item 1"
        onItemPress={() => {
          console.log('Item pressed');
        }}
      />
    </MenubarExtraView>
  );
};

For more advanced example check out the example folder.

Reference

`MenuBarExtraView`

Container view that sets up root menu.

Prop	Description
`title`	Title that will appear next to icon in system status bar.
`icon`	Name of SF Symbol as string that will appear in system status bar.

Important: Don't pass other types of components as children as it will break the indexing in the menu.

`MenuBarExtraItem`

Prop	Description
`title`	The menu item's title
`icon`	Name of SF Symbol as string that will be rendered next to item's title.
`onItemClick`	Callback that is called after clicking on menu item.
`keyEquivalent`	The menu item’s unmodified key equivalent. For example: "1" or "A".
`keyEquivalentModifierMask`	The menu item’s keyboard equivalent modifiers. Default: `COMMAND`

`MenuBarExtraSeparator`

Separator displayed between items. Needs to have at least one item above and below.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library

react-native-menubar-extra's People

Contributors

Stargazers

Watchers

react-native-menubar-extra's Issues

Feature: custom views

Goal of this issue is to implement rendering of custom views inside of NSMenuItems.

Only MenuBar

Hi @okwasniewski , It would be possible to have only the MenuBar.

That is, when the app is started, the screen with the word "Hello!" does not appear.

Feature: custom images

Goal of this issue is to allow for adding custom images for menubar and also for menubar items.

Featured request: add title props for MenuBarExtraView

Hi,
I need a title prop in MenuBarExtraView to archive that UI

And a question: do you plan to support SVG icons instead of only SF Symbols?

Run terminal commands

Hi @okwasniewski, It would be useful to be able to execute terminal-type commands, like this one here:

const { exec } = require("child_process");

...
          exec("ls -la", (error, stdout, stderr) => {
            if (error) {
                console.log(`error: ${error.message}`);
                return;
            }
            if (stderr) {
                console.log(`stderr: ${stderr}`);
                return;
            }
            console.log(`stdout: ${stdout}`);
        });

So I thought it would be useful to adopt a server solution like this: https://testableapple.com/gaining-access-to-command-line-from-maestro/

Project fails to build after adding the package

This is exactly what I've been needing and thanks so much for creating it 🙌 . I tried it out on a vanilla React Native app (generated via npx react-native@latest init Test --template "react-native@^0.71.0" then npx react-native-macos-init). After running npm install react-native-menubar-extra and cd macos && pod install and I try to run npx react-native run-macos, the project build failed however. (I was able to successfully launch the vanilla app. My cocoapods is installed via asdf-managed Ruby.) I'm not familiar with XCode so I'm not sure what would be the best way to look for relevant logs. I see from the command line:

In file included from /Users/jx/Projects/Frontend/Test/macos/build/generated/ios/FBReactNativeSpecJSI-generated.cpp:10:
In file included from /Users/jx/Projects/Frontend/Test/macos/build/generated/ios/FBReactNativeSpecJSI.h:13:
In file included from /Users/jx/Projects/Frontend/Test/macos/Pods/Headers/Public/ReactCommon/react/bridging/Bridging.h:17:
/Users/jx/Projects/Frontend/Test/macos/Pods/Headers/Public/ReactCommon/react/bridging/Object.h:13:10: fatal error: 'butter/map.h' file not found
#include <butter/map.h>
         ^~~~~~~~~~~~~~
1 error generated.

If I try to run Build from XCode itself, I get a "Command PhaseScriptExecution failed with a nonzero exit code" on RNCore.

Weirdly, I was able to run the example app after cloning the repo without any issue. I also tried to use the exact same react-native version as in the example app to no avail.

I suspect it might have something to do with cocoapods and the Ruby version on my system (I currently have a global Ruby version set via asdf) but I'm lost. I wonder if there's any pointer to help me debug it. Thanks a lot!

Problem with example

Hi @okwasniewski , I cloned the repository, but I couldn't start the example.
I did the following steps:

cd example && cd macos && pod install

Auto-linking React Native module for target `MenubarExtraExample-macOS`: react-native-menubar-extra
Framework build type is static library
[Codegen] Generating ./build/generated/ios/React-Codegen.podspec.json
Analyzing dependencies
[!] The version of CocoaPods used to generate the lockfile (1.12.1) is higher than the version of the current executable (1.11.3). Incompatibility issues may arise.
Fetching podspec for `DoubleConversion` from `../node_modules/react-native-macos/third-party-podspecs/DoubleConversion.podspec`
[Codegen] Found FBReactNativeSpec
Fetching podspec for `RCT-Folly` from `../node_modules/react-native-macos/third-party-podspecs/RCT-Folly.podspec`
Fetching podspec for `boost` from `../node_modules/react-native-macos/third-party-podspecs/boost.podspec`
Fetching podspec for `glog` from `../node_modules/react-native-macos/third-party-podspecs/glog.podspec`
[!] CocoaPods could not find compatible versions for pod "SocketRocket":
  In snapshot (Podfile.lock):
    SocketRocket (= 0.7.0)

  In Podfile:
    React-Core (from `../node_modules/react-native-macos/`) was resolved to 0.71.34, which depends on
      SocketRocket (= 0.7.0)

None of your spec sources contain a spec satisfying the dependencies: `SocketRocket (= 0.7.0), SocketRocket (= 0.7.0)`.

You have either:
 * out-of-date source repos which you can update with `pod repo update` or with `pod install --repo-update`.
 * mistyped the name or version.
 * not added the source repo that hosts the Podspec to your Podfile.

yarn run macos

yarn run v1.22.4
$ react-native run-macos
info Found Xcode workspace "MenubarExtraExample.xcworkspace"
info Building (using "xcodebuild -workspace MenubarExtraExample.xcworkspace -configuration Debug -scheme MenubarExtraExample-macOS")
............
error Failed to build macOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening MenubarExtraExample.xcworkspace.
Command line invocation:
    /Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild -workspace MenubarExtraExample.xcworkspace -configuration Debug -scheme MenubarExtraExample-macOS

User defaults from command line:
    IDEPackageSupportUseBuiltinSCM = YES

Prepare packages

Computing target dependency graph and provisioning inputs

Create build description
Build description signature: 00da7db754c6b3d342c129a7ad338d6c
Build description path: /Users/userName/Library/Developer/Xcode/DerivedData/MenubarExtraExample-gozrvxkkwvqancdnofvwvkwvztgw/Build/Intermediates.noindex/XCBuildData/00da7db754c6b3d342c129a7ad338d6c.xcbuilddata

note: Building targets in dependency order
/Users/userName/Desktop/dir/react-native-menubar-extra/example/macos/Pods/Target Support Files/Pods-MenubarExtraExample-macOS/Pods-MenubarExtraExample-macOS.debug.xcconfig:1:1: error: unable to open configuration settings file
warning: Run script build phase 'Start Packager' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'MenubarExtraExample-macOS' from project 'MenubarExtraExample')
warning: Run script build phase 'Bundle React Native code and images' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'MenubarExtraExample-macOS' from project 'MenubarExtraExample')

2023-09-19 15:44:58.661 xcodebuild[8475:79257] DVTCoreDeviceEnabledState: DVTCoreDeviceEnabledState_Disabled set via user default (DVTEnableCoreDevice=disabled)
--- xcodebuild: WARNING: Using the first of multiple matching destinations:
{ platform:macOS, arch:x86_64, id:03636F9F-D2AB-53D9-A0E1-20C264ECF39E }
{ platform:macOS, name:Any Mac }
** BUILD FAILED **


info Run CLI with --verbose flag for more details.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.