How to create React-Native tvos project? - xcode

all. I am having a hard time creating a project that can build and run. I can create normal iOS react-native projects without issue, but I don't understand the instructions for the tvos setup. Can someone please explain or simply tell me what lines to enter into the terminal? I am currently creating react native apps using npx (like npx react-native init myproject, npx react-native run-ios etc).
Here are some resources: https://facebook.github.io/react-native/docs/building-for-apple-tv
This one says "The RNTester app supports Apple TV; use the RNTester-tvOS build target to build for tvOS.". I don't know what "RNTester app" is, or how to "use RNTester-tvos build target".
Also, I don't understand anything here: "https://github.com/react-native-community/react-native-tvos"

It's been a while you posted but I had the same issue and finally figured it out:
Depending on your react-native-cli version you can do:
react-native init TestApp --version=react-native#npm:react-native-tvos#latest
or
react-native init TestApp --template=react-native-tvos#latest
TestApp is the name of your App
https://developer.aliyun.com/mirror/npm/package/react-native-tvos

Related

Xcode 13 Debug-iphonesimulator/YogaKit/YogaKit.modulemap not found for a brand new project just initialized

A brand new React Native 0.66 app was created with command below:
npx react-native init myapp
The app was launched successfully with npx react-native run-ios. In Xcode 13, the myapp.xcodeproj is opened to test if the build will pass. To my surprise, build throws the error below:
fatal error: module map file '/Users/macair/Library/Developer/Xcode/DerivedData/xyz_app6-gpxsmunajzbqoualaavtsfpnerep/Build/Products/Debug-iphonesimulator/YogaKit/YogaKit.modulemap' not found
What is wrong here? I haven't put any code into the app and it is all React Native generated code. Xcode becomes beast by itself even though the React Native app itself runs fine. That's why the app has to be rebuilt.
This seems to be a common problem. The solution works here is just open the myapp.xcworkspace in Xcode instead of myapp.xcodeproj. The build upon workspace went through without any error.

Xcode not reflecting latest app codes from react-native

EDIT:
Okay turns out this is not a problem with AppStore i ran the app from Xcode release mode and i got the same old version running on the simulator i don't know why but Xcode is not running the latest jsbundle.
now i found this question with the same problem and tried following it i ran this command:
react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios/assets and put the newly generated main.jsbundle inside /ios/ProjectName but still when i ran the code from Xcode it gives me an old version
i also tried cleaning and rebuilding and removing derived data and building again with same result
i recently uploaded an app to the Apple App Store but seems to be having issues with it here's the case i uploaded the app and it got approved and says its ready for sell but when i go to the app store and download the app it is just the previous version of the app and i don't see all the new changes made on the app...this is kind of strange for me i have also uploaded a new logo on the new version release and the logo is updated..the version is also updated on the app store listing the previous one was 1.0 this one shows 1.1 and the "Whats new" section is also updated...i have also changed the preview and screenshots with this new version that is also reflected on the app store listing but only when i download the app i get the previous version.
i tried going to my app store connect and then Activity and i see my build is there with a correct uploaded date and build numbers...is there something i am missing here?
Thanks,
Here is a detailed trial-and-error process trying to pin down which step is crucial to resolve the issue.
I start from the code base where npx react-native run-ios --configuration Release does reflect new changes in the code base. Each subsequent round follows the previous round, i.e., the previous round's end state might affect the next round.
Round 1
Remove main.jsbundle from both Xcode and the file system.
Make changes to the react native code base.
Run npx react-native run-ios --configuration Release
FAIL, new changes not reflected in the build.
Round 2
Try npm start -- --reset-cache
Run npx react-native run-ios --configuration Release
FAIL, new changes not reflected in the build.
Round 3
Try "Cmd + Shift + K" within Xcode to clean build.
Run npx react-native run-ios --configuration Release
FAIL, new changes not reflected in the build.
Round 4
Run react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/your_app_name/main.jsbundle
Run npx react-native run-ios --configuration Release
FAIL, new changes not reflected in the build.
Round 5
In Xcode, manually add the main.jsbundle file to your app folder. In your project, right click on the folder baring your app's name, choose "Add file to your_app_name", and add main.jsbundle in the app folder. Note that the bundle we add here was created in Round 4.
Run npx react-native run-ios --configuration Release. In the output message during command execution, a new message shows up: "Copying /.../your_app_name/ios/your_app_name/main.jsbundle".
SUCCCESS, new changes are showing now. This suggests that the bundle created in Round 4 is used for this build, instead of some previous version cached somewhere.
Round 6
Make another change in the react native code base.
Directly run npx react-native run-ios --configuration Release without building the bundle manually. The copy message does not show up.
FAIL, new changes not reflected in the build. Note that main.jsbundle exists in both Xcode and the file system.
Round 7
Run watchman watch-del-all to clean cache of watchman.
Run npx react-native run-ios --configuration Release. The copy message does not show up.
FAIL, new changes not reflected in the build.
Round 8
Run react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/your_app_name/main.jsbundle to rebuild a bundle.
Without tinkering with Xcode, directly run npx react-native run-ios --configuration Release. This time, the copy message shows up.
SUCCCESS, the latest changes are showing now.
Conclusion
At least on my laptop, manually building an offline bundle is required for each new release build to reflect the latest changes in the react native code base. Building the bundle only works if the bundle is added to the app folder in Xcode. It seems that we only need to add the bundle to Xcode once.
Also a big caveat is that the behavior might be different with a different Xcode version.
Versions I am working with
macOS Catalino 10.15.6
Xcode 11.6
react-native 0.61.5
I had the same issue and it turned out to be because it was running a cached version of the app so it got solved by doing npm start --reset-cache

