title: React-Native-maps How do I keep updating regions in MapView?
body: <p>I implemented a function that moves the marker's number to that location when it is found on the search screen. And I want to print only certain markers when I press the button(<code>Button.showSpecificMarker</code>) on MainScreen.</p>
  <p>However, when I press the button, only certain markers are printed, but it moves to the last searched region, not the region I'm looking at.</p>
  <p>MainScreen.js</p>
  <pre><code>import { StyleSheet, Image, View, Text, TouchableOpacity, Button } from 'react-native';
  import { Icon } from 'native-base'; // 추가된 코드
  import { withNavigation, navigation } from 'react-navigation';
  import MapView, { Marker, PROVIDER_GOOGLE, MAP_TYPES } from 'react-native-maps';
  import iksonData from './ikson.json';
  
  const styles = StyleSheet.create({
    container: { flex: 1, backgroundColor: 'white' },
    text: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
    iconImg: {
      width: 30,
      height: 30,
      padding: 10,
      marginLeft: 5,
    }
  });
  
  function MapScreen(props) {
    const [region, setRegion] = useState({
      latitude: 35.962691,
      longitude: 126.97894,
      latitudeDelta: 0.0322,
      longitudeDelta: 0.0321,
    });
    const [findRegion, setFindRegion] = useState({
      latitude: null,
      longitude: null,
      latitudeDelta: null,
      longitudeDelta: null,
    });
    const [showVehicleReader, setShowVehicleReader] = useState(-1);
    const [btnTitle, setBtnTitle] = useState('차량용 판독기만 보기');
    const new_region = props.navigation.getParam('region');
    let markers;
  
    const handleBtnPress = () =&gt; {
      setShowVehicleReader((showVehicleReader === -1) ? 0 : -1);
      setBtnTitle((btnTitle === '차량용 판독기만 보기') ? '전체 보기' : '차량용 판독기만 보기');
    }
  
    //  -1은 전체 0은 차량용 판독기만, 1은 차량용 판독기 제외
    if (showVehicleReader === 1) {
      markers = &lt;View&gt;
        {iksonData.map((item) =&gt;
          (item.purpose !== '차량번호판독용') ?
            &lt;Marker
              key={item.id}
              title={item.id + &quot;번 CCTV&quot;}
              description={item.lotAddress}
              coordinate={{
                latitude: parseFloat(item.latitude),
                longitude: parseFloat(item.longitude),
              }}
            /&gt;
            :
            null
        )}
      &lt;/View&gt;
    } else if (showVehicleReader === 0) {
      markers = &lt;View&gt;
        {iksonData.map((item) =&gt;
          (item.purpose === '차량번호판독용') ?
            &lt;Marker
              key={item.id}
              title={item.id + &quot;번 CCTV&quot;}
              description={item.lotAddress}
              coordinate={{
                latitude: parseFloat(item.latitude),
                longitude: parseFloat(item.longitude),
              }}
              pinColor={'blue'}
            /&gt;
            :
            null
        )}
      &lt;/View&gt;
    } else {
      markers = &lt;View&gt;
        {iksonData.map((item) =&gt;
          (item.purpose === '차량번호판독용') ?
            &lt;Marker
              key={item.id}
              title={item.id + &quot;번 CCTV&quot;}
              description={item.lotAddress}
              coordinate={{
                latitude: parseFloat(item.latitude),
                longitude: parseFloat(item.longitude),
              }}
              pinColor={'blue'}
            /&gt;
            :
            &lt;Marker
              key={item.id}
              title={item.id + &quot;번 CCTV&quot;}
              description={item.lotAddress}
              coordinate={{
                latitude: parseFloat(item.latitude),
                longitude: parseFloat(item.longitude),
              }}
            /&gt;
        )}
      &lt;/View&gt;
    }
  
    //rendering!!!
    return (
      &lt;View style={styles.container}&gt;
        &lt;MapView
          style={{ flex: 1 }}
          zoomEnabled={true}
          provider={PROVIDER_GOOGLE}
          mapType=&quot;hybrid&quot;
          minZoomLevel={13}
          maxZoomLevel={19}
          initialRegion={
            {
              latitude: 35.962691,
              longitude: 126.97894,
              latitudeDelta: 0.0322,
              longitudeDelta: 0.0321,
            }
          }
  
          region={new_region || region}
        &gt;
          {markers}
        &lt;/MapView&gt;
        &lt;View&gt;
          &lt;Button
            class='showSpecificMarker'
            title={btnTitle}
            color=&quot;#f194ff&quot;
            onPress={handleBtnPress}
          /&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    );
  }
  
  // navigationOptions 코드 추가
  MapScreen.navigationOptions = ({ navigation }) =&gt; {
    return {
      headerLeft: () =&gt; &lt;Image source={require('./assets/logo.jpg')} style={styles.iconImg} /&gt;,
      title: &lt;Text style={styles.text}&gt;9585부대 CSMap&lt;/Text&gt;,
      headerRight: () =&gt;
      (
        &lt;TouchableOpacity onPress={() =&gt; navigation.navigate('Search')}&gt;
          &lt;Icon name='ios-search' style={{ paddingRight: 10 }} /&gt;
        &lt;/TouchableOpacity&gt;
      ),
      headerTitleAlign: 'center',
    }
  }
  
  export default withNavigation(MapScreen);
  </code></pre>
  <p>SearchScreen.js</p>
  <pre><code>// https://aboutreact.com/react-native-search-bar-filter-on-listview/
  // import React in our code
  import React, { useState, useEffect } from 'react';
  
  // import all the components we are going to use
  import { SafeAreaView, Text, StyleSheet, View, FlatList, TouchableOpacity } from 'react-native';
  import { SearchBar } from 'react-native-elements';
  // 익산 데이터
  import iksonData from './ikson.json';
  
  const SearchScreen = (props) =&gt; {
    const { navigation, route } = props;
    const [search, setSearch] = useState('');
    //filter했을 때 나오는 리스트
    const [filteredDataSource, setFilteredDataSource] = useState([]);
    // 아무것도 검색안할 때 나와야되는 전체 리스트
    const [masterDataSource, setMasterDataSource] = useState([]);
  
    useEffect(() =&gt; {
      setFilteredDataSource(iksonData);
      setMasterDataSource(iksonData);
    }, []);
  
    const searchFilterFunction = (text) =&gt; {
      // Check if searched text is not blank
      if (text) {
        // Inserted text is not blank
        // Filter the masterDataSource
        // Update FilteredDataSource
        const newData = masterDataSource.filter(function (item) { //CCTV 카메라 넘버로 검색
          const itemData = String(item.id);
          const textData = text;
          return itemData.indexOf(textData) &gt; -1;
        });
        setFilteredDataSource(newData);
        setSearch(text);
      } else {
        // Inserted text is blank
        // Update FilteredDataSource with masterDataSource
        setFilteredDataSource(masterDataSource);
        setSearch(text);
      }
    };
  
    // flatlist item 부분
    const ItemView = ({ item }) =&gt; {
      return (
        // Flat List Item
        &lt;Text style={styles.itemStyle} onPress={() =&gt; getItem(item)}&gt;
          &lt;View style={{ flex: 1}}&gt;
              &lt;Text style={{ fontWeight: &quot;bold&quot;, paddingTop: 25}}&gt;{item.id + &quot;번 CCTV&quot;}&lt;/Text&gt;
              &lt;Text style={{ paddingTop: 5}}&gt;{'주소: ' + item.lotAddress}&lt;/Text&gt;
              &lt;Text style={{ paddingTop: 5}}&gt;{'목적: ' + item.purpose}&lt;/Text&gt;
          &lt;/View&gt;
        &lt;/Text&gt;
      );
    };
  
    const ItemSeparatorView = () =&gt; {
      return (
        // Flat List Item Separator
        &lt;View
          style={{
            height: 0.5,
            width: '100%',
            backgroundColor: '#C8C8C8',
          }}
        /&gt;
      );
    };
  
    const getItem = (item) =&gt; {
      navigation.navigate('Main', {
        region:{
          latitude:item.latitude,
          longitude:item.longitude,
          latitudeDelta: 0.0022,
          longitudeDelta: 0.0021,
        }
      })
    };
  
  
    // flatlist의 data는 객체배열
    return (
      &lt;SafeAreaView style={{ flex: 1 }}&gt;
        &lt;View style={styles.container}&gt;
          &lt;SearchBar
            round
            searchIcon={{ size: 24 }}
            onChangeText={(text) =&gt; searchFilterFunction(text)}
            onClear={(text) =&gt; searchFilterFunction('')}
            placeholder=&quot;보고싶은 CCTV 번호를 입력해주세요.&quot;
            value={search}
          /&gt;
          &lt;FlatList
            data={filteredDataSource}
            keyExtractor={(item, index) =&gt; index.toString()}
            ItemSeparatorComponent={ItemSeparatorView}
            renderItem={ItemView}
          /&gt;
        &lt;/View&gt;
      &lt;/SafeAreaView&gt;
    );
  };
  
  const styles = StyleSheet.create({
    container: {
      backgroundColor: 'white',
    },
    itemStyle: {
      padding: 10,
    },
  });
  
  export default SearchScreen;
  </code></pre>
  <p>I think it moves to the last place searched by the <code>region={new_region||region}</code> in MainScreen MapView. Then how can I press the button to get the region I'm watching now?</p>
  <p>=======</p>
  <p><a href="https://youtu.be/q2z-Zeq-Wxg" rel="nofollow noreferrer">Enter link video here</a></p>