![React Native for React Developers [Part 4: xCode and Android Studio]](https://media.licdn.com/dms/image/v2/D4D12AQGeodo4YEZTqw/article-cover_image-shrink_720_1280/article-cover_image-shrink_720_1280/0/1670933537088?e=2147483647&v=beta&t=vpiok06mdBR08KY28m9pIrOAzKs64z5824B2jL3u4-8)
React Native for React Developers [Part 4: xCode and Android Studio]
Nikola Gorgiev
Software Developer | Flutter Enthusiast | React | React Native | Electron | JavaScript | TypeScript
#reactnative #react #newarchitecture #xcode #androidstudio #KinCarta #WorkingBetter #ForEveryone #sharingiscaring
xCode and Android Studio
As I have mentioned previously, while working with React Native CLI, unlike Expo, from time to time you have to deal with xCode and Android Studio to solve different problems. Here I will give you a short introduction to both IDEs, and the most necessary things you need to know in both.
xCode
When opening the React Native ios project, make sure you have installed the pods and after that open the project, and when opening it, either open the folder of the project, or if you want to open via the project file, make sure you open the workspace one (.xcworkspace not the .xcodeproj), because the workspace will contain the pods too.
After opening the project in xCode, you will see something like the picture bellow:
If you select the Project from the Project Structure, you will see some more options, like on the picture bellow:
If you want to run your application in a Release mode, without the need of the metro bundler running in the background, you will select the project name in the top of xCode:
And select Edit Scheme… from there, and then you will see something like this:
From there you select Release in the Build Configuration, close that window, and run the project. After that you can run the project without being connected to your computer. Have in mind that if you don't have an Apple Developer account, and paid the Apple Fee (its 100$ for one year), you will have a Temporary Certificates and Provisioning Profiles for your app, which means that after installing the app on a Device, they will expire after 1 week, and after that you need to reinstall it, or you won't be able to run it. Also if you are updating the bundle ids of the app, there is a limit on how many bundle ids you can register per week (I think its 10), after you reach the limit, you need to wait 1 week to be able to update the app with a new bundle id, so my advice is to use one bundle id for all test apps you are creating, or when you reach the target, use some bundle id that you have used in some of the previous apps.
If you want to add some additional capabilities like permissions, or adding custom fonts, you will need to edit the Info.plist file (PROJECT_ROOT/ios/PROJECT/_NAME/Info.plist), either via some text editor, like VSCode, or you can do it with xCode by selecting the Project in the Project Structure, than select the Main target in the Targets, than open the Info tab, and from there simply press the “+” button which you can find after every property and new property will be created, where from the dropdown you can select some predefined properties, or add a custom one.
If you want to change the icon of your iOS app manually (there are some npm packages to help you with this, like this one), open the project with xCode, then from the project structure select PROJECT_NAME/PROJECT_NAME/Images. Then you will need your app icon in multiple dimensions, so drag and drop all the files in the right place.There are also some online tools like this one, that will auto generate all the icon dimensions for you, just upload the 1024x1024 version, and click generate. Then download the zip file, unzip it, rename the Assets.xcassets to Images.xcassets and replace the Images.xcassets file located in your ios folder with the one that is located in the file you have downloaded.
Here you can find some useful tips and tricks regarding xCode usage.
Android Studio
领英推荐
Now we will take a look at the Android World, and the Android Studio. On the welcome screen, in the More Actions dropdown, you will find the most of the tools you will need. The most important will be the Virtual Device Manager, which is the Simulator alternative from the iOS world. From there you can launch and manage your Android Emulators. If your development environment is setted up correctly, you can also launch the emulator from the Terminal, just execute the following command to list all the emulators:
emulator -list-avds
And than execute the following command to start emulator (make sure you have ‘@’ symbol before the emulator name):
emulator @some_android_emulator
If you open the android folder with Android studio, gradle project will start syncing, which may take few minutes, and then you will see this screen:
If you want to run your application in a Release mode, without the need of the metro bundler running in the background, you will select the Build Variants from the left menu (it's shown in the picture above, below the project structure), and from the dropdown select ‘Release’. Then try running the app:
To change the app icon we will use the files from the site that generated the files from us. In the same file, there is also an android folder with some files inside, so just copy those files, and paste them over the existing ones in ‘PROJECT_ROOT/android/app/src/main/res’. Then try to run the app, if some error appears that says something like ‘error: resource mipmap/ic_launcher_round not found’, open the AndroidManifest.xml which is located under PROJECT_NAME/app/manifests/AndroidManifest.xml, and remove the ‘android:roundIcon="@mipmap/ic_launcher_round"’, which is optional. You can also modify some capabilities of the app in this file, same like we did in the Info.plist for iOS.
Here you can find some useful tips and tricks regarding Android Studio usage.
React Native for React Developers [Part 4: xCode and Android Studio]