React Native Dev Setup in Team - react-native

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.

Related

Output: "[Warning] Could not find workspace while activating"

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.

React Native background location (#mauron85/react-native-background-geolocation) - problem installing, how to link modules with Expo managed workflow?

I'm developing a sports app with React Native / Expo which needs to track user background when the app is in the background.
This is related to my previous question (React Native expo-location: How to make the background location service update more often?). I came to the conclusion that the background location tracking in the 'expo-location' package does not seem to sufficiently work, so I started building a new solution based on the package '#mauron85/react-native-background-geolocation' (https://github.com/mauron85/react-native-background-geolocation) which I found was recommended in several tutorials.
So I installed the module and built my map component based on the example code provided in the documentation (https://github.com/mauron85/react-native-background-geolocation#quick-example).
However, when running the app on Expo Go, I get the following error message despite doing all the required imports:
Component Exception: RNBackgroundGeolocation is undefined
This appears to be caused by a problem in linking modules, which I failed to do during the installation. The component requires to do linking of modules with the following command:
node ./node_modules/#mauron85/react-native-background-geolocation/scripts/postlink.js
Because I use Expo managed workflow, I lack the folder structure (./android/settings.gradle etc) required by this script and receive an error of 'android/settings.gradle not found'. Based on some searching, this seems to require running 'expo eject' on the whole project so that I can do configurations in the platform-specific folders.
However, 'expo eject' runs into errors in the "Installing JavaScript dependencies" phase and just returns an error of "Something went wrong ... ...", and the error logs provide no further clarification.
Questions:
How to get forward when something goes wrong in the 'expo eject' phase like this? The error logs get really messy and unclear.
I would really prefer to stay in the managed workflow to avoid any mess. Is there a way to get the modules linking work within the Expo managed workflow?
Any help appreciated, thanks.

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.

Fabric initial deployment

i'm a little bit stuck with a problematic.
I'm trying to use continuous integration to build my app and deploy them to Crashlytics.
I've tried a lot of different solutions (Fastlane, Gradle, manual execution). Theses solutions are working when my application was already deployed with the Fabric.app and the Android Studio Fabric Plugin.
But, when i'm trying to deploy a new application, everything is working fine, i've got this message at the end :
fastlane.tools finished successfully
One the Fabric dashboard, i'm unable to find my application.
Is there any way to build and deploy applications for the first time without Fabric.app and Android Studio Fabric Plugin ?
Yes! But you will need to integrate Crashlytics, and build and run the app. We need to detect both a build and run event per bundle ID or package name in order to provision your app in our system.
Thanks!

React Native release build crashed is iOS specific modules in package.json

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.