score:1
as of now, the best way to do this is using the electron platform.
score:3
the question is not recent, but i found it searching for this topic and there is a recent relevant update: with the new desktop efforts from microsoft, this is now feasible, although still tricky.
credits to ospfranco for the great work.
the only way to do it is by editing your appdelegate
class and initialize the status button label and its popover content with the root view content from the react native application. it's also possible to customize its size, appearance and the button at the bar, but only in swift code.
func applicationdidfinishlaunching(_ anotification: notification) {
let jscodelocation: url
jscodelocation = rctbundleurlprovider.sharedsettings().jsbundleurl(forbundleroot: "index", fallbackresource:nil)
let rootview = rctrootview(bundleurl: jscodelocation, modulename: "tempomat", initialproperties: nil, launchoptions: nil)
let rootviewcontroller = nsviewcontroller()
rootviewcontroller.view = rootview
popover = nspopover()
popover.contentsize = nssize(width: 700, height: 800)
popover.animates = true
popover.behavior = .transient
popover.contentviewcontroller = rootviewcontroller
statusbaritem = nsstatusbar.system.statusitem(withlength: cgfloat(60))
if let button = self.statusbaritem.button {
button.action = #selector(togglepopover(_:))
button.title = "tempomat"
}
}
references:
react native macos (microsoft): https://github.com/microsoft/react-native-macos
sample code: https://github.com/ospfranco/react-native-macos-menubar-template
blog post: https://ospfranco.github.io/post/2020/05/23/how-to-make-a-react-native-menu-bar-app-for-mac-os/
Source: stackoverflow.com
Related Query
- Are React Native macOS menu bar apps possible?
- Can React Native apps be tested in a browser?
- Hiding the status bar with React Native
- React native - objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store})
- Building hybrid React apps for iOS and Android with native performance
- React Native Expo StackNavigator overlaps Notification bar
- react native createbottomtabnavigator hide tab bar label
- React Native crashes after upgrade to version 0.56. Possible Babel issue?
- How to debug react native apps in visual studio code?
- How to implement slider menu in react Native
- Material-UI Left Drawer in App Bar won't close on overlay click or menu item click in React
- What are options to debug a React Native + Redux app?
- How to create a custom top navigation bar in React Native
- React Native -- Possible to console.log in return()?
- Sidebar menu in React Native with react-navigation
- Is it possible to draw over the status bar in react native?
- How to create multiple react native apps with same functionality
- Share Database between React Native Apps
- Trying to use GoogleSignIn in React Native then Possible Unhandled Promise Rejection (id: Error: DEVELOPER_ERROR
- React Native - Do a search bar for ios or android
- When using React Native Animated, it possible to animate the offset?
- Cannot use custom tab bar react native
- Elements are going inside the nav bar css react
- React state values are empty inside callback from native event
- Compressing the size of React Native apps
- Why are my search bar results not displaying dynamically as I type using React API
- Are CSS transitions possible for stateless React components?
- React Native authentication and cloud Firestore for web apps
- Why are other images from media library displaying in react native / expo project?
- Hamburger Menu position in React Native
More Query from same tag
- How would you implement pinch-zoom in react-native?
- How to add onMouseDown listener via HOC
- Does React build size change due to named and default imports
- Hide a canvas line when a modal is open
- Axios post on buttonClick, to later render this data on same page
- Updating Boolean Value in React State Array
- getting undefined value of imported function in react
- React useState passed as props is not changing in child components
- React Hook "useState" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function
- How to continuously stream video on canvas in React?
- React useEffect to save textarea text
- Build Reactjs blank page and not generated other pages
- I am trying to set other parameters from the values fetched in dropdown. But the values are not displayed. How can I display them
- React Context API - persist data on page refresh
- Yaml file returning null in Gatsby Graphql query
- How can I replace the default carousel indicators with images?
- How to generate the JWT token using Prisma API?
- Inserting component in <Head> tag in Next.js
- HTML-Loader is not working with Webpack 4 (appropriate loader)
- How to add a watcher for context change?
- CKEditor5 image resize not working correctly
- Show boolean values in table using semantic-ui-react
- How can I give element a unique id to use it in className?
- Make unchecked checkboxes unvailable at specific amount
- How to Parse XML using axios in react js
- Show the latest labels in a bar chart with React.js using react-chartjs
- Simulate click event on react element
- Unable to display data in component with react and redux
- React - How to detect when all sub-components of a parent component are visible to the user?
- How to hide the characters for which there are no products reactjs