how could we access the images located outside the expo project? - react-native

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!

Related

How to integrate react native component into the native app?

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.

How to showcase react native expo frontend projects without deploying to stores

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.

How to make multiple app variants with shared codebase in react native?

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 )

Share React Native build

What options are available for sharing a react native build privately?
You could just push the build's code to a remote repo and make sure the compiled folders aren't ignored (can't recall if it's ignored by default or not, check your .gitignore file if using GitHub). I think private repo's are only part of GitHub premium, but if you share the code anywhere then someone would be able to open it in Xcode/Android Studio and then use those SDK's to run on a simulator or device.
I would suggest creating a free account on bitbucket and pushing your code there.
The site is free (up to 5 users) and allows you to privately host your project

CLI support for App Store app

Is there a way to add a command line interface to a sandboxed app downloaded through the Mac AppStore?
Something similar to the XCode command line tools, do not just use the whole executable name and path.
This can't be done - app store rules don't allow to install code outside the app bundle. If you want to provide your users a CLI interface you'll have to make this available as a separate download outside the app store.