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 )
Related
Can we extract source code from an apk that built with react-native framework?. i've tried using dex2jar and apktools and cant seem to find anything related to source code
Nothing would prevent Apktool or dex2jar from working on a React Native application. What you are seeing is the majority of React Native application logic lives in compiled Javascript files and the native layer itself (libraries).
So I would put things into 4 buckets
Native Modules (Android - Java/Kotlin, iOS - ObjC/Swift)
RN Bridge (Java/C++)
JS (Virtual Machine - JavascriptCore / Hermes)
JS (Business logic)
The code written in Javascript is interpreted by either the runtime of JSC/Hermes in the VM. This is passed through an intermediate bridge layer of either Java/C++ to the low native portion of the phone. Hence giving the name of React Native.
So if you are decoding an application looking for source code - you'll stumble upon the java code of the bridge and any package that has an intermediate dependency in Java and not the true source code of the application you are probably looking for.
The business logic would more than likely be in a index.android.bundle file somewhere and that will be quite ugly visually as its minified. You'll need a JS beautifier to get anywhere with this path.
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 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 created a mobile app by expo (react native), I would like to display profile image, knowing that the images are located outside my project.
when I want to access any image I do not get there, and I get this type of error
"SHA-1 for file (D:\Workspace\ImagesProfile\images3.jpg) is not computed".
this is the hierarchy of my workspace.
-Workspace
--ImagesProfile
--Myproject
Pleace how can we solve this problem?
The way the react-native packager works right now, it's just going to scan the roots of your project and below when creating the JavaScript bundle, so it will be really hard to do this.
You basically just need to put the files under the root of your directory. There are some tools out there for syncing files from another directory into a directory under the root so you could use one of those if you really need to.
Some people are working on ways to make symlinks work with this. Notably, you might look at Haul from Callstack. https://github.com/callstack-io/haul But that isn't integrated into Expo yet.
Okay at first you should understand what you are doing. You're creating a react native application, which means this application is running on external devices and not on your PC. Your simulator or expo client running your application encapsulated from your PC using only project files. When you wanna use external images in your application you need to host them. You can create a local docker instance as image server ( e.g. an express application with a static folder ).
To make it clear, it's not possible to use images inside your filesystem which are not a part of your react native application. You can use external image server like "imgbb" for test purposes, but it's not recommended to use them in your final version.
Happy Coding!
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.