Importing SafeAreaView from react-native-safe-area-context to get rid of deprecation warnings for importing it from 'react-native'

Author: whiteHatCip

example/src/App.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import Mapbox from '@rnmapbox/maps';
-import { StyleSheet, Text, View, LogBox, SafeAreaView } from 'react-native';
+import { StyleSheet, Text, View, LogBox } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { NavigationContainer } from '@react-navigation/native';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 
 import sheet from './styles/sheet';
 import colors from './styles/colors';

example/src/examples/Map/MapAndRNNavigation.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import { Button, Modal, Text, SafeAreaView } from 'react-native';
+import { Button, Modal, Text } from 'react-native';
 import { MapView, UserLocation, Camera } from '@rnmapbox/maps';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 /**
  * @param {ItempProps['navigation']} navigation

example/src/examples/SymbolCircleLayer/Earthquakes.tsx

@@ -11,7 +11,8 @@ import MapboxGL, {
 import { FeatureCollection } from 'geojson';
 import moment from 'moment';
 import React, { useRef, useState } from 'react';
-import { FlatList, SafeAreaView } from 'react-native';
+import { FlatList } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import earthQuakesJSON from '../../assets/earthquakes.json';
 import { SF_OFFICE_COORDINATE } from '../../utils';

example/src/examples/UserLocation/CustomNativeUserLocation.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { SafeAreaView, View } from 'react-native';
+import { View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import {
   MapView,
   Camera,

example/src/examples/UserLocation/SetDisplacement.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Mapbox, { MapView, UserLocation, Camera } from '@rnmapbox/maps';
-import { SafeAreaView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { ButtonGroup } from '@rneui/base';
 
 const DISPLACEMENT = [0, 5, 10];

example/src/examples/UserLocation/SetTintColor.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { MapView, Camera, UserLocation } from '@rnmapbox/maps';
 import { ButtonGroup } from '@rneui/base';
-import { SafeAreaView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 const COLOR = ['red', 'yellow', 'green'];
 const OPTIONS = [{ label: 'red' }, { label: 'yellow' }, { label: 'green' }];

example/src/examples/UserLocation/UserLocationPadding.tsx

@@ -6,7 +6,7 @@ import {
   type CameraPadding,
 } from '@rnmapbox/maps';
 import { ButtonGroup } from '@rneui/base';
-import { SafeAreaView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { ExampleWithMetadata } from '../common/ExampleMetadata'; // exclude-from-example-doc
 

example/src/examples/UserLocation/UserLocationRenderMode.tsx

@@ -7,7 +7,8 @@ import {
   UserLocationRenderMode as UserLocationRenderModeType,
   UserTrackingMode,
 } from '@rnmapbox/maps';
-import { Button, Platform, SafeAreaView, View } from 'react-native';
+import { Button, Platform, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { ButtonGroup, Text } from '@rneui/base';
 
 import { DEFAULT_CENTER_COORDINATE } from '../../utils';

example/src/examples/V10/MapHandlers.tsx

@@ -16,7 +16,8 @@ import {
   Position,
 } from 'geojson';
 import React, { useState } from 'react';
-import { SafeAreaView, View } from 'react-native';
+import { View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import colors from '../../styles/colors';
 import { ExampleWithMetadata } from '../common/ExampleMetadata'; // exclude-from-doc

example/src/scenes/ScreenWithoutMap.tsx

@@ -1,6 +1,7 @@
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import React, { JSX } from 'react';
-import { Button, Text, View, SafeAreaView } from 'react-native';
+import { Button, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 type StackParamsList = {
   ScreenWithoutMap: Record<string, never>;