Use Expo iOS app to test pure react native code - ios

I want to be able to test an app created with react-native init through the expo app downloaded from the app store. How can I do this?
I'm trying to use pure react native (no expo at all) and want to test my code on my iOS device. A while ago, I was able to do this through the expo app simply by running npm start. However, now when I run npm start I only see Running Metro Bundler on port 8081..

You cannot run a project created with react-native init with the Expo app. However, you can use https://snack.expo.io/ to test plain React Native code in either the browser emulator or on your device (which will open through the Expo app) by pointing your iOS camera app at the QR code they display for you. The caveat to this is that you cannot use native modules within a Snack.
Depending on the size of your app, you can port your code over from react-native init into a freshly created expo project. I have managed to do this on several projects in the past with great success. The process can be tedious depending on the age of your dependencies however.

Related

React Native, iOS, trying `yarn run ios` and I get RCTAppDelegate.h not found

Trying to build a React Native iOS app, and while I got it running fine using Android, trying to get it running on iOS has been a bit of a nightmare.
I created this base react native app, back in Sept 2022, doing the typical npx react-native init <projectname> and was working on android mostly (I use a linux box, and I have to use Teamviewer to connect to a mac to build the iOS apps).
I had my app working fine in android and iOS, and then added the Zoom Video SDK and everything went to hell. Got it working fine in Android, and tried to take my changes and build them in iOS but I couldn't get it to work, and seemingly got my iOS project corrupted, so I tried to create a fresh iOS project, by basically created a same-named project in a different directory, and replacing the <projectname>/ios with the new base ios project.
Of course, I did this Jan 2023, so it's the new architecture, and the AppDelegate.h tries to import the RCTAppDelegate.h file instead of React/RCTBridgeDelegate.h
I do my usual yarn install go into the ios directory and pod install and then try to do a yarn run ios and it tells me it can't find RCTAppDelegate.h
Anyone solve this yet? The React-Native docs aren't up to date with their github repo
I got the same error, i solved it by opening the .xcworkspace instead of opening .xcodeproj
I also cleaned the build folder by
Product --> Clean Build folder
and then it successfully built the app.

react native IOS app crash when restart or send to other device

we are testing IOS app on python selenium, Appium, our client made the app with react native, when I built the app it will work fine, but once I shutdown/ or restart my device or even send it to another device it will crash, I searched for this but did not find any helpful things. and I don't think it has anything with Appium because this will happen even without running it.
why is it happening?
I do not know anything about react native, is there any token for the build on react-native?
I found out what was happening, I was building the debug version, it will only work when the react-native terminal window is active, to make it work I used
npx react-native run-ios --configuration Release
and it's working fine now

Integrating React-Native to an existing App

I'd like to integrate react-native modules in already existing iOS App but keeping both solutions separately.
Instead of doing this https://facebook.github.io/react-native/docs/integration-with-existing-apps.html which modifies the existing solution, I would like to have a standalone react-native solution and somehow import the Xcode project of the react-native app into my already existing app.
This allows me to continue developing the already existing app without being affected by the RN solution which installs and add libraries to the Xcode project.
Basically the concepto would be to export the react-native solution as a bundle or static library and import it in my already existing iOS App. After that interact with this library from the already existing iOS App and also allow the React-Native Solution library interact with the already existing app. There should be a way to communicate from the already existing app to the RN Solution library and also from the RN solution library with the already existing (i.e. for launching modules from the already existing iOS app and also from the RN solution be able to launch views of the already existing app)
Is this possible?
You can do most of the things you are referring. Excuse me if a miss something...
Runninig as standalone
If you don't have ios and android folders in your RN directory, you must run react-native eject from CLI.
React-native application can be started as a standalone native app using the CLI commands below:
react-native run-ios (only on MacOS)
react-native run-android
Add --port #### if the default is being used.
Both commands will start something like a sandbox native app which will load the JS inside. It will also start the Metro bundler which will serve the js bundle as well.
Loading RN into existing app
You need to add the native RN libraries for Android and iOS as dependencies, so you can use them to load either the JS bundle from the Dev server or insert the JS bundle within the native build.
To use the dev server run react-native start.
To build the JS as a file which will be added to the native package you must run:
react-native bundle ios
Followed by couple of options
--dev false or true
--entry-file index.ios.js change this to match your entry file. It may be just index.js. Be carefull to match the name inside Java/Obj-C code.
--bundle-output ../YOUR-EXISTING-IOS-APP/main.jsbundle
--assets-dest ../YOUR-EXISTING-IOS-APP
Communication
This happens over the RCTBridge.
Check this page for a explanation and examples how to access native functionality from the RN environment.

WebStorm - React-Native App simulator not working

I created a brand new React-Native app using WebStorm. When I click on Run -> iOS to fire in iOS simulator, I don't see iOS simulator loading. I don't see any errors also. Here is the screenshot after I run the project.
Now I could run react-native run-ios to get iOS simulator to work (btw which works), but I would like WebStorm to fire simulator so that I can use in-built debugger in WebStorm.
What webStorm and react-native versions do you use? looks similar to WEB-29569, fixed in 2017.3
It's possible that WebStorm uses not latest version of react native that caused some troubles with Xcode version.
First you need to upgrade your Xcode to currently latest version.
Second you would better use stable version of Node JS.
I recommend you not to create app with WebStorm. For today the best way to create new app is create-react-native-app command line tool. It will create app using expo kit. As app will be initialized - run npm start (or better yarn start if you have it, because yarn is optimized version of npm). As it loaded it will show you QR code in terminal witch is you should read with your device and it will install Expo App and open your app inside it. Also you can press i to run iOS simulator.
Here is short documentation for creating app with create-react-native-app. Follow this steps and everything will be all right.
https://facebook.github.io/react-native/docs/getting-started.html

Build Ionic Application From Xcode Project

I'm building an iOS application using Xcode/Swift, and I have a few less-than-technical group members who don't really know how to build Xcode projects, but are interested in seeing/testing the progress of the application. One group member pointed out that they could test the app using Ionic/Ionic View. However, to my understanding, Ionic works by building an application in the specific Ionic framework, and then Ionic translates the project into an Xcode/Swift project (.xcodeproj) or an Android project. Is there a way to do the reverse conversion––is there a way to convert my Xcode project so that it will work on Ionic, or specifically Ionic View?
Ionic is tool like cordova created to develop hybrid apps (from HTML+JS+CSS --> to Native iOS/Android/WinPhone/BlackBerry). The UI is running in native webView, and using some native functionalities by plugins but it is not created to make Ionic/Cordova app from native.
If you want to share your app to tests, use Apple TestFlight
'Ionic View' is a very good advice and the one I would suggest in your case as well.
You don't have to do anything in your code really to use it, just create an ionic account and in your terminal, change into your ionic project directory and then type:
$> ionic upload
You will be asked for the usernmame and password of the account you just created, the application will be uploaded and you will get a unique app ID. You can then share that ID with anyone who you want to test your app, as long as they have the Ionic View app installed on the their iOS or Android devices.
Also do make sure you have updated your global ionic and cordova packages to the latest version before you upload:
$> sudo npm uninstall -g ionic && sudo npm install ionic
Now, as 3squad mentioned, many of they Ionic Native plugins are not supported so don't expect everything to work, but it's a good start to show most of your app and design running.
Here's a list of currently supported plugins.
Please do keep in mind that the performance using Ionic View will be far worse than if you actually build, release and give your users and actual production .apk or .ipa file to install. This latter approach would also showcase the full, final performance and functionality resulting from your code, but it may be more cumbersome.
Here's how to release a production version of your app.

Resources