Adding React Native to an existing iOS app - fails to compile - react-native

I followed the official guide on adding React Native to existing iOS apps (Swift).
pod install finished successfully and I got to the point when I import React in a Swift file and try to compile the app.
The build fails with an error in the yoga dependency. Xcode cannot find the C++ standard library:
However, then I click "Go to definition" on <algorithm>, Xcode can find it:
These are my project settings (I tried a few different combinations):
I'm fairly new to iOS development, so this might be a simple issue with our existing project, Xcode, Command Line Tools, or my machine. I Googled around a bit, no luck so far.
Any help from someone familiar with iOS development is appreciated! When we find the solution I'd like to update the official guide so others don't get stuck adding React Native to their app.

I believe your issue is fixed by this PR https://github.com/facebook/react-native/pull/17764, which reduces the number of exported Yoga headers to those that are actually needed to be able to build and as part of that removes headers that require C++ and its stdlib.

Related

React-Native, React-Native-Web and React-Navigation/Stack

Has anyone been able to get React-Native 0.7, React-Native-Web and React-Navigation/Stack 6.2.3 to work on web? I have a small app working on iOS and Android which I am trying to enable on web too. iOS and Android portion work fine and using metro.
However, webpack build continues to error out with "Module parse failed: Unexpected token" on the NavigationContainer.
I tried searching both react-native-web and react-navigation Issues on their respective GitHub Repositories. However, could not find something to solve my issue. Also tried modifying webpack.config with several different configurations/loaders.
Used links below as a reference too:
https://arry.medium.com/how-to-add-react-native-web-to-an-existing-react-native-project-eb98c952c12f
https://gist.github.com/skabbes/0bfa0a969aac8ec13f716dda1ad2ab43
Yes, it happens that I maintain a library that does just that: creates a bare React Native app that also runs on the web: 🌒 Luna - https://github.com/criszz77/luna
Here is the live example: https://criszz77.github.io/luna/
You can find more on the wiki page about how it's implemented and you can also implement it by yourself: https://github.com/criszz77/luna/wiki
By using react-scripts, you don't have to handle webpack, babel and other hard configs by yourself.
It currently doesn't run on 0.7 (didn't have time to make the update), but it's in plan to support all the latest versions of course ASAP.
EDIT: Updated to 0.70.3 🎉

how to add ios support for existing React Native application with only Android support?

I know it might be very basic question. But I am very new and got a codebase with only android support. I need to add iOS for it. Please help me
As you're aiming to build a cross-platform app, React Native provides two ways to organize the code and seperate it by platform: platform module or platform-specific file extensions.
As you already have an Android app, I assume it has more complexity so you might want to split the code out into separate files.
You say you have an Android app but i don't thing that at any point you specified that the app should only build for Android (you can review in the package and the project configuration). So, the following command should be enough:
react-native run-ios
If you created your react native app from a template (e.g. using npx react-native init ProjectName), it already provides an ios and android folder, so it already supports it. If the file is not there, you could follow the instructions that #Rajan shared above to recreate the ios folder.
If your problem is running the iOS application using npm run ios, and its failing to build or the javascript throws an error, the quickest thing to try is cd ios, then pod install. If this does not work, it might be because you have additional dependencies you have installed, which require specific instructions and configuration to be done in the ios folder. This is library dependent, if needed, will be explained in depth in the README.md of the library. For example, react-native-firebase has a lot of steps, and is different to the android configuration.
Sometimes it is helpful to modify these configurations in XCode instead of editing the files manually (e.g. plist, xml, xproj). You can open xcode quickly using xed ios when in the root project folder.
Note: As usual, remember to have the libraries available in the node_modules folder, npm install.
In the future, you might choose to run different javascript code based on the platform (platform-specific code). React native allows that by using file.android.js and file.ios.js. However, your IDE is likely to struggle with the 2 files, and won't be as helpful compared to file.js. Alternatively, you can import Platform and conditionally check at runtime, what your platform is.
If you used Expo, you don't have access to the native code, but will already support iOS.

React native Twitter Signin release build issue

I am using the react-native-twitter-signin plugin for twitter login in iOS, but I am not able to build the release build in iOS as it shows:
Apple Mach o- linker issue:
/Documents/Example-fnshwaxexazdtybaedpmgfxfynrx/Build/Intermediates.noindex/ArchiveIntermediates/Example/BuildProductsPath/Release-iphoneos/libRNTwitterSignIn.a
The same application is running perfectly in Debug Mode on iOS:
I have already linked the libRNTwitterSignin.a under linked binary with libraries
Does anyone know a solution to this problem?
I faced the same issue, finally did like below.
please add RNTwitterSignIn to Target Dependences of build phases.
It will fix that.

react-native code push: allowable code change?

I'm using react-native-code-push for my app.
I had released several versions that change only a few of js bugs, which worked fine.
Recently I realized that if a code pushed release involves any change of native code other than javascript, the app crashes while updating. I added several react native packages that need manual linking such as react-native-maps, and released update to some targeted versions hoping them to take those, but no luck.
Then what if an update only involves adding light libraries (using npm install) which don't require native linking? I wonder to what extent exactly the code push allows client-side code updating.
Basically, when you want to add some native code involving link you will have to rebuild your apk / ipa and re-upload it to the stores. If you want to add a new plugin without link there should not be any problem
One advice I could give is to only push bug fixes to your production app. You should not push new features with codepush since apple review (almost) all the applications.

Init IOS project with pods using react-native init command

Is there any way to create the IOS project with pods using react-native init command?
Currently there is different installation instruction for react native libraries.
Example: Some of them install using react-native link command while other requires to setup using cocoapods. Missing both will leads to lots of compilation errors.
Could anyone suggest what is best way to create project using react-native.
Thanks
On the official react native documentation, there are 2 ways to start up your project, which is using 'CRNA' or 'Build With Native Code'.
For CRNA, it is the fastest and easiest way to start up your project.
It really easy to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for building projects with native code to learn how to install Xcode and set up your Android development environment.
The react native link is used if you want to link your library through the terminal. But in some cases, there are several problem occurred related to library compatibility. I rather suggest use pods or manually link your library through XCode.
Pods is a dependency manager for native code that we use on our native code project. It will automatically generate and link the library.
If you want to have pods on your ios project. After you install cocoapods, you could follow these steps :
1. Open terminal and direct to your project (cd YOUR_PROJECT/ios
2. pod init
3. And then Podfile will be generated within the ios project.
And from now on, you should use YOUR_PROJECT.xcworkspace if you want to manage the project. Thats because Pods should be placed and included same with your project but '.xcodeproj' does not include your Pods.