title: How to send value to another screen in React Native with hooks?
body: <p>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. </p>
  
  <p>This is my <code>HomeScreen.js</code> file: </p>
  
  <pre><code>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(() =&gt; {
      Font.loadAsync({
        'raleway-regular': require('../assets/fonts/Raleway-Regular.ttf'),
        'raleway-light': require('../assets/fonts/Raleway-Light.ttf'),
      });
      setFontLoaded(true);
      const interval = setInterval(() =&gt; {
        fetch('http://192.168.88.253:5000/read')
      .then((response) =&gt; response.json())
      .then((responseJson) =&gt; {
        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) =&gt; {
        console.warn(error);
      }); 
      }, 5000);
      return () =&gt; clearInterval(interval);
    }, []);
  
    return (
      &lt;View style={styles.container}&gt;
        &lt;View style={styles.upperContainer}&gt;
          &lt;View style={styles.oneVertical}&gt;
            &lt;Text style={styles.city}&gt;{city.toUpperCase()}, &lt;/Text&gt;
            &lt;Text style={styles.countrycode}&gt;{countrycode}&lt;/Text&gt; 
          &lt;/View&gt;
          &lt;View style={styles.twoVertical}&gt;
            &lt;Icon name={icon} type='ionicon' iconStyle={styles.icon}&gt;&lt;/Icon&gt;
            &lt;Text style={styles.date}&gt;{date}&lt;/Text&gt;  
          &lt;/View&gt;
          &lt;View style={styles.threeVertical}&gt;
            &lt;View style={styles.tempView}&gt;
              &lt;Text style={styles.temperature}&gt;{Math.round(temperature)}°&lt;/Text&gt;
            &lt;/View&gt;
            &lt;View style={styles.otherView}&gt;
              &lt;View style={styles.humidityTemp}&gt;
                &lt;Icon iconStyle={styles.otherViewIcon} type='ionicon' name='ios-jet'&gt;&lt;/Icon&gt;
                &lt;Text style={{color:'#fff', fontSize:20, fontFamily: 'raleway-regular',}}&gt; {Math.round(wind)} km/h&lt;/Text&gt;
              &lt;/View&gt;
              &lt;View style={styles.humidityTemp}&gt;
                &lt;Icon iconStyle={styles.otherViewIcon} type='ionicon' name='ios-water'&gt;&lt;/Icon&gt;
                &lt;Text style={{color:'#fff', fontSize:20, fontFamily: 'raleway-regular',}}&gt;  {humidity} %&lt;/Text&gt;
              &lt;/View&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/View&gt;
        &lt;View style={styles.lowerContainer}&gt;
          &lt;View style={styles.ChamberView}&gt;
            &lt;Text style={{color:'#fff', fontFamily: 'raleway-regular',}}&gt;TEMP.&lt;/Text&gt;
            &lt;Icon iconStyle={{color:'#fff', fontSize:30, marginVertical:10, }} type='ionicon' name='md-thermometer'&gt;&lt;/Icon&gt;
            &lt;Text style={{color:'#fff', fontSize:20, fontFamily: 'raleway-regular',}}&gt;{temperatureInside}°&lt;/Text&gt;
          &lt;/View&gt;
          &lt;View style={styles.ChamberView}&gt;
            &lt;Text style={{color:'#fff', fontFamily: 'raleway-regular',}}&gt;VLAGA&lt;/Text&gt;
            &lt;Icon iconStyle={{color:'#fff', fontSize:30, marginVertical:10, }} type='ionicon' name='ios-water'&gt;&lt;/Icon&gt;
            &lt;Text style={{color:'#fff', fontSize:20, fontFamily: 'raleway-regular',}}&gt;{humidityInside} %&lt;/Text&gt;
          &lt;/View&gt;
          &lt;View style={styles.ChamberView}&gt;
            &lt;Text style={{color:'#fff', fontFamily: 'raleway-regular',}}&gt;TLAK&lt;/Text&gt;
            &lt;Icon iconStyle={{color:'#fff', fontSize:30, marginVertical:10, }} type='ionicon' name='ios-hand'&gt;&lt;/Icon&gt;
            &lt;Text style={{color:'#fff', fontSize:20, fontFamily: 'raleway-regular',}}&gt;{pressure} bar&lt;/Text&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>
  
  <p>and there is <code>LinksScreen.js</code> file:</p>
  
  <pre><code>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 =&gt; {
      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: () =&gt; console.log('Cancel Pressed'),
            style: 'cancel',
          },
          {
            text: 'OK', 
            onPress: () =&gt; {
              fetch(`http://192.168.88.253:5000/insert/${coords.longitude}/${coords.latitude}`);
              setSpinner(true);
              setTimeout(() =&gt; setSpinner(false), 2000);
            }
          },
        ],
        {cancelable: false},
      )
    }
  
    return (
      &lt;View style={styles.container}&gt;
        &lt;Spinner
            visible={spinner}
            textStyle={styles.spinnerTextStyle}
        /&gt;
        &lt;SearchBar
          containerStyle={{borderColor:'#eee', borderWidth:1}}
          placeholder="Vnesi mesto.."
          onChangeText={(e) =&gt; {setSearch(e)}}
          value={search}
          platform='android'
        /&gt;
        &lt;MapView
          style={{width:'100%', height:'80%'}}
          initialRegion={{
          latitude: Number(latitudePress),
          longitude: Number(longitudePress),
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
          }}
          onPress={ (event) =&gt; addMarkerAndRequest(event) }
        &gt;
          &lt;MapView.Marker
              coordinate={{latitude: Number(latitudePress),
              longitude: Number(longitudePress)}}
              title={`ZŠ: ${latitudePress}, ZD: ${longitudePress}`}
           /&gt;
        &lt;/MapView&gt;
        &lt;Button 
          onPress={()=&gt;Alert.alert(
            'Sprememba mesta',
            'Stanje v komori se bo spremenilo. Ali ste prepričani?',
            [
              {
                text: 'NE',
                onPress: () =&gt; console.log('Cancel Pressed'),
                style: 'cancel',
              },
              {
                text: 'OK', 
                onPress: () =&gt; {
                  fetch(`http://192.168.88.253:5000/insertcity/${search}`);
                  setSpinner(true);
                  setTimeout(() =&gt; setSpinner(false), 2000);
                  setSearch('');
                }
              },
            ],
            {cancelable: false},
          )}
          title='POTRDI'
        &gt;&lt;/Button&gt;
      &lt;/View&gt;
    );
  }
  
  LinksScreen.navigationOptions = {
    title: 'Zemljevid',
  };
  </code></pre>