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.
Related
I cannot seem to find a real solution for my problem anywhere.. After following the Capacitor documentation and creating successfully an app as well as a plugin, i've linked them both using the following commands:
in plugin directory:
-npm run build
-npm link
in app's directory:
-npm link plugin-name
-npm install
-npx cap sync
I open the app's workspace and want to run it on my device but instead I am getting an error in the added plugin of the app, that a certain library I'm using in it does not exist.
p.s
Plugin builds normally and has no issues. This occurs only after I'm linking both plugin and app. Am I doing something wrong?
The error I'm getting inside the plugin's file.
Those are the frameworks linked to the capacitor app.
As of this moment I have solved the issue I had. Shamefully there aren't really any precise documentation regarding the subject so I'll try to answer as best I can:
My issue got resolved when I updated the dependencies inside the .podspec file inside my plugin's folder.
The specific package I wish to use with the plugin, should be specified inside the .podspec file i.e. :
s.dependency 'PicUPSDKv3' should be added.
After running -npx cap sync on my main project's folder, all pods were initialized correctly and I was able to build and run the project alongside the plugin without any errors.
Running npm install unlinks whatever is linked.
You should change the order, first npm install and then npm link plugin-name.
But it's better if instead of linking the plugin you install it from its local folder.
I have a working react native app (without expo), running and compiling in both Android and iOS devices. Now I'm trying to rename the app, but I'm having problems with that.
Steps followed:
I have deleted both ios and android directories.
Changed the project name in my app.json
Regenerated the android and ios directories with react-native upgrade --legacy (cause eject is not working anymore)
Updated my podfile with the need
Pod install
When i tried to compile my app via xcode, I got "null is not an object (evaluating '_RNGestureHandlerModule.default.Direction')
I guessed that was due to the autolinking when you install some react native third party components. So I deleted node_modules, and installed all react native navigation again. Then I ran react-native link. The previous error went away.
Now, I'm stuck with:
Target 'cjlrnneTests' has target dependency on Target 'cjlrnne'
That command depends on command in Target 'cjlrnne': script phase “[CP] Copy Pods Resources”
Honestly, I don't know what else more to do / look for.
Can anyone please provide with some clue, or the steps to change a RN app's name?
Thanks!
You can try this package for renaming the app.
react-native-rename
https://www.npmjs.com/package/react-native-rename
react-native-rename <newName>
It will automatically configure all the things.
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'm writing a small POC for my learning benefit. MI want to prove that I can share business logic to a web app and it's react native counterpart. The repo mis below.
https://github.com/danfernand/rate-topic
Essentially under src folder I have a web and native folders. In that folder I have all my actions/reducers/utils.
I installed react-native as a dependency and am using the following run command.
export BABEL_ENV=native && npm run clean && ./node_modules/react-native/packager/packager.sh --project-path './src/native/' --reset-cache
I have tried all that I can find online but can't seem to be able to set the folder where the index.ios.js is. I get an error by the package manager.
Cannot find entry file index.ios.js in any of the roots: ['']
How can I fix this issue?
Find this in another stackoverflow question.
Apparently you just need to use --root
Credit where its due
React cannot find entry file in any of the roots
I am trying to build a Cordova app. All is set up fine, but I am confused now.
There is a www folder in the main folder which is displayed in Xcode. But there is a second in platforms/iOS. This folder is used when I am building the app.
Is that the way it should work? Or can I tell Xcode to take the other folder and not the www in root?
THANKS!
EDIT: And where to locate config.xml? Because in root the iOS App will not find any plugin e.g.
EDIT2: Got that with plugins! Have to install them over terminal
Yes this is a way Cordova is working.
The www in the main folder is the place where you have to implement you changes if you willing to support more then one platform. That folder copied to the platforms/ios/www each time when you run cordova prepare ios and this is actual folder which will be bundled with you iOS application. You you made changes in you main www folder and forget to run cordova prepare ios then you would not see you changes in you application if you run it. You have to run cordova prepare after making changes in the www in the main folder of you app.
Note: If you using cordova build or cordova run then you don't need to call cordova prepare, these commands will call it internally during the run.
As of Cordova 3.5 folder www in the Xcode which you see is same folder which is located in you main appication folder, and folder Staging->www in XCode is folder pointing to platforms/ios/www folder created by cordova prepare for you.
Before Cordova 3.4, www folder in XCode was pointing to platforms/ios/www folder.
I would recommend you made changes in www subfolder of you main folder and run cordova prepare\build\run to build/run your application if you plan to mainly work with HTML + JS or your application would support more then one platform. Otherwise, if you app is strictly iOS you could made you changes directly in Staging->www inside XCode and test you changes immidiately
You could start reading about development path with Cordova here: http://cordova.apache.org/docs/en/3.5.0/guide_overview_index.md.html#Overview_development_paths
More information about using Cordova CLI is here:
http://cordova.apache.org/docs/en/3.5.0/guide_cli_index.md.html#The%20Command-Line%20Interface for explanation of the workflow.
www folder in root level has html, javascript etc. When you build your code, same www folder for each platform will be created. So If you make any code changes in main www folder. You should rebuild the code for specific platform each time. Then only your changes in the main www will be applied in the platform specific www folder.