title: Layout and render a View in a MapView component - React native
body: <p>Im fairly new to React native. I have created a MapView component on my screen and am trying to add a map key that indicates what each marker color is. I was able to achieve this only to find out that the layout bugs out when I leave and return to that screen</p>
  
  <p><strong>Example</strong> </p>
  
  <p><em>This is what i'm trying to achieve</em></p>
  
  <p><a href="https://i.stack.imgur.com/xWmuIl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xWmuIl.png" alt="enter image description here"></a></p>
  
  <p><em>This is what I keep getting</em></p>
  
  <p><a href="https://i.stack.imgur.com/bdaVdl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bdaVdl.png" alt="enter image description here"></a></p>
  
  <p><strong>This is my code</strong></p>
  
  <pre><code>&lt;SafeAreaView style={{ flex: 1, backgroundColor: '#376772' }}&gt;
          &lt;View style={{ flex: 0.6 }}&gt;
              &lt;MapView
                  style={{ flex: 1 }}
                  showsMyLocationButton={true}
                  showsUserLocation={true}
                  followsUserLocation={lock}
                  onTouchStart={() =&gt; {
                      set(false)
                  }}
                  onPress={(loc) =&gt; {
                      setLocation(loc.nativeEvent.coordinate)
                  }}
              &gt;
                     {/* Map key view begins here */}
                  &lt;View
                      style={{
                          alignSelf: 'center',
                          alignContent: 'center',
                          backgroundColor: '#202B35',
                          padding: 10,
                          paddingHorizontal: 35,
                          margin: 5,
                          borderRadius: 5,
                          alignItems: 'center',
                      }}
                  &gt;
                      &lt;View style={{ flexDirection: 'row' }}&gt;
                          &lt;Badge
                              status="error"
                              containerStyle={{ padding: 5 }}
                          /&gt;
                          &lt;Text
                              style={{
                                  color: '#fff',
                                  fontSize: 16,
                                  marginBottom: 5,
                              }}
                          &gt;
                              New Crossing
                          &lt;/Text&gt;
                      &lt;/View&gt;
  
                      &lt;View style={{ flexDirection: 'row' }}&gt;
                          &lt;Badge
                              status="primary"
                              containerStyle={{ padding: 5 }}
                          /&gt;
                          &lt;Text style={{ color: '#fff', fontSize: 16 }}&gt;
                              {'Existing Crossings'}
                          &lt;/Text&gt;
                      &lt;/View&gt;
                  &lt;/View&gt;
                  &lt;Marker coordinate={location} /&gt;
              &lt;/MapView&gt;
          &lt;/View&gt;
  </code></pre>
  
  <p>Any help would be very appreciative. please let me know if I am missing any vital information on this post.</p>