Develop Reference

Local Images (as assets) not Loading in iOS; Expo EAS Build (React Native)

I have used several icons in the application, but they are not loading in iOS build, but load perfectly fine in Android build. The icons been used are PNG files in local assets folder. I have tried to use different methods to include Image files;
var chevron_right = require('./chevron-right.png');
import chevron_right from './chevron-right.png';
Third that I used was to put a JS file (i.e. Icons.js) in the folder where there the images are and than export those images from it. Like: export default { chevron_right : require('./chevron-right.png') } and then import where I want Like: import Icons from './path/to/icons' <Image source={Icons.chevron_right} style={{ height: 8, width: 8 }} />
All of the above three methods do not work for iOS builds. The screenshots are attached, the versions of expo and react native are:
Expo CLI: 0.60,
Expo SDK: 46,
React: 18,
React Native: 0.69.4
Screenshots:

The error seems to be with the Xcode. So pls Follow this
React-native iOS not showing images (pods issue). Read the full thread.
The question is answered.(Regards)

I updated my EAS CLI from 0.60 to 1.1.1, now my Images are rendering in iOS build.

React native bundle release there's no asset

I'm creating a bundle release in react native android. I create an apk using "assembleRelease" I tested the assets are there but when I try to bundle in "bundleRelease" there's no asset.
The image show that my assets directory.
This is my index.android.bundle. The BGAppPros is automatically generated.
In my android/app/build.gradle
code looks like this. I have a feeling this is the culprit " resourcesDirRelease "
In short I want an offline assets. but the bundle release is ibcompiled correctly.
project.ext.react = [
entryFile: 'index.js',
bundleInRelease : true,
resourcesDirRelease : 'src/release/res',
]

I solved my problem you need also check you'r script
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
make sure its the right path when you calling the
resourcesDirRelease : 'src/release/res',

React Native Android bundle hangs with --dev false

I'm trying to make a React Native android bundle and it works fine with --dev true but the following command hangs with --dev false
# this works
node --expose-gc --max_old_space_size=4096 ./node_modules/react-native/local-cli/cli.js bundle --verbose --platform android --dev true --reset-cache --entry-file index.js --bundle-output /usr/src/app/android/app/src/main/assets/index.android.bundle --assets-dest /usr/src/app/android/app/src/main/res/
# this freezes
node --expose-gc --max_old_space_size=4096 ./node_modules/react-native/local-cli/cli.js bundle --verbose --platform android --dev false --reset-cache --entry-file index.js --bundle-output /usr/src/app/android/app/src/main/assets/index.android.bundle --assets-dest /usr/src/app/android/app/src/main/res/
I've already tried adding the --verbose argument but the output is pretty brief
warning: the transform cache was reset.
Loading dependency graph, done.
Is there any way to get more information from the bundler? Or is the only way to do some printf debugging in the bundler.
FYI, i was hoping to reproduce the same problem using Haul but the Haul build passes with the following:
'./index.js 1:275593-275611\nCritical dependency: the request of a dependency is an expression\n ...
'asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).\nThis can impact web performance.\nAssets: \n ../assets/index.android.bundle (1.57 MiB)',
'entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.\nEntrypoints:\n main (1.57 MiB)\n ../assets/index.android.bundle\n',
'webpack performance recommendations: \nYou can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.\nFor more info visit https://webpack.js.org/guides/code-splitting/'

The issue was that I was running the build in a Docker container which was running on Hyperkit on my Mac. Hyperkit was created via command line with a 2G memory limitation which explains why the build would keep running until it hit the 2G memory limit and then fail silently.

React Native Download JS Code from remote server

I am currently doing an R&D in React Native.
I have a requirement where I need to add some modules(Basically code) in the app.
It is impossible in native iOS app to do so.
In React native apps using tools like AppHub and CodePush, we can push builds to production app.
There is a library React Native Auto Updater for downloading latest js bundle but it is deprecated now.
Using the above tools, I need to push the build.
I have a scenario where I want the app to fetch and download the bundle kept on a remote server.
So, How can I download JS Code on making a rest API call from App and refresh the app as per the new JS code?
My concern is regarding download of JS Code.
I am clear on the Auto Update of apps part.
Thanks in advance.

Eureka!
I accomplished this by doing the following:
Create an offline jsbundle Refer this link
react-native bundle --platform android --dev false --entry-file
index.android.js --bundle-output
android/app/src/main/assets/index.android.bundle --assets-dest
android/app/src/main/res/
Create a Rest API for downloading js bundle. Refer this link
I have used SpringBoot. Make sure you add this to your API produces "text/javascript"
Download the jsbundle in your app, store and get the path of the bundle.
Reset the path of bundle for React native in AppDelegate.m [for iOS] and in ReactApplication class [for Android]

Try the react-native-dynamic-bundle package: https://github.com/mauritsd/react-native-dynamic-bundle
Also, you can download the bundle using react-native-fs:
import RNFS from 'react-native-fs'
export const download = async (fromUrl, bundleName) => {
return RNFS.downloadFile({
fromUrl,
toFile: RNFS.DocumentDirectoryPath + `/${bundleName}.bundle`,
}).promise
}
Regards, Juan

External HTML asset not bundled by React Native in production build for use by Webview

I'm building an Android application using React Native. It has a webview that reads an HTML file locally.
This is the piece of code I'm using to render webview.
<WebView ref="webview"
source={require('./helloworld.html')}
javaScriptEnabled style={styles.webView} />
This works well during development build. The HTML file loads on the webview and renders well.
But it doesn't on Android release/production build. The webview is empty and if I inspect using chrome://inspect, the webview is empty and doesn't load the HTML file.
From what I understand is the React Native fails to bundle helloworld.html as an asset during Android production build. I noticed that it works fine on iOS.
Any idea how to fix it?

As per the discussions around here https://github.com/facebook/react-native/issues/6004, it's a known defect. Assets are not bundled for Android production build but works fine in dev build.
A solution is store assets in Android assets folder manually, and then load the resource using
<WebView
source={{ uri: 'file:///android_asset/helloworld.html' }}
startInLoadingState={true} />

on RN 0.40,
require('./file.html')
is failing for me in Build release variant. It's fine in debug builds.
As workaround, I was able to put the file in android assets dir, and
{ uri: file:///android_asset/file.html }
load from there. Unfortunately for my situation, the html file loads remote third-party libs which internally reference protocol-agnostic resources: e.g., //domain.com/file.json. So those all got turned into file://domain.com/file.json links and of course failed.
I monkey patched XMLHttpRequest to change //... to https://... which solved that problem, but none of the images those libs attempt to load, will load. all broken. And I've been unable to find a way to determine what the requests look like for those images, to see why they break/fail-to-load.

on iOS production build this solution is work
<WebView
source={{ uri: 'helloworld.html' }}
startInLoadingState={true} />