So I first saw a tweet by Kaiyes Ansary, about creating a Expo-Electron based macOS menu bar apps, which I found the idea interesting, since Tempomat has been on the market for a couple of weeks already but the process of learning and mastering native APIs, swift and SwiftUI was not easy at all, I also saw the microsoft just added macOS support for React native and I thought… I think I can make that work, and I did, so now I’m sharing the joy

React Native Run Ios Device
React Native Mac App
React Native Run Web
How To Run React Native App On Mobile
How To Run React Native App On Mac Os
How To Run React Native App On Android Device

npx react-native init myApp --template react-native-template-typescript

A simple rn project, nothing fancy here

Open your terminal and run npx react-native init calculator. When that completes, navigate into the calculator folder that was created and add the macOS extension with npx react-native-macos-init. Once the initial install finishes, in the calculator folder, run the app locally with npx react-native run-macos. After installing NodeJS and NPM successfully in your system you can proceed with installation of create-react-native-app (globally as shown below). C: Users Tutorialspoint npm install -g create-react-native-app Step 2: Create project. Browse through required folder and create a new react native project as shown below.

This is bound to change, you should always follow the instructions on the microsoft react-native-macos site, but for now you can do:

Afterwards you should have a basic RN mac os app, you can try to run it and it will open a normal window

Storyboard software for mac. Ok, this step is not 100% necessary, you could just set up the statusbar button on obj-c but I don’t know objective-c, so I had to do it, therefore delete:

And instead create an AppDelegate.swift, Xcode will ask you if you want to create a bridging header, say yes, and that the following contents:

On the bridging header file

On the AppDelegate.swift

React Native Run Ios Device

Not gonna give away too much of my own code, but that should get you started to have a working status bar item that you can click on.

PLEASE DO NOTE You have to change the module name when registering the root view, in the above snippet it is “tempomat” should be w/e you named your react-native project.

If you don’t want your app to appear on the macOS dock and sit on the background (you won’t be able to alt-tab to it): on your info.plist you need to set the value Application is agent (UIElement) to YES

Make nice with Microsoft Office shortcuts: From time to time Apple and Microsoft’s relationship has. Look down: If you type like a pro, you never normally look down at your MacBook Pro’s keyboard. The Control Strip. The Control Strip, which sits on the right side of the Touch Bar, is fully. Touch bar mac apps.

React Native Mac App

On your Main.storyboard file, delete the old references to the ViewController and the window, and you also have to change the app delegate on the right side attribute panel and give it your macos module, otherwise it won’t be picked up, here is a screenshot that should guide you on where to look 👀:

It was a free app by the way, now it keeps showing up no matter how many times I delete it. I logged into my iTunes account and deleted it from my purchases. Hold both the top power button and the home button at the same time until the Apple logo appears, then release. Deleted folder keeps returning. It's driving me crazy!Sent from my iPad using iMore ForumsHave you tried a hard reset? It doesn't actually install it just keeps saying waiting.

I did run into some weird swift compilation chain error, I think it was because of Flipper support in RN 0.62, make sure that on your target settings DEAD_CODE_STRIPPING is set to YES and Always embed swift libraries is also set to YES

Done, you should be able to hit the run button via xcode (or run the app via npx react-native run-macos) and should see your RN menu bar running!

BUT, there is catch, right now react-native-macos is so fresh… pretty much none of the existing libraries are working, and sometimes that will also mess up your pod install react native vector icons work fine if you follow the macOS steps, but I ended up creating the following yarn command to being able to run pod install without autolinking messing with it:

How to run react native app on android device

You also won’t have the latest version of react-navigation working, I got the latest version of the v2 working and that is fine for now… so yeah, a lot of compromises, but the future looks bright!

I have also created a ready to go template for you to play around, just clone it and hit the run button!

React Native Run Web

Now that you made it here (and I’m sure you like menu bar apps), check out Tempomat, if you work with CIs I’m sure it will make your life easier! also coming to iOS and Android soon!

After some weeks I discovered a couple of problems, one is, I forgot to load the production bundle when using the app on release mode, I updated the contents of AppDelegate on this article to reflect the change.
Since we are using Swift, the normal flags for the change in (1) won’t work so easily, you need to set new Swift flags on the project settings in xcode, go to build settings and search for Other swift flags on the macOS target and add -DDEBUG

How To Run React Native App On Mobile

The template project has been updated to reflect this changes

Munich, 23.05.2020

How To Run React Native App On Mac Os

Projects

How To Run React Native App On Android Device

Site icon 'Ekeko' created by Coloripop on The Noun Project