How to start writing UWP apps with React Native? - react-native

So there was this big announcement that you can now write Windows apps using React Native.
The announcement links to a Github page which in turn leads to some description on how to install React Windows
After spending a few hours installing Visual Studio and dependencies, SDKs and whatnot, I've got this "ReactNative" solution built in Visual Studio but I still can't figure out how to even start writing a simple Hello World program.
All the documentation points to how to write Android or iOS programs in Visual Studio Code, but there's no indication on how to write a UWP program.
Does anyone know where to start? What is the Visual Studio equivalent of "react-native init"?

After you've run react-native init AwesomeProject…
cd AwesomeProject
npm i --save-dev rnpm-plugin-windows
react-native windows
This will generate the Visual Studio solution for your project and the index.windows.js entry point. Visual Studio Code is a great tool for editing React Native JavaScript.
To run your app just run react-native run-windows.

There is currently no out-of-the-box solution released for UWP Apps with React Native. The only known App with UWP support currently is the F8App, there is a blog post about how they ported it.

You are almost there, the answer is at the command line you do "react-native init" - you don't do it through Visual Studio.
See https://github.com/ReactWindows/react-native-windows#getting-started
The Visual Studio project creates a UWP project which knows how to load and run react-native js code. The VS code is just a wrapper basically.
To start off a new react native project on windows, open the command line ad do the following:
REM This is the same on Mac or Windows..
react-native init AwesomeProject
cd AwesomeProject
REM You need to install the react package manager
npm install -g rnpm
REM Add the rnpm-plugin-windows into your package.json
npm install --save-dev rnpm-plugin-windows
REM This will create a "windows" folder in your project folder,
REM the eqivalent of the ios and android folders.
rnpm windows
REM You will now have a windows folder with a AwesomeProject.sln file
REM You need to start the packager which projects the Javascript bundle to the runtime
react-native start
REM Open the solution in VS and run it, and you will see your app!

Related

npx expo run:android -> CommandError: No development build (<package>) for this project is installed

After running npx expo run:android once, the app was pushed to the device and the app started up.
I then uninstalled the app on the device and then when I run npx expo run:android once again I get the error:
CommandError: No development build (<package-name>) for this project is installed. Please make and install a development build on the device first.
Learn more: https://docs.expo.dev/development/build/
I started another dummy project with another package name and the same thing can be reproduced after uninstalling once.
The built app is not installing once again on the Android device and then starting up.
The docs referenced in the error states https://docs.expo.dev/development/build/#locally-with-xcode-and-android-studio the following:
If you are comfortable setting up Xcode, Android Studio, and related dependencies, you can build and distribute your app the same as any other iOS or Android app.
The npx expo run commands will create a new build, install it on to your emulator or device, and start running it.
Not sure what I am doing wrong. Any help is appreciated.

compile apk on a folder "Android" already created previously in react-native

I'm new to react-native, I've seen tutorials but everyone uses expo. I downloaded this project where they don't use expo. I want to compile this application for android, to finally get an .apk
This application already has a folder called "Android" but inside it does not have its respective .apk. How can I generate it?
this is the repository:
https://github.com/zsajjad/BusinessCard
It would be great if you can attach screenshots of how I should do it
Note. I have the latest version of android studio and I don't see the option of "build"
commands like "gradlew" from the console, they don't work, it's as if I didn't have that command installed
Following instructions for build apk using android studio
Hope you installed node and react native on your machine. If not
please follow the link to install it.Install node and react native
open your command prompt or terminal and redirect to your download project - cd /Businesscard Master (change it according to your project location)
Now enter - npm install
Enter - react-native link
Follow the android related linking instructions on following link react native camera
Hope you know about android camera and storage permissions.
same thing for react native text detector. Because your downloaded project have that packages in package.json
Now open your project android folder in android studio using open existing android project.
Then select build your project from android studio build menu and run it also
Generate apk using build menu- same process you have to follow for native android project
You don't need to use the CLI, that's needlessly complicated and it obscures what Android Studio is actually doing. Here's all you need to do.
Open the whole /Android/ folder in Android Studio. This is your "project" similar to how you open a *.xed file in XCode. Except in Android Studio, you just open up the whole folder to get the build.
Android Studio will now prepare your project using Gradle. If there are any errors in the preparation it will tell you about them. Assuming your gradle and Android Studio versions are compatible and you got no errors, you're now ready to emulate, debug and create a production build. At this point the workflow is similar to using XCode. You'll see emulators under Tools -> AVD Manager.
In the file menus go to Build->Generate APK. You can choose between signed APKs, debug APKs and so on. You'll need the key file if you're signing the APK on your computer, otherwise there's also Google Play signing after you upload the APK.
TL;DR: Just open your /Android/ folder in Android Studio.
Side note: When Android Studio gives you popups to upgrade stuff don't do it. NEVER upgrade Gradle or Android Studio unless the RN / Expo team specifically ask you. This will break your whole project and you will need to rebuild the platform.

How to build react native app on windows

Is it possible to build app in React Native using Windows instead of linux ?
I am a really beginner. On the official website ReatNative we can read:
Assuming that you have Node installed, you can use npm to install the
create-react-native-app command line utility:
npm install -g create-react-native-app Then run the following commands
to create a new React Native project called "AwesomeProject":
create-react-native-app AwesomeProject
cd AwesomeProject npm start
But how to do that on windows ?
There is no information about that
Take a look at this page - Getting Started
Please note that you have to select Building Projects with Native Code Tab. Then you can select Windows and Android
On Windows you can only develop react native app for Android. Then if you want to build apps for iOS you need a IDE called Xcode. And Xcode is only available on mac OS. Other way to build apps for iOS is creating a mac OS virtual machine that runs on Windows. your pc / laptop must have enough computing power to run it. I think 8GB RAM, and SSD and a Intel i5 7x series would be enough.
For installing Node.js and other tools you need for your development on Windows you have to use the command prompt. That is what you was asking for. I hope it helps you. Let me know if you have success.
Take a look here
How to use the Windows command line
Getting Started with React Native Development on Windows

How do I compile a react native project to Android apk file

I wrote the code for the app in Visual basic. I was also using the cygwin terminal for making files, folders, installing packages etc. Expo also so that I can run the emulator. I now have the folder in Visual basic so how do I convert it to an apk file? Please help.

does not create xcode project file in react-native

When I run create-react-native-app AwesomeProject, no XCode project gets generated.
Just this files created :
It's a normal result. create-react-native-app is not supposed to create ios and android folders. It is to be used with Expo client.
If you want to have Xcode files, use react-native-cli:
On the top of this page, click "Building Projects with Native Code" instead of "Quick Start".
run npm run eject at the root of your project folder, it will create ios and android folders.
This will start the process of "ejecting" from Create React Native App's build scripts. You'll be asked a couple of questions about how you'd like to build your project.