React Native: Can't see changes to my code - javascript

I'm a beginner with React Native. I've followed the simple tutorial from the offical doc, but I have a problem when I try to see my code changes. The doc says:
For Android, you can edit index.android.js to make changes to the app
and press Reload JS from the rage shake menu to see the changes
I'm developing directly on my Nexus 6, not on the simulator, I did as it tells but I can't see any changes for my Android sample app, I've tried only to edit the text but without success. I've also tried to rebuild after any changes but no result, I'm sure it's a simple thing but what am I missing?

I was having the same issue and I finally found one solution that worked for me.
https://github.com/facebook/watchman/issues/381#issuecomment-257669560
Just run these commands
launchctl unload ~/Library/LaunchAgents/com.github.facebook.watchman.plist
watchman version
Hope it works!

Run your code from terminal with the following command
mkdir android/app/src/main/assets
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
react-native run-android
this will refresh your code changes.

From React-Native Docs - http://facebook.github.io/react-native/docs/running-on-device-android.html
Configure your app to connect to the local dev server via Wi-Fi
Make sure your laptop and your phone are on the same Wi-Fi network.
Open your React Native app on your device. You can do this the same way you'd open any other app.
You'll see a red screen with an error. This is OK. The following steps will fix that.
Open the Developer menu by shaking the device or running adb shell input keyevent 82 from the command line.
Go to Dev Settings.
Go to Debug server host for device.
Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081). On Mac, you can find the IP address in System Preferences / Network. On Windows, open the command prompt and type ipconfig to find your machine's IP address (more info).
Go back to the Developer menu and select Reload JS.

if you are using a physical device, use:
adb reverse tcp:8081 tcp:8081
And then rerun
react-native run-android

Clear watchman watches: watchman watch-del-all.
Delete the node_modules folder: rm -rf node_modules && npm install.
Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.
Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*.

Related

'React/RCTBridgeDelegate.h' file not found in xcode

I have made a react native app for android but i need to run that app on mac so what are the files to transfer. I have transfer ios folder on mac but its not running. Its showing the error 'React/RCTBridgeDelegate.h' file not found
my Reactnative code is
But how can i run it on mac using xcode.
Here are steps that worked for me today:
Removed the following inside ios directory:
Podfile.lock
Pods
Re-installed the pod files:
pod install
I still had the same issue, then I have run the app using Xcode instead of
running from the terminal.
If none of the above fixes it, you might also try removing node_modules and run npm install or yarn install and do the same steps above again.
If anyone else has had this problem and none of the solutions worked, make sure you opened "projectName".xcworkspace and not "projectName".xcodeproj with XCode.

Cannot run this React Native example in web browser

Code example I am trying to run: https://github.com/nshaposhnik/react-native-maps-example
I am on windows 10.
What I do:
Downloaded the code
Extracted to folder
Setup with the following after deleting yarn.lock:
yarn add react-native-maps
yarn add react-native-maps-directions
yarn add react-native-google-places-autocomplete
npm install
npm audit fix
Edit the code in the 3 places that requires my custom google API key which I got from the developer site
Tried running via:
npm start
I get a successful run in the terminal (" Welcome to React Native! Learn once, write anywhere"), but no browser opens up. I go to localhost:8081 in my browser and see a barren webpage with the following text:
React Native packager is running.
Visit documentation
That's all. Nothing in the sample project runs. I just want to run their app in a browser or emulator, though I don't have any of the phone emulators working, so I just want to run in web browser.
How can I make this work from the above example? Much appreciated.
You have to run emulator separately on "Windows" using android studio or command line, and after open your project using VsCode(or your editor) and the run following command ,
react-native run-android
Your app will run on your opened emulator

Stuck on info starting JS server

I have initiated successfully a new react-native project. Then, every time I try to run my newly built project using the command react-native run-android, it gets stucks on info Starting JS server....
Here is the output:
$ react-native run-android
info Running jetifier to migrate libraries to AndroidX".
You can disable it using "--no-jetifier" flag.
Jetifier found 855 file(s) to forward-jetify. Using 4 workers...
info Starting JS server..."
I tried restarting the laptop and switching emulators. I don't know what else to do anymore.
How do I solve the problem?
Kill the automatically popped up metro bundler command prompt
Kill the command terminal which is running react-native run-android
Now Run react-native start This will start your js server
In new command prompt window run react-native run-android
The app came up in 5 mins in an emulator.
Linux:
Go to the terminal and type:
react-native start
and then in OTHER terminal, inside your project folder:
yarn android
or
npm run android
Temporary fix:
REACT_TERMINAL= react-native run-android
in my case with manjaro + xfce4:
REACT_TERMINAL=xfce4-terminal react-native run-android
or puts in your .bashrc:
export REACT_TERMINAL=xfce4-terminal
font: https://github.com/facebook/react-native/issues/26097
I had the same problem. I started a project yesterday and it worked, started a new one today and it didn't work. The problem seems to be "#react-native-community/cli-platform-android". The version that showed up today is 2.8.2 as opposed to 2.7.0 for yesterday's project.
I used:
npm install #react-native-community/cli-platform-android#2.7.0
This is not a optimal solution, but it will get you going.
I had the exact same frustrating issue for a very different reason than mentioned in other answers.
As explained in this SO answer Android adb binds to port 5037 and I installed some program which took this port so adb was hanging silently (why adb! .. say something!)
Commands to test if this your issue cause:
test any adb command and see if it hangs, eg:
adb devices
If it does, then check who is using the port:
sudo lsof -i :5037
In my case(Manjaro OS)
First:
npm start
Then in a separate terminal:
npm run android
The best solution that I constantly find myself using, is going to the application manager on android, then clearing the data of the app. Running the app afterwards goes smoothly without lagging.
Reinstalling android studio with a new emulator or changing the app name in app.json , build.gradle and android manifest.xml solved the issue.

