Have developed an app in RN and not sure if this is a problem in the RN build process or an ID10T error on my part.
One of the views needed to be able to add events to the device calendar, and none of the modules I could find online were cross-platform, so there was an Android and an iOS specific module for each.
When working in dev mode everything is perfect, but as soon as a build a release version the app crashes on load, and after a lot of testing I determined it to be simply that this non-Android package was listing in the package.json.
The package dev was not able to help, but at the same time I cannot imagine it is the package itself that is causing anything wrong, there are no references to it anywhere within any of the android files, the buttons are only loaded if the device is iOS and they are not on the initial screen.
Is this a flaw int he RN build process or is there some additional config/exclusions I need to setup.
Other than adding new modules into the required locations for android/xcode the setups are pretty much as I got them out of the box and as best as my google fu reveals nobody seems to of reported this issue before
For interest the iOS calendar module is https://github.com/wmcmahan/react-native-calendar-events.
These kinds of problems are very common when developing applications with the node ecosystem
this non-Android package was listing in the package.json
and
there are no references to it anywhere within any of the android files, the buttons are only loaded if the device is iOS and they are not on the initial screen
Looks like you are not looking in the right place or searching the right way.
Standing in the project root
fgrep -rlo "string literal" . | grep -v "ios" replace "string literal" with the module that is being loaded in the wrong platform and you will find all occurrences of this string in the files.
If this doesn't help you find your issue, there are lots of things you can try but you will have to provide more code.
Related
I'm getting this error when opening VS Code. Does anyone know what it means? I've done some research but didn't get any relevant information :(
I've tried creating a workflow to see if the error disappeared, but it didn't.
It seems that react native is asking for a workspace to start but is it asking that in the first place? Can I disable react native from running when opening VS Code?
The folder opened when the screenshot above was taken was the folder it opens by default, I believe it's the mac "home" personal folder, and I have a folder called "git" inside of it, with all projects.
Given the date of this posting (2023-02-07), you're probably on version 1.10.0 of the extension. This sounds like this bug report in the microsoft/vscode-react-native GitHub repo: [Bug] Extension activating when it shouldn't #1891.
A fix is coming in version 1.10.1.
But it is taking some time and has not been release yet at the time of this writing 2023-01-31:
we're facing some problems in the last release process, recently we're waiting for new publishing PAT access to republish 1.10.1 again, maybe it will publish on marketplace on next week. We have nightly version for extension in marketplace as well, maybe you can use it now.
For now, you can try installing the nightly version.
Also, note from the extension's readme documentation:
Before going any further make sure that you:
have a working React Native environment.
have the emulator utility available in your PATH if you're developing Android applications.
[...]
Got it, this annoying log came from React Native Tools extension. They specify the requirements in the docs:
In my case, I don't have a specific React Native environment or the emulator PATH is not right.
I used to see lots of articles about native modules inside RN apps, but very few about RN inside native project. Let's say we have a project, in which we want to add a single screen fully developed using RN. As far as i know, instagram have something like this. I have read official documentation about this, but it left too many questions. Does anybody know the good step-by-step implementation guide?
Mostly, i'm interested in:
What is the structure. Do i really need to move all the project inside /ios and /android folder, wrapping the whole project? What if the project have separate repositories for both platforms?
Do native developers need to install node environment in order to continue working on the project, installing node_modules and staff?
How much is the influence on the app size?
UPDATE: 07.20.2021
I'm still not able to run an RN screen inside native projects. The docs i told about before doesn't contain actual info, steps are not properly described, and even writing exactly as they told, the project still cannot run and crash as fast as i change activity to RN one.
Here are some points related to the questions that you have which might help you.
No, You don't need to move the whole native code to the /android and /ios directory.
Yes if you are about to open the RN screen from the native app you should have set up the react-native environment properly.
The app size might increase as there is a bridge created with javascript and native code. but you should have a choice to upload the .aab bundle file which helps you to provide the platform-specific builds to the users.
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.
I am in need of advice of how to deal with something:
I have an app that will soon be published to App Store and Google Play, I would like to find a way to have a clone of this app with less features, this clone is meant to give a taste of the app for users and also for the salesman of the company to demonstrate it, also I would like to keep both apps installed in the same device, so in the case of the salesman, they could demonstrate with this "demo app" and also use the real app for their own purposes.
I know that I could just have a beta user group on TestFlight and Google Play but that would need me to register those users or give them a link to register as beta and would not be possible to have both apps installed.
I want to make this "demonstration app" to be downloadable from the stores, it would have different API calls from the real app, different icon, etc...
but I would like to avoid having to maintain and copying every change from the "production" app to the "demo" app.
The option I thought: create a branch and rename the app to the new signature, name, icons and so I will just have to always pull the diff from the origin/master branch and publish it on the stores, but it didn't worked, since xcode breaks the app and give me random errors when I do it.
I would appreciate to receive ideas and workarounds for this.
I can currently have four different versions of an app I developed installed. The solution for this really depends on your setup, but here is currently how I do it1. It is not the only way but it works for me and I find the issues that this setup causes so small that it doesn't really bother me.
iOS
The simplest solution for iOS is to have different Bundle Identifiers. This requires you to have different provisioning profiles. One provisioning profile for each development environment (if you want to put them on device for testing away from the development machine they need to be distribution profiles) and one profile for submission to the App Store.
Xcode has the ability to manage different environments with different provisioning profiles, however this caused me major issues when using CocoaPods and I ended up having to stop Xcode from managing it.
What I do now is I add a script to my workflow2 that forces the correct Bundle Identifier for the environment. If I want to build locally, I just manually change the Bundle Identifier and the provisioning profile (it only takes a second)
Android
For Android I use the built in flavors to manage the different environments. It is really easy to set up. in my app/build.gradle I added the following:
flavorDimensions "version"
productFlavors {
dev {
dimension "version"
applicationIdSuffix ".dev"
}
uat {
dimension "version"
applicationIdSuffix ".uat"
}
staging {
dimension "version"
applicationIdSuffix ".staging"
}
prod {
dimension "version"
applicationIdSuffix ".prod"
}
}
This adds a applicationIdSuffix to your builds which means that you can install multiple types on to your device. Using flavors is a really powerful way to manage your android applications. You can read more about using flavors here
One important point to note is that using flavors does change how you have to run your application.
Instead of using react-native run-android I now have to use react-native run-android --variant=devDebug.
When I want to build it instead of using ./gradlew assembleRelease, I have to use ./gradlew assembledevRelease (you have to change this for each flavor that you use)
There is also a small bug with react-native that when using the --variant flag it doesn't launch the app, so you just have to click on the icon on the device. But if you launch it from Android Studio it launches just fine.
So if you launch your application from Android Studio, or add the appropriate scripts to your package.json these issues melt away.
1 I don't use Expo for my production applications, only for prototyping, so these solutions are for full react-native applications with access to native code.
2 I use Bitrise to build my apps so it is easy to add bash scripts or similar to the build process.
If you want them to download the apps from stores then apps have to have different package/applicationIDs.
I've worked on a react native project recently and we actually handled staging and production apps in single branch. Although we didn't release staging app on play store, we were sharing using Google drive and since both app had different packages, it was possible to install both of them together.
To change the applicationId, you need to make changes in app's build.gradle file in Android. Simply add .demo or .anything at the end of your production applicationId. And also change your api end point and App name and icons if you'd like. So this becomes cumbersome doing manually after sometime because you have to change back and forth. So we wrote a shell script to make all these changes before building the apk.
We actually didn't need to install 2 versions on iPhone, so we didn't do anything about it. Also I'm not familiar with iOS development but I guess process will be somewhat similar.
Now we don't have to keep track of changes from one branch to another. Setup(Shell scripts) will take some but it will be worth it.
I am currently working in a team developing a react native IOS application, we are all doing this for the first time. I am unable to find any information on development setup with many people working on the same code and we are running into many issues requiring each member to have their own project, and one person with the master project is having to copy and paste code over, any pointers much appreciated!!
Initial project build is successful, the problem occurs when someone else clones the repository and attempts a build. Too many errors to go over and different with each machine. Is there some setup in X-Code or something I am missing with regards to working in a team environment with react native?
Because React native use many libraries like module to help build app fastly and reuse.So, I suggest this workflow to build mobile application with RN.
- Use GIT as system version control
- Use IDE (Android Studio, Xcode) to help auto build and fix a lot build error when your team install new libraries and use `react-native link` (ex: react-native-router-flux,...)
- Just push js file to repository and other member can pull it and reload js file.
- Do it and take a look some repository on github with tutorials
Cheer!
Using Yarn rather than Node package manager resolved a majority of the issues.