How to run Shoutem React Native apps locally for testing? - react-native

I've been really enjoying using the Shoutem builder to create a starter template for React Native. However I want to use my own IDE (Deco IDE) to run a simulator locally and change the code.
However, after I "pull" my app from Shoutem via the CLI and run NPM install + react-native link the application won't compile for the simulator. If I use the command shoutem run the application will build and run perfectly, but this is not as convenient as having a simulator and being able to see the code as I change it.
Any help getting a shoutem app running locally in an simulator?
For anyone interested the error I am getting is: Print: Entry, ":CFBundleIdentifier", Does Not Exist

There are 2 ways to run Shoutem app locally.
One way is the shoutem run command. It is designed to work with Shoutem Preview application which you can download from the Google play or the App store. It can be reloaded to see the changes you've made to the local code. This command bundles only the JS code using the packager. Doesn't build native.
Beside shoutem run there are shoutem run-ios and shoutem run-android commands to build and run an RN project for the platform you've chosen. This way you get fully functional RN application which can be debugged as any other RN app. Both the JS code and native are built.
Do not forget to link extensions you're working on by using shoutem link.

Related

Can't test published Expo project on Expo GO when not developping it

I'm working on a react-native app using expo.
I have no problem to display the application on my Android Phone using the QR CODE provided by Metro Builder.
But I would like my customers to be able to see my project even when i'm not working on it.
I published my application using expo publish and Metro Builder gave me a link that is similar to this : https://expo.io/#USERNAME/projects/MyProjectName. My project is in unlisted visibility, so that anyone with the link can see it.
Yet, i'm not able to open it in my Android Expo application. When I visit the link, it doesn't ask me to open it with Expo, and there's no button to do it. If I try to copy the link to my clipboard, and then click Open from clipboard in Expo Go, it will open the navigator again.
I also tried to generate a QR CODE from the link, but it does the same.
How do you open your project in Expo Go when you're not into development ?
You can just use the QR code which already generated by expo is provided in that project link eg. https://expo.io/#USERNAME/MyProjectName or with release channel https://expo.io/#USERNAME/MyProjectName?release-channel=MyReleaseChannelName
Take a screenshot of that QR code and send it. Regardless of the project visibility they will be able to install the app by scanning it with their phone.

Expo React-Native App doesn't work when run as a standalone APK

My Expo-based React Native App works without a problem when run in the Expo tool but gave the following errors when built as an APK to be installed and run standalone.
A series of white screens keep flipping before the blue screen comes up.
Here are my App.JSON and Package.JSON files
Package.json
App.json
And here are the screen capturing the error message.
Actually there are two ways to create a React Native application
create-react-native-app (CRNA)
react-native init
As you stated in comment section, You created your project using CRNA
CRNA will gave you some form of solid project structure, which is really useful for beginners to get started with react native, you code the app with pure javascript and the app will work inside Expo.
Now if you want to take build and run as a standalone apk for android,
There are two methods
You can run command: exp publish:android
You can eject your app from expo
Dont use exp publish for standalone apks,
You can use second method:
To eject your app:
First if you dont use any expo apis inside your apps, it is very easy to eject and build as a stand alone apk.
just do yarn eject
This will gave you some instructions and follow that.
After that your CRNA project structure will be converted into react-native init project structure, now you will be able to see "Android" and "iOS" folders inside your application
To take build Run: connect your phone with USB debugging ON and react-native run android.
That's all.
Solved my own problem. The 'eth-lightwallet' library works perfectly within the Expo development tool but when I build into an APK, it just made the white screen turns up with no meaningful error messages.
The solution is to replace it with a pure web3js implementation.
This may be useful if you are developing a mobile app for Ethereum.

React Native Expo publish to Android

I built a test application using react native. I'm trying to publish it following this tutorial: https://facebook.github.io/react-native/docs/signed-apk-android.html
However, my project does not have folder android. How can I create this folder?
In React-native, there are two method to create Singed APK File
First you should know
it's best to create apps using react-native init rather than expo as React-Native-Cli gives you local project for both ios and android,you can test and debug the code locally and also use the tool to publish applications
- If you create the project by using this command -
react-native init Project_Name
Then follow this method.
BUT IN YOUR CASE
you're using expo and also expo-cli! that's good! but when i use expo i usually like to go with expo XDE which has single version to publish,render or debug with it's own console in the bottom and that'll help you upload your code to expo server where you can ask them to render app for iOS or android and they will return you a link which will download the APK or the ipa file for android or iOS respectively
Here is the documentation link which'll explain you each step one by one and do keep an eye on the notes and TODOs while following the step (in your scenario)
- If you use expo,for create React-native project
then follow this method generate the singed APK file for Android - Expo

Can I not use Expo (cloud service) at all using React Native

I have build an app using react native(detached) but the thing is I would want to completely get rid of Expo. The reason is, what if one day EXPO service get shut down or no more supported.
So in this case I would not want the app to be affected.
Currently I need to publish my app thru ExpoKit to see the latest changes, how would I build my android app so it would not have any reference to Expo but still be able to work properly
Currently this is how I understand how the react native and expo works: first u build ur app using react native code and then a bundle.js is generated somewhere on cloud(EXPO) using publish command so the app communicate with that bundle.js.
Note I am not using any feature from Expo so why would I need Expo in this case?
Edited: If I am detaching my app from expo, I mean why would I still need Expo? Can't I just build the app and run the app without expo at all?
You can build your whole application without using expo, just follow the steps from facebook documentation in "Building Projects with Native Code" tab.
or
you can run "npm run eject" in your project root directory folder.
After this, you can build your appliaction using react-native cli commands, like
react-native run-android.
edited :--
For building apk for production, you can follow steps given in facebook documentation as generating signed apk and for released IPA for iOS yo can follow building your app for production for IOS.

Debug a react-native application using nuclide

Is there any good document/video that talks about how to debug a react-native application using Nuclide.
Am a newbie. Its my first time app development and first time with React.
I did create the project using react-native init. I don't think i found a BUCK file for me to run and debug my app. I also don't see to get how to view the errors in my JS file. I have to run the simulator to see. I run it using react-native run-ios.
I tried Nuclide->React Native->Start Debugging. Not sure what this is supposed to do.
Sorry if these questions sound silly.
According to this instruction you should:
From the command Palette (Cmd-Shift-P) choose "Nuclide React Native: Start Packager" to start the React Native Server.
Ensure that you are in the root directory of the React Native project, then run the application from the command-line: "$ react-native run-ios" (or choose other existing simulator, for example react-native run-ios --simulator="iPhone4s").
After starting the server, you can prime the React Native Debugger for when the application begins running. From the command Palette (Cmd-Shift-P), launch "Nuclide React Native: Start Debugging".
From the Simulator press Cmd-D (Ctrl-D on Linux). This will bring up the debug options for your application. Select "Debug JS Remotely.
...After you enable debugging from the simulated application, Nuclide will attach to that debugging process automatically, since we primed the Debugger above.
Debug JS in Nuclide is now an option in the dev menu added in React Native version 0.52 December 2017 release.
See This