chore: smaller fixes to various examples

rnmapbox · Sep 13, 2023 · 47b8360 · 47b8360
1 parent 099bbc8
commit 47b8360
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 55 deletions.
diff --git a/example/src/examples/Map/ChangeLayerColor.js b/example/src/examples/Map/ChangeLayerColor.js
@@ -40,7 +40,7 @@ class ChangeLayerColor extends React.Component {
         >
           <MapboxGL.Camera defaultSettings={defaultCamera} />
           {!!fillColor && (
-            <MapboxGL.FillLayer id="water" style={{ fillColor }} />
+            <MapboxGL.FillLayer id="water" existing style={{ fillColor }} />
           )}
         </MapboxGL.MapView>
         <Bubble onPress={this.onPress}>

diff --git a/example/src/examples/Map/MapAndRNNavigation.js b/example/src/examples/Map/MapAndRNNavigation.js
@@ -7,6 +7,7 @@ import {
   StyleSheet,
   Modal,
   Text,
+  SafeAreaView,
 } from 'react-native';
 import MapboxGL, {
   MapView,
@@ -101,17 +102,19 @@ export default function MapAndNavigation({
         transparent={false}
         visible={modalVisible}
         onRequestClose={() => {
-          this.setState({ modalVisbile: false });
+          setModalVisible(false);
         }}
       >
-        <Text>this is a modal</Text>
-        <Button
-          title="close"
-          onPress={() => {
-            this.setState({ modalVisbile: false });
-          }}
-        />
-        <MapView style={{ flex: 1 }} />
+        <SafeAreaView style={{ flex: 1 }}>
+          <Text>this is a modal</Text>
+          <Button
+            title="close"
+            onPress={() => {
+              setModalVisible(false);
+            }}
+          />
+          <MapView style={{ flex: 1 }} />
+        </SafeAreaView>
       </Modal>
       {showMap && (
         <MapView style={{ flex: 1 }}>

diff --git a/example/src/examples/SymbolCircleLayer/Earthquakes.tsx b/example/src/examples/SymbolCircleLayer/Earthquakes.tsx
@@ -11,7 +11,7 @@ import MapboxGL, {
 import { FeatureCollection } from 'geojson';
 import moment from 'moment';
 import React, { useRef, useState } from 'react';
-import { FlatList } from 'react-native';
+import { FlatList, SafeAreaView } from 'react-native';
 
 import earthQuakesJSON from '../../assets/earthquakes.json';
 import sheet from '../../styles/sheet';
@@ -99,42 +99,44 @@ const Earthquakes = ({ label, onDismissExample }: BaseExampleProps) => {
   return (
     <>
       <Overlay isVisible={!!selectedCluster} fullScreen>
-        <FAB
-          onPress={() => {
-            setSelectedCluster(undefined);
-          }}
-          icon={<Icon name="close" />}
-          size="large"
-          style={styles.fab}
-        />
-        {selectedCluster && (
-          <FlatList
-            keyExtractor={({ properties: earthquakeInfo }) => {
-              return earthquakeInfo?.code;
-            }}
-            data={selectedCluster.features}
-            renderItem={({ item: { properties: earthquakeInfo } }) => {
-              const magnitude = `Magnitude: ${earthquakeInfo?.mag}`;
-              const place = `Place: ${earthquakeInfo?.place}`;
-              const code = `Code: ${earthquakeInfo?.code}`;
-              const time = `Time: ${moment(earthquakeInfo?.time).format(
-                'MMMM Do YYYY, h:mm:ss a',
-              )}`;
-
-              return (
-                <ListItem bottomDivider>
-                  <ListItem.Content>
-                    <ListItem.Title>{earthquakeInfo?.title}</ListItem.Title>
-                    <ListItem.Subtitle>{magnitude}</ListItem.Subtitle>
-                    <ListItem.Subtitle>{place}</ListItem.Subtitle>
-                    <ListItem.Subtitle>{code}</ListItem.Subtitle>
-                    <ListItem.Subtitle>{time}</ListItem.Subtitle>
-                  </ListItem.Content>
-                </ListItem>
-              );
+        <SafeAreaView style={{ flex: 1 }}>
+          <FAB
+            onPress={() => {
+              setSelectedCluster(undefined);
             }}
+            icon={<Icon name="close" />}
+            size="large"
+            style={styles.fab}
           />
-        )}
+          {selectedCluster && (
+            <FlatList
+              keyExtractor={({ properties: earthquakeInfo }) => {
+                return earthquakeInfo?.code;
+              }}
+              data={selectedCluster.features}
+              renderItem={({ item: { properties: earthquakeInfo } }) => {
+                const magnitude = `Magnitude: ${earthquakeInfo?.mag}`;
+                const place = `Place: ${earthquakeInfo?.place}`;
+                const code = `Code: ${earthquakeInfo?.code}`;
+                const time = `Time: ${moment(earthquakeInfo?.time).format(
+                  'MMMM Do YYYY, h:mm:ss a',
+                )}`;
+
+                return (
+                  <ListItem bottomDivider>
+                    <ListItem.Content>
+                      <ListItem.Title>{earthquakeInfo?.title}</ListItem.Title>
+                      <ListItem.Subtitle>{magnitude}</ListItem.Subtitle>
+                      <ListItem.Subtitle>{place}</ListItem.Subtitle>
+                      <ListItem.Subtitle>{code}</ListItem.Subtitle>
+                      <ListItem.Subtitle>{time}</ListItem.Subtitle>
+                    </ListItem.Content>
+                  </ListItem>
+                );
+              }}
+            />
+          )}
+        </SafeAreaView>
       </Overlay>
       <Page label={label} onDismissExample={onDismissExample}>
         <MapView style={sheet.matchParent} styleURL={MapboxGL.StyleURL.Dark}>

diff --git a/example/src/scenes/ScreenWithoutMap.tsx b/example/src/scenes/ScreenWithoutMap.tsx
@@ -1,6 +1,6 @@
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import React from 'react';
-import { Button, Text, View } from 'react-native';
+import { Button, Text, View, SafeAreaView } from 'react-native';
 
 type StackParamsList = {
   ScreenWithoutMap: Record<string, never>;
@@ -20,14 +20,16 @@ export function ScreenWithoutMap({
   navigation: ScreenWithoutMapProps['navigation'];
 }): JSX.Element {
   return (
-    <View>
-      <Text>No map view</Text>
-      <Button
-        title="Back"
-        onPress={() => {
-          navigation.goBack();
-        }}
-      />
-    </View>
+    <SafeAreaView>
+      <View>
+        <Text>No map view</Text>
+        <Button
+          title="Back"
+          onPress={() => {
+            navigation.goBack();
+          }}
+        />
+      </View>
+    </SafeAreaView>
   );
 }