I am building a weather app. The in-home screen of the app I fetch data from IP/read API every 5 seconds and that works fine. What I want to do now is to fetch data from IP/insert when I press the button in Links Screen and then send that value to HomeScreen. I found a lot of tutorials for that but not any with react hooks.
This is my HomeScreen.js
file:
import React, {useState, useEffect} from 'react';
import {Image, Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View, StatusBar, ActivityIndicator} from 'react-native';
import { Icon } from 'react-native-elements';
import * as Font from 'expo-font'
HomeScreen.navigationOptions = {
header: null,
};
export default function HomeScreen() {
const [city, setCity] = useState('--');
const [countrycode, setCountryCode] = useState('0');
const [icon, setIcon] = useState('ios-sunny');
const [date, setDate] = useState('00.00');
const [temperature, setTemperature] = useState('0');
const [wind, setWind] = useState('0');
const [humidity, setHumidity] = useState('0');
const [temperatureInside, setTemperatureInside] = useState('0');
const [humidityInside, setHumidityInside] = useState('0');
const [pressure, setPressure] = useState('0');
const [spinner, setSpinner] = useState(false);
const [fontLoaded, setFontLoaded] = useState(false);
useEffect(() => {
Font.loadAsync({
'raleway-regular': require('../assets/fonts/Raleway-Regular.ttf'),
'raleway-light': require('../assets/fonts/Raleway-Light.ttf'),
});
setFontLoaded(true);
const interval = setInterval(() => {
fetch('http://192.168.88.253:5000/read')
.then((response) => response.json())
.then((responseJson) => {
setCity(responseJson.city);
setCountryCode(responseJson.countrycode);
//setIcon
if(responseJson.description === 'clear sky'){
setIcon('ios-sunny');
}if(responseJson.description === 'few clouds' || responseJson.description === 'scattered clouds',responseJson.description === 'broken clouds'){
setIcon('ios-partly-sunny');
}if(responseJson.description === 'light rain' || responseJson.description === 'shgower rain' || responseJson.description === 'shower rain'){
setIcon('md-rainy');
}if(responseJson.description === 'thunderstorm'){
setIcon('md-thunderstorm');
}if(responseJson.description === 'snow'){
setIcon('md-snow');
}if(responseJson.description === 'mist'){
setIcon('md-partly-sunny');
}
setTemperature(responseJson.temperature);
setWind(responseJson.wind_speed);
setHumidity(responseJson.humidity);
setTemperatureInside(responseJson.temperatureInside);
setHumidityInside(responseJson.humidityInside);
setDate(responseJson.time);
setTemperatureInside(responseJson.temperatureInside);
setHumidityInside(responseJson.humidityInside);
setPressure(responseJson.pressure);
})
.catch((error) => {
console.warn(error);
});
}, 5000);
return () => clearInterval(interval);
}, []);
return (
<View style={styles.container}>
<View style={styles.upperContainer}>
<View style={styles.oneVertical}>
<Text style={styles.city}>{city.toUpperCase()}, </Text>
<Text style={styles.countrycode}>{countrycode}</Text>
</View>
<View style={styles.twoVertical}>
<Icon name={icon} type='ionicon' iconStyle={styles.icon}></Icon>
<Text style={styles.date}>{date}</Text>
</View>
<View style={styles.threeVertical}>
<View style={styles.tempView}>
<Text style={styles.temperature}>{Math.round(temperature)}°</Text>
</View>
<View style={styles.otherView}>
<View style={styles.humidityTemp}>
<Icon iconStyle={styles.otherViewIcon} type='ionicon' name='ios-jet'></Icon>
<Text style={{color:'#fff', fontSize:20, fontFamily: 'raleway-regular',}}> {Math.round(wind)} km/h</Text>
</View>
<View style={styles.humidityTemp}>
<Icon iconStyle={styles.otherViewIcon} type='ionicon' name='ios-water'></Icon>
<Text style={{color:'#fff', fontSize:20, fontFamily: 'raleway-regular',}}> {humidity} %</Text>
</View>
</View>
</View>
</View>
<View style={styles.lowerContainer}>
<View style={styles.ChamberView}>
<Text style={{color:'#fff', fontFamily: 'raleway-regular',}}>TEMP.</Text>
<Icon iconStyle={{color:'#fff', fontSize:30, marginVertical:10, }} type='ionicon' name='md-thermometer'></Icon>
<Text style={{color:'#fff', fontSize:20, fontFamily: 'raleway-regular',}}>{temperatureInside}°</Text>
</View>
<View style={styles.ChamberView}>
<Text style={{color:'#fff', fontFamily: 'raleway-regular',}}>VLAGA</Text>
<Icon iconStyle={{color:'#fff', fontSize:30, marginVertical:10, }} type='ionicon' name='ios-water'></Icon>
<Text style={{color:'#fff', fontSize:20, fontFamily: 'raleway-regular',}}>{humidityInside} %</Text>
</View>
<View style={styles.ChamberView}>
<Text style={{color:'#fff', fontFamily: 'raleway-regular',}}>TLAK</Text>
<Icon iconStyle={{color:'#fff', fontSize:30, marginVertical:10, }} type='ionicon' name='ios-hand'></Icon>
<Text style={{color:'#fff', fontSize:20, fontFamily: 'raleway-regular',}}>{pressure} bar</Text>
</View>
</View>
</View>
);
}
and there is LinksScreen.js
file:
import React, {useState} from 'react';
import { View, StyleSheet, Alert, ActivityIndicator } from 'react-native';
import {SearchBar, Button} from 'react-native-elements';
import MapView from 'react-native-maps';
import Spinner from 'react-native-loading-spinner-overlay';
import { NavigationEvents } from 'react-navigation';
export default function LinksScreen() {
const [spinner, setSpinner] = useState(false);
const [search, setSearch] = useState('');
const handleChange = event => {
setSearch(event);
}
const [latitudePress, setLatitude] = useState('46.54306');
const [longitudePress,setLongitude] = useState('14.96917');
function addMarkerAndRequest(e){
setLatitude(e.nativeEvent.coordinate.latitude);
setLongitude(e.nativeEvent.coordinate.longitude);
const coords = {
latitude: e.nativeEvent.coordinate.latitude,
longitude: e.nativeEvent.coordinate.longitude
};
Alert.alert(
'Sprememba mesta',
'Stanje v komori se bo spremenilo. Ali ste prepričani?',
[
{
text: 'NE',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
{
text: 'OK',
onPress: () => {
fetch(`http://192.168.88.253:5000/insert/${coords.longitude}/${coords.latitude}`);
setSpinner(true);
setTimeout(() => setSpinner(false), 2000);
}
},
],
{cancelable: false},
)
}
return (
<View style={styles.container}>
<Spinner
visible={spinner}
textStyle={styles.spinnerTextStyle}
/>
<SearchBar
containerStyle={{borderColor:'#eee', borderWidth:1}}
placeholder="Vnesi mesto.."
onChangeText={(e) => {setSearch(e)}}
value={search}
platform='android'
/>
<MapView
style={{width:'100%', height:'80%'}}
initialRegion={{
latitude: Number(latitudePress),
longitude: Number(longitudePress),
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
onPress={ (event) => addMarkerAndRequest(event) }
>
<MapView.Marker
coordinate={{latitude: Number(latitudePress),
longitude: Number(longitudePress)}}
title={`ZŠ: ${latitudePress}, ZD: ${longitudePress}`}
/>
</MapView>
<Button
onPress={()=>Alert.alert(
'Sprememba mesta',
'Stanje v komori se bo spremenilo. Ali ste prepričani?',
[
{
text: 'NE',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
{
text: 'OK',
onPress: () => {
fetch(`http://192.168.88.253:5000/insertcity/${search}`);
setSpinner(true);
setTimeout(() => setSpinner(false), 2000);
setSearch('');
}
},
],
{cancelable: false},
)}
title='POTRDI'></Button>
</View>
);
}
LinksScreen.navigationOptions = {
title: 'Zemljevid',
};