[React]

import * as Location from "expo-location"

import React, { useEffect, useState } from "react";

import {View, Text, Dimensions, StyleSheet, ScrollView} from 'react-native';

const { width : SCREEN_WIDTH } = Dimensions.get('window');

export default function App() {

  const [city, setCity] = useState("Loading...")

  const [location, setLocation] = useState();

  const [ok, setOk] = useState(true);

  const ask = async() => {

    const {granted} = await Location.requestForegroundPermissionsAsync();

    if (!granted) {

      setOk(false);

    }

    const {coords: {latitude, longitude}} = await Location.getCurrentPositionAsync({accuracy: 5});

    const location = await Location.reverseGeocodeAsync(

      {latitude, longitude},

      {useGoogleMaps:false}

      );

      setCity(location[0].city);  

  };

  useEffect(() => {

    ask();

  }, [])

  return (

  <View style={styles.container}>

    <View style={styles.city}>

      <Text style={styles.cityName}>{city}</Text>

    </View>

    <ScrollView

    showsHorizontalScrollIndicator

    pagingEnabled

    indicatorStyle="white"

    horizontal contentContainerStyle={styles.weather}>

      <View style={styles.day}>

        <Text style={styles.temp}>24</Text>

        <Text style={styles.description}>cloudy</Text>

      </View>

      <View style={styles.day}>

        <Text style={styles.temp}>24</Text>

        <Text style={styles.description}>cloudy</Text>

      </View>

      <View style={styles.day}>

        <Text style={styles.temp}>24</Text>

        <Text style={styles.description}>cloudy</Text>

      </View>

      <View style={styles.day}>

        <Text style={styles.temp}>24</Text>

        <Text style={styles.description}>cloudy</Text>

      </View>

      <View style={styles.day}>

        <Text style={styles.temp}>24</Text>

        <Text style={styles.description}>cloudy</Text>

      </View>

      <View style={styles.day}>

        <Text style={styles.temp}>24</Text>

        <Text style={styles.description}>cloudy</Text>

      </View>

      <View style={styles.day}>

        <Text style={styles.temp}>24</Text>

        <Text style={styles.description}>cloudy</Text>

      </View>

    </ScrollView>

  </View>

)

}

const styles = StyleSheet.create({

  container:{

    flex:1,

    backgroundColor : "tomato",

  },

  city : {

    flex : 1.2,

    // backgroundColor: "blue",

    justifyContent: "center",

    alignItems: "center",

  },

  cityName: {

    color : "black",

    fontSize : 80,

    fontWeight: "500",

  },

  weather : {

    // backgroundColor : "blue",

  },

  day: {

    width: SCREEN_WIDTH,

    alignItems : "center",

    // backgroundColor: "teal",

   

  },

  temp : {

    marginTop : 50,

    fontSize : 156,

  },

  description : {

    marginTop : -10,

    fontSize : 50

  }

});