ERROR: main.jsbundle does not exist - React Native 0.60.4

I'm trying to publish my first React Native app in App store and when I'll build in Xcode:
Product > Archive
appears some error, but i already have main.jsbundle
main.jsbundle does not exist. This must be a bug with
echo 'React Native
Screen Error:
You can generate a new main.jsbundle using this command.
react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios
Run this command in your project directory.
In my case, I was able to fix the issue by removing main.jsbundle from Bundle Resources.
Open react native project in xcode
Check if Copy Bundle Resources build phase contains main.jsbundle
If it contains, remove it and build again
Clear watchman watches:
watchman watch-del-all
Delete node_modules:
rm -rf node_modules and run yarn install
Reset Metro's cache:
yarn start --reset-cache
Remove the cache:
rm -rf /tmp/metro-*
In Xcode, you should be able to find the main.jsbundle inside the Xcode project sidebar.
If it isn't there, then you should drag the main.jsbundle into your Xcode project (in the default template app you can find it at ios/main.jsbundle)
If it is in there, but red - then you need to build a copy of the main.jsbundle which you can do via react-native bundle (and some additional args which you can look up.
I was getting the error because of a bug in the code, instead of using simulator I was using Xcode to install a release build to my device which led to this error.
To fix this, run the app on the simulator make sure it builds and runs properly and then install it on your device.
Try this instead
Go to Xcode
Go to targets
Select Build phases from the top
Just remove main.jsbundle lib from Copy Bundle Resources in build phase
re-run again.

Can't find React native project on iOS Simulator or Xcode project

I have deleted my project on Xcode may it be .xcworkspace or .xcodeproj.
Because of that, I had to delete IOS and android folders while downgrading, updating and re-upgrading my react version to re-install IOS and android folders.
Thanks to that the emulator is working but unfortunately the project isn't present in the emulator and is still absent with Xcode. One thing to point out is that the simulator only appears when ran in the integrated terminal and nor in general terminal after cd-ing in the project folder.
Can anyone please help re-integrating the project in the emulator and on Xcode, please.
Here is the error when the emulator is running in a general terminal:
Here is the error when the emulator is running in a general terminal:
error Command failed: xcrun instruments -s
xcrun: error: Failed to determine realpath of '/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator12.1.sdk' (errno=No such file or directory)
xcrun: error: unable to find utility "instruments", not a developer tool or in PATH
Here is the error for building the project within emulator when ran from VS code integrated terminal:
error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening project.xcodeproj
The process you need to follow is so similar to renaming a react native app. Basically you just need to run react-native upgrade in your root project directory. For further info you can check another question here. The instructions below explains how to create another react native project based on a copied one with a new name.
First copy the directory which your to-be-name-changed application exists. And go to your newly cloned directory.
Change the name at index.ios/android.js file which is given as a parameter to AppRegistry.
Change the name and version accordingly on package.json
Delete /ios and /android folders which are remaining from your older app.
Run $react-native upgrade to generate /ios and /android folders again.
Run $react-native link for any native dependency.
Finally run $react-native run-ios or anything you want.
Courtesy of
https://stackoverflow.com/questions/42506068/how-can-i-regenerate-ios-folder-in-react-native-project

How to eject expo project to native code

I eject project from expo with command npm run eject. It generates 2 folders ios and android. I tried to run the project by xcode but it still display this error. Maybe I'm not clear how to run project after eject, can you help me run it.
I run some statements to install pod, but cannot work https://github.com/CocoaPods/CocoaPods/issues/2303
So with ejecting, you should have been presented with two options:
? How would you like to eject from create-react-native-app? (Use arrow keys)
❯ React Native: I'd like a regular React Native project.
ExpoKit: I'll create or log in with an Expo account to use React Native and the Expo SDK.
Cancel: I'll continue with my current project structure.
If you chose the first (React Native), then there should have been no issues with opening up your Xcode project and running the app (there would also be no pods to install). Since your error and comment indicates otherwise, I can presume that you chose option 2: Expokit.
For that, you should have been prompted with something about making an Expo account or using an existing one:
? How would you like to eject from create-react-native-app?
React Native: I'd like a regular React Native project.
❯ ExpoKit: I'll create or log in with an Expo account to use React Native and the Expo SDK.
Cancel: I'll continue with my current project structure.
An Expo account is required to proceed.
? It appears you're already logged in to Expo as ...
After that, you'll need to follow the steps in Developing With ExpoKit. Specifically to get iOS running, you need follow all of the steps in this section after running npm run eject.
If you've done all of that, then it should work fine when running in conjunction with Expo XDE or exp. I've just tested both right now and it works without error. Double check your steps to make sure you didn't miss something. Otherwise, please edit your question with more details on exactly what commands you ran, what other dependencies you have, etc. as I'm unable to reproduce the error you have.
If you want to download new project without expo then try run:
react-native init ProjectNameHere
or , If you want to convert your own project without expo then try :
1. rm -rf node_modules
2. remove expo dependencies from package.json
3. npm install
4. react-native upgrade
(Note:This following step will create new ios and android folder and you have to redo the dependencies. I was struggling with the same issue so I posted my solution)

Resources