How to build react-native app for iOS properly?

I developed a react native app (version 57.4) on windows for android and it works fine.
Now I'm trying to build for iOS with no luck (as I don't have any experience with Xcode).
What I tried so far:
I knew that it requires a Mac and Xcode so I downloaded a VM, install Xcode.
Git clone myApp
react-native run-ios
But I got a lot of errors and build failures so after some search, I make these more steps:
react-native link
link some fonts manually
add a pod file and pod install
make some Xcode changes which I can't remember
react-native run-ios
And it works :)
BUT I had an issue with axios so I tried to fix it but I ruined the app so I removed the folder and re-cloned it again.
This time, I can't build successfully again!! and if it builds it crashes instantly!
My Question is what the exact steps do I need to make to build successfully on Mac (especially steps for Xcode)? including how to link all native dependencies correctly? and Is the pod file is necessary?

Error Running React Native App From Terminal (iOS)

I am following the tutorial on the official React Native website.
Using the following to build my project:
react-native run-ios
I get the error:
Found Xcode project TestProject.xcodeproj
xcrun: error: unable to find utility "instruments", not a developer
tool or in PATH
Command failed: xcrun instruments -s
xcrun: error: unable to find utility "instruments", not a developer
tool or in PATH
Although, when I run the app from the .xcodeproj, everything works fine.
Any suggestions?
Check out this link (Running react-native run-ios occurs an error?). It appears to be a problem with the location of Command line tools.
In Xcode, select Xcode menu, then Preferences, then Locations tab. Select your Xcode version from the dropdown and exit Xcode.
You may need to install or set the location of the Xcode Command Line Tools.
Via command line
If you have Xcode downloaded you can run the following to set the path:
sudo xcode-select -s /Applications/Xcode.app
If the command line tools haven't been installed yet, you may need to run this first:
xcode-select --install
You may need to accept the Xcode license before installing command line tools:
sudo xcodebuild -license accept
Via Xcode
Or adjust the Command Line Tools setting via Xcode (Xcode > Preferences > Locations):
An update for anybody (like me) who's run into this in Xcode 13 -- the instruments command has been removed.
Updating to the latest version of react-native in your package.json file will no longer try to use the instruments command.
By default, after installing Xcode command-line not selected, so open Xcode and go to Preferences >> Locations and set Command Line Tools...
This worked for me in MAC High Sierra, Xcode Version 9.3:
Press i to open iOS emulator...
And You can see a cool new iPhone simulator like below image:
In my case the problem was that Xcode was not installed.
I had to accept the XCode license after my first install before I could run it. You can run the following to get the license prompt via command line. You have to type agree and confirm as well.
sudo xcodebuild -license
Problem is your Xcode version is not set on Command Line Tools, to solve this problem open Xcode>Menu>preferences> location> here for Command Line tools select your Xcode version, that's it.
For those like me who come to this page with this problem after updating Xcode but don't have an issue with the location setting, restarting my computer did the trick.
For me, it turns out that there was an iOS system update pending asking to restart the computer. Restart and let the update finish solved my problem.
In my case the SDKROOT environment variable was wrong, which referred to an old version of iPhoneOSxx.x.sdk. (Perhaps this would have automatically resolved itself after a reboot?)
You can check by running echo $SDKROOT and verifying that it's a valid path.
I fixed it by updating in .bash_profile:
export SDKROOT=/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS11.2.sdk
None of these solutions worked for me. These two similar problems offer temporary solutions that worked, it seems the simulator process isn't being shutdown correctly:
Killing Simulator Processes
From https://stackoverflow.com/a/52533391/11279823
Quit the simulator & Xcode.
Opened Activity monitor, selected cpu option and search for sim, killing all the process shown as result.
Then fired up the terminal and run sudo xcrun simctl erase all. It will delete all content of all simulators. By content if you logged in somewhere password will be gone, all developer apps installed in that simulator will be gone.
Opening Simulator before starting the package
From https://stackoverflow.com/a/55374768/11279823
open -a Simulator; npm start
Hopefully a permanent solution is found.
Go to Xcode Preferences
Locate the location tab
Set the Xcode version in Given Command Line Tools
Now, it ll successfully work.
If the previous answers didn't help you, you're probably dealing with an outdated react-native version. If you want to run your app on device without upgrading React-Native, you'll have to run the app directly from Xcode instead of doing it in the CLI. So open the <appname>.xcworkspace, select your device on the right-hand dropdown and press the "Run" icon.
Xcode screenshot
In Mac: After all, you are getting this issue, there may be a chance of missing the following in System Preferences -> Network -> Ethernet -> Select Advanced -> Proxies
add the following line,
*.local,localhost
This is how I got the solution,
> rm -rf ~/Library/Developer/Xcode/DerivedData
> sudo rm -rf /Library/Developer/CommandLineTools
> xcode-select --install
> sudo xcodebuild -license accept
Xcode > Preferences > Location > Command Line Tools choose.
simply go to Xcode
click on Xcode from the top left menu
Xcode->preferences-> location-> click comman line option and set Xcode version.
For any such problem:
Go to .expo folder
Find apk-cache
Remove that folder
and you are done..
Hope it helps?

Categories

Resources