I want to know if it's possible to have "dynamic" app icons for both Android and iOS apps when using React Native.
Ideally, I'd like my dev / beta app to have a different icon so I can tell it apart from the production app, without having two different apps completely.
For iOS you can create multiple targets using xcode. You can do this by duplicating the configuration of your existing app, then adding the new icons to the newly created target.
Here is a guide on how to do that.
https://engineering.circle.com/different-app-icons-for-your-ios-beta-dev-and-release-builds-af4d209cdbfd
Android apps already have two build types, release and debug. To add new icons for the debug (dev) build simply add a new src file called debug containing the respective icons. Here is more info on how to do that.
How to provide different Android app icons for different gradle buildTypes?
Related
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.
Scenario
I have two apps that are identical except for some minor textual differences. Currently I have 2x projects and would like to condense them into one.
eg.
React Native Project
/ \
Xcode build 1 Xcode build 2
Another important caveat: App Signatures
I assume the App Stores recognize app uploads by some sort of archive/compilation signature, not by app name. This is why I'm wanting to do 2 separate xcode builds rather than 1 xcode build.
Question
Can a React Native project maintain 2 separate Xcode builds?
Running multiple builds off of the same application is a pretty common paradigm in iOS development, and this holds true for React Native as well.
The instructions here should get you well on the way to configuring multiple builds, with unique bundleIds (what the app store will use to recognize it as a unique application).
To test them out on your machine after configuring everything, you can use the following command as an example.
react-native run-ios --simulator 'iPhone X' --scheme 'YOUR_SCHEME' --configuration 'YOUR_NEW_CONFIGURATION'
I would start by just duplicating your Release config and renaming it, just to make sure that it runs fine on your machine before you start playing around with the configuration.
I am trying to add an app icon to a react-native application and am not able to do so also could hardly find anything about this in the documentation or any other sources which I am able to implement successfully.
Got this one working by using react-native-icon Package but is there Something like a single command to get icons configured into the respective folders when they are created using react-native eject command.
The app icons are controlled from the native side of the project.
You can set them up from Xcode or Android Studio fairly easily.
Perhaps take a look at Xcode 9 - Add an App Store icon and Set icon for Android application
use android asset studio
drag and drop your icon and change filters if you like and then download it.
Unzip it and then replace your res icon folder with this one
indepth tut tutorial
I need to create two twin apps with React Native and both apps will be 90% the same they will use some shared components and the styles will be different.
the question is : should i create one react native project and from there to building two apps
and the folder structure will be :
ReactProject
shared
project1
components
project2
components
index.ios.js
index.android.js
and when I want to build one of the apps I will need to change the main component.
or should I create to different React Native projects
and the folder structure will be :
shared
ReactProject1
components
index.ios.js
index.android.js
ReactProject2
components
index.ios.js
index.android.js
I would like to know what is the right approach to do this kind of project
thanks !
This is absolutely a personal preference as stated in comments. One could easily increase the number of structure options beyond 2. Other than that I can share my experience on this.
We build an app, actually 4 (quadruplets), from a single react native project. We choose that way because our apps had to be highly similar. They share same functionality. Furthermore, when one has more than one of these apps installed on their device they can easily switch between apps via deep linking. However they differ on the theme colors, logos, names and backend services to call etc. One of the ways to create multiple apps from a single project is to rename the project. But you can still produce multiple apps while keeping the project name same. Then you need to change some project files accordingly. These files are, for iOS;
Info.plist
project.pbxproj
AppDelegate.m
For Android;
strings.xml
MainActivity.java
MainApplicatoin.java
AndroidManifest.xml
android/build.gradle
app/build.gradle
Actually changing all these files manually is an error-prone and cumbersome action. So that in order to manage these changes we wrote a bash script that converts a base app to the version that we want. Using this approach we can manage 8 apps (quadruplets for iOS and Android) from a single project repo. In the end we are really happy about using React Native which let us build 8 production quality native apps in 3 months without knowing native app development at production level.
How can I add the Calabash Framework to an iOS app built in React Native?
We are moving the codebase of our iOS app from Swift to React Native, and I have an existing suite of UITests built in C# using Xamarin.UITest.
I'd like to continue using my Xamarin.UITest suite for the React Native iOS app, but I know that Xamarin.UITest requires the Calabash framework to be linked in the app's source code.
Xamarin has documentation on how to link Calabash for an iOS app built in Xcode, but I cannot find any documentation on how to link Calabash for an iOS app built in React Native.
Is there any similar documentation that shows how to link Calabash to a React Native iOS app?
iOS apps built in React Native automatically create an .xcodeproj file and rely on an Xcode project for build/deploy. Here is an image of a newly initialized React Native Project.
Xamarin.UITest requires that the Calabash Framework be linked to the iOS app. Because React Native iOS apps rely on an .xcodeproj, we can inject Calabash following the same steps as if the app was written in Swift/ObjC. To accomplish, follow this Tutorial: Link Calabash in Debug config.
In the JavaScript source code, add a unique identifier to each on-screen element using the accessibilityLabel property. In this example we've identified our TextInput as "TextInputAccessibilityId".
In the Xamarin.UITest, we can now create a field, readonly Query TextInput, and initialize it using the same property: TextInput = x => x.Marked("TextInputAccessibilityId");. Now we can interact with this on-screen element in our Xamarin.UITest!
All tests were verified in Xamarin Test Cloud, and the results are viewable here.
Injecting Calabash into IPA using Xamarin Test Recorder
One option you can use is using the Xamarin Test Recorder to inject Calabash into your IPA: https://developer.xamarin.com/guides/testcloud/testrecorder/
This method is framework agnostic as far as what was used to build the original IPA, since it injects it into the compiled IPA. The Xamarin Test Recorder does this after you set up the app to work with the recorder: https://developer.xamarin.com/guides/testcloud/testrecorder/#Recording_a_Test
At this point, you can use the test recorder itself to create UITests and export them: https://developer.xamarin.com/guides/testcloud/testrecorder/#Exporting_the_Recorded_Test. Or you can just take the resigned IPA which will be in the same location as the original IPA, with the name prepended with "xtr-" like so:
myAwesomeApp.ipa (original IPA)
xtr-myAwesomeApp.ipa (IPA with Calabash)
Things to watch out for
IPA is resigned by Test Recorder - In order for Xamarin Test Recorder to inject Calabash, it also needs to resign the IPA. For this the system doing the resigning needs to have a valid signing identity and provisioning profile that is valid, including entitlements the app uses.
Any IPA containing Calabash will be rejected by the iOS app store - This is true no matter what method is used to add Calabash to the IPA, but it's important to remember. In the example above, you would test with xtr-myAwesomeApp.ipa and submit myAwesomeApp.ipa itself to the app store.
Recorded Tests must be exported as a separate .cs file to be used - Even if you recorded some tests, those are not contained in the IPA itself directly, but Test Recorder can export them as a .cs file, structured in the same way as how you would handwrite Xamarin.UITests.