0

I am trying to get into coding apps using React Native. I am currently working on a weather app. The data I am using is supposed to be fetched from OpenWeather. The problem is that the temperature is not being displayed on the app. I am using Expo to test the app.

Here is the display code:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';  // Background color
import { Key } from './Key';

import Weather from './components/Weather';

export default class App extends React.Component {
  state = {
    isLoading: false
  };

  render() {
    const { isLoading } = this.state;
    return (
      <View style={styles.container}>
        {isLoading ? (
          <Text>Please wait a moment...</Text>   // PROBLEM: THIS IS NOT CENTERED!!!!!!!!
        )
          : (
            <View style={styles.container}>
              {/*Following JSX adds the background gradient color. Inside will contain all the information for the app*/}
              <LinearGradient
                // Background Linear Gradient
                colors={['#3d94ee', '#123161']}
                style={{ flex: 1 }}
              >
                <Weather />

              </LinearGradient>
            </View>
          )
        }
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
  },
});

Here is the Weather function:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons'; // Weather icons
import { FetchWeather } from './fetchWeather'
// This component adds the city, weather description, weather icon, and temperature

const Weather = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.location}>Minneapolis</Text>
      <Text style={styles.weatherDescription}>Clear/Sunny</Text>
      <MaterialCommunityIcons name="weather-sunny" style={styles.weatherIcon} />
      <Text style={styles.temperature}>{FetchWeather}</Text>
    </View>
  );
};

(Stylesheet hidden)

export default Weather;

And here is the actual fetching function:

const FetchWeather = () => {
  var key = 'de2570a4ab61d3ede83290dec6fa1725';
  return fetch('api.openweathermap.org/data/2.5/weather?id=5037649&appid=' + key)
  .then((response) => response.json())
  .then((json) => {
    return json.main.temp;
  })
};

export default FetchWeather;

Is this function valid and actually receives the json? Is there a way to see if it is fetching or not? If this is valid, why isn't the temperature being displayed?

Thanks so much.

Maaz Mohammad
  • 5
  • 2

2 Answers2

0

To check if the fetch is succeeding you can check the value of response.ok to see if the API endpoint returns a status code in the range of 200-299.

FetchWeather() is returning a promise therefore you need to access the value of the promise. This can be done like:

let temp = await FetchWeather();
//temp = 298.08

Fetch response.ok

How to access the value of a promise.

nkincy
  • 211
  • 2
  • 7
0

Function is valid, and it works too. You just need a better way to handle the response. You can use state to store the data and use that to render the values in Weather function.

FetchWeather().then((data) => {
   // setState(data);
});

I have tested it here on CodeSandbox, you can have a look at working prototype.

Sohaib Shabbir بٹ
  • 119
  • 2
  • 15