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.
Related
I have a react-native App which is not using Expo and runs on android and iOS. Is it possible to make it run on Web? I found multiple projects for this purpose but I am not sure if those projects are aimed to be used only with Expo projects or not. I use multiple android and iOS modules in my app, I can't imagine how those modules will be converted to run on web. Any advise? Is what I am trying to do is even possible?
If you're using native modules with android or IOS specific functionality then you'll have to find a replacement that supports web, (or keep them and use something else for web).
Also no need to stay away from expo modules, expo modules can be used outside of expo too, here's how you can set them up: https://docs.expo.dev/bare/installing-expo-modules/
I'd suggest you listen to some of Fernando Rojo's talks about this:
https://www.youtube.com/watch?v=0FfvIuSouTU&ab_channel=SoftwareMansion
my question might be a little bit silly or ambiguous since I am fairly new to react native.
I'm trying to use the following repository for my react-native project https://github.com/smekalka/react-native-universal-pedometer. I have noticed that the repo is implemented in .java with platform folder unlike the regular .js or .ts files I used to see. Is this repository considered native module as react native doc describe?
Or in general how I can tell the whatever lib I am using is a native module.
The project is previously tested are under the support of expo-cli. I experienced the error null is not n object while using this repo. If so, I am probably going to eject the expo-cli and rewrite my code so I can use and even create own native-module for full control, some core implementations that written in other languages or expo-cli does not support.
Yes, the android and ios directories in the repository contain the 'native' code used to implement the platform-specific hooks that the Javascript will be able to pick up. Expo is not able to use these native modules or native code so your assumption is correct; you will need to eject your app in order to use this module.
If your app is below version 0.60 of React Native, after installing the module you will need to run react-native link react-native-universal-pedometer to link the native code to the Javascript runtime. If you're above 0.60, it will link automatically when installed.
I have installed a react-native app built with expo cli from playstore, I am migrating to react-native cli. I am not able to install the react-native cli build(signed with the same android key) over the existing expo build. I am getting the following error
App not installed, the package conflicts with an existing package by
same name
any solution will be greatly appreciated
Expo and React-native cli are two different things , as i am too implementing both in single app , after that my app start crashing so you can only use one cli at a moment .
here are the difference and merits -demerits of both .
React Native init:
Merits:
You can add native modules written in Java/Objective-C (probably the only but the strongest one)
Demerits:
Needs Android Studio and X Code to run the projects
You can't develop for iOS without having a mac
Device has to be connected via USB to use it for testing
Fonts need to be imported manually in X Code
If you want to share the app you need to send the whole .apk / .ipa file
Does not provide JS APIs out of the box, e.g. Push-Notifications, Asset Manager, they need to be manually installed and linked with npm for example
Setting up a working project properly (including device configuration) is rather complicated and can take time
Expo:
Merits:
Setting up a project is easy and can be done in minutes
You (and other people) can open the project while you're working on it
Sharing the app is easy (via QR-code or link), you don't have to send the whole .apk or .IPA file
No build necessary to run the app
Integrates some basic libraries in a standard project (Push Notifications, Asset Manager,...)
You can eject it to Expo Kit and integrate native code continuing using some of the Expo features, but not all of them
Expo can build .apk and .ipa files (distribution to stores possible with Expo)
Demerits:
You can't add native modules (probably a game changer for some)
You can't use libraries that use native code in Objective-C/Java
The standard Hello World app is about 25MB big (because of the integrated libraries)
If you want to use: Face Detector, Ar Kit o Payments you need to eject it to Expo Kit
Ejecting it to Expo Kit has a trade-off of features of Expo, e.g. you cannot share via QR code
When ejecting to Expo Kit you are limited to the react native version that is supported by Expo Kit at that point in time
Debugging in Expo Kit (with native modules) is a lot more complicated, since it mixes two languages and different libraries (no official Expo support anymore)
And you can use any one which satisfies your applications requirement.
Hope it will make you understand the difference between these two Clis.
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.
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.