Cannot run this React Native example in web browser - javascript

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

Related

how to run cloned/github remote react native app, err msg no android

NOTES: Im new in react native and i see there are so many approaches and with this error i thought the developer who built this app build it differently from what i learn so i don't understand why he didn't put the android folder
so i just joined a project and im going to run the apps in my pc by cloning it from github but when i try to npx react-native run-android it failed to run and the log is like this
error Android project not found. Are you sure this is a React Native project?
If your Android files are located in a non-standard location (e.g. not inside 'android' folder),
consider setting project.android.sourceDir option to point to a new location.
info Run CLI with --verbose flag for more details.
the folder structure is like this
The files show that the project is created with Expo. Specifically, you have a managed expo project.
npx react-native run-android would compile an android app from source, with Expo's managed workflow that's not needed. You will need the Expo Go App.
Expo also comes with its own commands to start the bundler. Instead of running npx react-native ... make use of the expo-cli running: npx expo start
However, in the package.json there is very likely a script called start. In that case, it's easier for you to run npm start.
After running this command the expo console opens. Here you can press a to open the app using expo go (or instructions on how to do so).
Alternatively, you can run npx expo run:android to start the expo go app on android yourself.
you are using an expo, there is a folder named .expo-shared, after
npm install
Try to run
npm start
or
expo start
or
npx expo start
something like this will appear:
https://imgur.com/U9I7Gf4
after that go to the terminal, open the emulator in you computer and click on the terminal and press 'a',

Blank screen when running Sveltejs template on M1 MacBook Air

I am in the process of learning Sveltejs and until now I have been using https://svelte.dev/repl/ to go through the tutorial, which has been working perfectly.
However, I wanted to develop and run Sveltejs applications from my machine (MacBook Air M1) - so I downloaded the provided sveltejs file and opened it in VS Code.
I installed the node_modules npm install. Then, I ran npm run dev which doesn't seem to produce an error
Screenshot of the terminal
Nevertheless, when I open http://localhost:5000, I am presented with a blank page, and going on 'Inspect Element' presents me with an empty webpage: Screenshot of localhost:5000
I downloaded this template from https://svelte.dev/repl/ - I did not make any changes to this project yet it still malfunctions.
Any help is appreciated and thank you in advance!
It should be noted that I am new to web development and the node package manager.
The problem on the M1 mac (actually it is probably due to oSX Catalina not the M1 specifically but I haven’t checked on an intel running Catalina) is that port 5000 is in use by command center. This means that svelte can't bind to that port.
To see what ports are active on your mac run the command
lsof -nP +c 15 | grep LISTEN
When you run npm run dev you can set the port to something else that is not in conflict...This is what I ran.
PORT=54321 npm run dev
That should fix it and run for you.
Then you will access it on
http://localhost:54321
When you start your svelte projest you need this command:
npx degit sveltejs/template my-svelte-project
after you go to your project:
cd my-svelte-project
and when you are in this project you run:
npm install
npm run dev
after npm run dev normally you have an information on witch port application runs.
Then you go to src and App.svelte and you remplace code by default by your code.
Normally it has to work.
Did you have a welcome page of svelte before you put your code?
here you have a good tutorial of svelte.

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?

New project with react native but errors

My head is so pain right now, I just screw up my old project and not able to run currently, So I guess I just create a new react native project and transfer my code to it, guess what? I hit this error after my creation of react native and ran react-native run-android.
:app:compileDebugSources UP-TO-DATE
:app:transformClassesWithDexForDebug
Running dex in-process requires build tools 23.0.2.
For faster builds update this project to use the latest build tools.
:app:transformClassesWithDexForDebug FAILED
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:transformClassesWithDexForDebug'.
> com.android.build.api.transform.TransformException: java.lang.RuntimeException: java.lang.RuntimeException: com.android.ide.common.process.ProcessException: java.util.concurrent.ExecutionException: java.lang.IllegalStateException: dx.jar is missing
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
BUILD FAILED
Total time: 4.998 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html
This multidex thing, I never set this before or anything previously on my 1st project like 1 week ago. With a new project, I can't even run my android emulator with react-native run-android for the 1st time.
Someone please help me to solve this issue please.
There are some common solutions for this issue. First of all you need to find your buildToolsVersion in gradle file.
To import react native project into android studio follow these steps.
Open Android Studio and click Open existing project
Find your project folder and inside that there will be folder called android
Open that folder with android studio
Make sure you have the newest android studio release.
If there is any build error just fix them simply by clicking the errors.
Once you have correctly build your project find build.gradle (Module:app) file under Gradle Scripts.
There you can see the buildToolsVersion of your current project. Change it like this
android {
compileSdkVersion 23
buildToolsVersion "23.0.3"
After that clean your android project using Build > Clean Project
Next rebuild your android project using Build > Rebuild Project
After that navigate your react native project folder and delete build folder.
It can be found here YourProject > android > app > build
Then before you run your react native project, note that Android Emulator is already running. If not run your android emulator using android studio
Finally run your react native project using react-native run-android

Categories

Resources