DEV Community

How to build an Geolocation Weather Forecast app in React Native in 30 minutes

Andrew Smith on September 19, 2018

Following on from my last guide on how to create an Image Recognition app in React Native (https://dev.to/andrewsmith1996/how-to-build-an-image-rec...

Read full post

miguelito • Mar 23 '19 • Edited

Hello @ andrewsmith1996
Congratulations for your work, I've met you by chance and I like your articles and tutorials. I hope to learn by reading your work
I have a question about the Open Weather Map API.
Where should I put exactly my Open Weather Map Key?
Thank you

I've discovered where to put my Open Weather Map KEY, but I'm having an error running the application on Android, I'll show it to you if you can help me. Thank you

The development server returned response error code: 500

URL: 10.0.2.2:8081/index.delta?platform...

Body:
<!DOCTYPE html>

Error

Error: Unable to resolve module `./index` from `/home/miguel/todo-codigos/proyectos-2019/react-native/vienelloviendo/node_modules/react-native/.`: The module `./index` could not be found from `/home/miguel/todo-codigos/proyectos-2019/react-native/vienelloviendo/node_modules/react-native/.`. Indeed, none of these files exist:
  * `/home/miguel/todo-codigos/proyectos-2019/react-native/vienelloviendo/node_modules/react-native/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
  * `/home/miguel/todo-codigos/proyectos-2019/react-native/vienelloviendo/node_modules/react-native/index/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
    at ModuleResolver.resolveDependency (/home/miguel/todo-codigos/proyectos-2019/react-native/vienelloviendo/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)
    at ResolutionRequest.resolveDependency (/home/miguel/todo-codigos/proyectos-2019/react-native/vienelloviendo/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/home/miguel/todo-codigos/proyectos-2019/react-native/vienelloviendo/node_modules/metro/src/node-haste/DependencyGraph.js:283:16)
    at /home/miguel/todo-codigos/proyectos-2019/react-native/vienelloviendo/node_modules/metro/src/lib/transformHelpers.js:261:42
    at Server.<anonymous> (/home/miguel/todo-codigos/proyectos-2019/react-native/vienelloviendo/node_modules/metro/src/Server.js:1038:41)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/home/miguel/todo-codigos/proyectos-2019/react-native/vienelloviendo/node_modules/metro/src/Server.js:99:24)
    at _next (/home/miguel/todo-codigos/proyectos-2019/react-native/vienelloviendo/node_modules/metro/src/Server.js:119:9)

processBundleResult
BundleDownloader.java:296
access$200
BundleDownloader.java:37
onResponse
BundleDownloader.java:174
execute
RealCall.java:206
run
NamedRunnable.java:32
runWorker
ThreadPoolExecutor.java:1162
run
ThreadPoolExecutor.java:636
run
Thread.java:764

Andrew Smith • Mar 28 '19

Hey, the API key should go in the following line in the

App.js let url = 'api.openweathermap.org/data/2.5/fo...' + this.state.latitude + '&lon=' + this.state.longitude + '&units=metric&appid=YOUR_KEY_HERE';

Maricruzfer • Mar 24 '19 • Edited

Hi.
Congratulations for your work and thanks for sharing it with us.
Is there any way to translate the application to another language, for example Spanish?

I mean, the user interface is displayed in Spanish
Thank you

shabnam8950 • Dec 20 '18 • Edited

Hello, I downloaded the code from github. But when i'm running the app in android real device and emulator I'm getting blank screen. make sure your bundle is packaged correctly or you're running a packager server" Do you have any idea about this to resolve

Oksana Borukh • Sep 23 '18

Thanks for sharing!

BlagojeV93 • Nov 16 '18

First of all nice tutorial, very easy to track and implement, nice work!

I have one issue.
On my emulator following these steps works fine. But on the real device I get blank screen when I start the app. Have I missed some step or what?

Andrew Smith • Nov 16 '18

Hey, have you specified the permissions in your Info.plus for iOS or your Android Manifest for Android?

Vux Lee • Dec 11 '19

Great tutorial. Thank bro!
Note: geolocation has been extracted from React Native 0.60 version. If you need an alternative solution install react-native-community/geolocation
stackoverflow.com/a/56909007/8613436

Taylor Short • Sep 23 '18

Great tutorial. Thank you! One major issue on my end however, I can't get app to show up on emulator. It is only showing the default iPhone home screen. Any suggestions?

Andrew Smith • Sep 25 '18

Are you running the app in Xcode?

Taylor Short • Sep 25 '18

Yes. As far as I can tell. I’ve got the emulator open and can see an iPhone home screen. Maybe I missed something

Andrew Smith • Sep 26 '18

Hmm. And you're running it via the Play button in Xcode too?

miguelito • Mar 25 '19 • Edited

Your obligation is not to respond, but I see the little personal category that is in you.
I hope you do very well

Kevin Vu • Feb 19 '19

Hi, I downloaded your code, replaced with my API key for openweather. However, when I launch the app from iOS simulator, I am getting blank black screen. Do you have any idea?

Thanks,

Drukey • Nov 8 '21

Hi thanks, such a great tutorial. What if I need to display the current weather of other cities, like not based on my current location but for other cities.