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.
Related
I already know how to create react native expo applications and deploy them to app stores.
But right now I would like to work on some frontend projects, simply to showcase my skills.
These projects will be displayed on my portfolio.
I would like to know the best way to present them to potential employers.
I know I can build the projects to an APK file that can be downloaded, but I doubt employers would want to download them, as it could be time-consuming. It also restricts me to only employers with Android devices.
What are the best ways to go about this?
Thank you đź’™
You can include a short GIF (or something similar) as a demonstration of your project along with the link to the app build / git repo, so the employer can quickly view what you've built and still have the option to see it in more detail.
Depending on how much native stuff you are doing you can also build them as web projects within expo and display them directly in a browser. You could even mock any native functionality you have for demo purposes.
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 want to create my own podcast app.
I found this pre-written code online (github.com/diego3g/rocketcasts) and want to tweak it in order to create my own app.
How do I upload this code into expo?
Unfortunately that React-Native app was not built using Expo. You can tell because it has ios and android folders in its root directory.
Digging deeper you can see that it uses react-native-config as a dependency. This dependency requires access to native code, which Expo does not allow. You would have to go through and remove any dependency that requires native code if you wish to use Expo. This may remove functionality and could take some time to resolve issues.
Also this application was built using react-native: 0.47.2. Currently the most recent version of react-native is 0.57.8 with 0.58.0 just around the corner. That is quite a jump to make if you plan on upgrading the react-native version. Upgrading RN is not as simple as just changing a version code.
Similarly the repos last commit was over a year ago. That means that the majority of dependencies will be out of date and will need upgraded. Again, some dependencies aren’t a simple upgrade you would need to check every single one to make sure that it doesn’t cause unforeseen problems. You would also need to check their compatibility with Expo.
Personally I wouldn’t copy the project. I would look at how they have implemented the functionality and then in a new react-native project I would re-implement the functionality. That way all dependencies would be up to date and you would know that it would work.
Going down the path of editing an existing project like this one may be quite a challenge.
Either way good luck.
You can find more information about Expo here https://docs.expo.io/
And you can find a good explanation of the differences between Expo and react-native init here What is the difference between Expo and React Native?
The standard way to tweak an existing GitHub repository you don't own is to:
fork the repo (that is a GitHub operation, creating a copy of the repo in your account)
clone it and modify it: you can then push back to your GitHub fork.
I'm trying to understand the possibility of creating a while label product with the help of react native.
The problem to solve is that by using the same codebase and some configurational changes, we get four different applications each with its own branding assets (in both ios and android).
Is it possible to do that in react native?
xcode targets and android flavours are there. How can we architect this under react native way so we don't have to deal with native code/ configuration.
So the way I ended up doing is by using 12 Factor methodology.
The configuration is loaded through the .env file loaded while building the app and then based on that env file all resources are collected on the go.
The configuration took some time but it was well worth at the end.
6 apps (3 iOS and 3 android apps) out of one codebase.
This is the article that explains how to do it.
Adding multiple target pipelines for React Native Apps (and Fastlane CircleCI deployment
well the posibly easiest solution for this woud be you make a folder structure like this
\Common
assets
SharedPic.jpeg
sharedApp
sharedApp.JS
\app1
assets
pic.jpeg
App1.js
\app2
assets
pic.jpeg
App2.js
and then hardlink them :
fsutil hardlink create ".\app1\asstes\pic.jpeg" ".\Common\assets\SharedPic.jpeg"
fsutil hardlink create ".\app2\asstes\pic.jpeg" ".\Common\assets\SharedPic.jpeg"
fsutil hardlink create ".\app1\App1.js" ".\Common\sharedApp\sharedApp.JS"
fsutil hardlink create ".\app2\App2.js" ".\Common\sharedApp\sharedApp.JS"
but be aware! :
all the hard links are exactly the same so the bundler see's it as a real file and not a link but regardless of which file you edit all hard linked files will be edited
(i know on a datastructure-level the last statement isnt fully correct but I think its easier to understand if you think this way )
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.