Currently working on react native app and using codepush to update the app data. I am terribly stuck in a problem where js and css files on webView are not downloading. I checked the 'application support' from home directory. I found that only images are downloaded from codePush but cannot see js or css files.
Provided the folder structure from Xocde and the response getting from CodePush in application support path.
Following command used to create main.jsbundle.
react-native bundle --platform ios --assets-dest ./ --dev false --entry-file index.ios.js --bundle-output iOS/main.jsbundle
To send update to codePush used following command.
code-push release-react app_name ios --description "message"
I will really appreciate if you can at least point me in a right direction.
The problem seems to refer more to react-native than to codepush itself, as stated here - js and css files will not be bundled and it is not possible to treat them as assets.
Related
Environment:
xCode 12
react-native-cli: 2.0.1
react-native: 0.63.4
Hi! I'm trying release build with react native bare workflow.
Debug build was no problem, But after implementing release build, my app doesn't show any images form assets directory.
Xcode log is like this.
> [native] Could not find image
file:///var/mobile/Containers/Data/Application/610F6543-2E6A-404E-8D54-6506084093DE/Library/Application%20Support/.expo-internal/assets/assets/icon_password.png
I tried ways below URl, but I coudn't solove the problem after all.
react-native iOS app not showing static assets (images) after deploying
Please give me your knowlege...:/
I faced this problem too.
My steps to solve the problem were:
execute react-native bundle --entry-file ./index.js --platform ios --bundle-output ios/main.jsbundle --assets-dest ios
This command, among other things, creates main.jsbundle file and assets folder in ios directory
Add "main.jsbundle" and "assets" folder to 'Copy Bundle Resources'.
Rebuild project.
p.s This post helped me a lot https://stackoverflow.com/a/35366243
Hope these steps help you!
I have a React Native project with two version numbers. The first is the one that's configured in XCode for the iOS version of the app, and the other is from the version property in the project's package.json file. Apple restricts the format that the version number can take to just numbers and two dots, however I'm using Semver and the additional fields this provides are useful for internal and TestFlight pre-releases.
XCode marketing version: 4.0.0
npm Semver version: 4.0.0-alpha.2
I want to display the Semver version in the app UI to make it clear which version is in use, and whether it is a pre-release. The obvious way to do this, is to import the package.json file, and access the version property directly:
import { version } from 'App/package.json'
...
<Text>v{version}</Text>
This works, however, when I come to bundle the JavaScript for a deployment, I find that Metro copies the package.json file into the ios/assets folder in the React Native project. This causes the XCode build to fail with the error:
error: File /Users/.../main.jsbundle does not exist.
Attempting to bundle the JavaScript again produces another error:
Loading dependency graph...jest-haste-map: Haste module naming collision: App
The following files share their name; please adjust your hasteImpl:
* <rootDir>/App/package.json
* <rootDir>/ios/assets/App/package.json
...
npm ERR! app#0.0.0 build-ios:prod: `react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ios/main.jsbundle --assets-dest ios`
npm ERR! Exit status 1
How can I get Metro to play nice so that package.json can be imported without breaking the bundle? Is there another/better way of getting the version number from the package.json file?
I've looked high and low at solutions to this problem, but none of them have worked.
on iOS, I'm making a release bundle with react-native bundle --dev false --assets-dest ./ios/Bundle --entry-file index.js --platform ios --bundle-output ./ios/Bundle/main.jsbundle
Afterwards, I'm adding the Bundle directory which includes the assets directory and the main.jsbundle to my project in XCode.
Then I change the Run scheme to work on the Release configuration, and run the project on a physical device.
React Native finds the bundle, but none of the static assets show up.
I'm on React Native 0.48
Incase anyone else has a similar problem and needs some ideas where to look..
Check your xcode build logs and to see where your bundle is being created
probably something like
/Users/johnsmith/Library/Developer/Xcode/DerivedData/MyApp-asde14dwefda878/Build/Products/Release-iphonesimulator/MyApp.app
Inspect and make sure that main.jsbundle and assets/ are both at the top level.
If they're not then check your arguments to the bundle command (called by the bundle react native code and images build phase by the react-native-xcode.sh command) the defaults should be fine. you can also use set -x to print out more info about what's being called, or click show environment variables in build log
Assuming that everything is in the correct location...then try looking where the code is really looking for the image
import background from "../../assets/background.png"
alert(Image.resolveAssetSource(background).uri);
Inspect in file explorer and see if you can find the file. The folder my code was looking in was this:
/Users/.../Library/Developer/CoreSimulator/Devices/718SDF9995-1123D6-46A8-93DD-830963FC4372/data/Containers/Data/Application/25C8SG9C-2CSA-4891-BDFD-B6B37A3B4022/Library/Application Support/.expo-internal/
In my case I had ejected from expo and the file was there under a hash but the code was looking for it as ../assets/background.png It was using expo-asset to resolve the file in release (not metro as in debug), the fix was to add
../node_modules/expo-updates/scripts/create-manifest-ios.sh
to the end of the Bundle React Native code and images build phase and to add
import 'expo-updates'
to the top of my App.tsx file
Another idea would be to add an external image and see if it can load that.
source={{uri:'https://......../...png'}}
There's also the problem with Ios14 images that can be fixed by updating react-native or using npx react-native-fix-image but that would also affect dev builds
I have developed an app using React Native. But I want to give for testing to end user. So how can we create a build that loads all assets and JS files without localhost?
I searched on Google to find solutions. I got an answer that below command will help me.
react-native bundle --dev false --entry-file index.ios.js --bundle-output ios/main.jsbundle --platform ios
But it won't help me anymore. Can anyone help to create a local build in iOS?
I found my answer after doing research for last 2-3 days. Hope it will help for all React-Native developer.
Here is the answer:
--> Start your npm server to your local system using below command:
sudo npm run start
--> Above command will start your development server. Now we have to create js bundle using the following command to connect our application to js build directly:
For iOS:
$curl http://localhost:8081/index.ios.bundle -o main.jsbundle
For Android:
$curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
Above two steps will create js bundle for iOS and Android in main folder. Now follow the below step to generate an IPA and APK file.
For iOS:
--> Open your xcodeproj from your ios folder. Add drag main.jsbundle to your xcode project.
--> Open AppDelegate.m file and you can bundle is loaded using one for below line of code.
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:#"index.ios" fallbackResource:nil];
or
jsCodeLocation = [NSURL URLWithString:#"http://localhost:8081/index.ios.bundle"];
Just comment above line which is there in your code and put below line of code:
jsCodeLocation = [[NSBundle mainBundle] URLForResource:#"main" withExtension:#"jsbundle"];
Now, you are good to go with iOS……
For Android:
Open a terminal and go to your project repo path. Compile your project using below command:
./gradlew assembleRelease
To install APK into your device:
adb install {PATH_TO_APK}
Now you are ready to go with Android too..
Hope this is will to all my kind of person….
When you create your react-native app through the react-native-cli there are 2 folders in your project folder called ios and androoid. These folders contains the platform specific projects for your app.
For iOS you can open up your project with XCode and then change your build to Release version and build it. Later this step the beta release process is pretty much same as any other native written apps.
I'm integrating React Native into a pre-existing iOS application. Since it's a long-standing git repo, I need to keep the directory structure intact. So instead of having the iOS app files like .xcworkspace in ./ios, I need to have them in the root of the repo ./. I have my React Native components in a directory called ./ReactComponents, and I run:
(JS_DIR=`pwd`/ReactComponents; cd ReactComponents/node_modules/react-native; npm run start — — root $JS_DIR)
It seems to start the server fine, but when I then build from Xcode and navigate to the React Native screen, I get:
TransformError: {my_machine}/react-native/ios/ReactComponents/index.ios.js: Couldn't find preset "react-native" relative to directory "{my_machine}/react-native/ios"
What am I missing to ensure that npm knows where to look for the js files?
I'm using React Native 0.45.1 btw
Thanks!
I've figured it out - it was a babel issue. In babel-preset-react-native's package.json, I had to change the default /ios to /ReactComponents.