SafeAreaView upgrade

CHANGELOG.md

@@ -13,6 +13,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+## [3.0.0]
+
+### Removed
+
+- No longer rendering the widgets inside of a SafeAreaView. Users of the widgets need to handle this.
+
+### Updated
+
+- Stopped using the deprecated react-native SafeAreaView in favor of react-native-safe-area-context
+
 ## [2.0.3]
 
 ### Added

example/app/budgets.tsx

@@ -1,5 +1,6 @@
 import React from "react"
-import { SafeAreaView, StyleSheet, Platform } from "react-native"
+import { StyleSheet, Platform } from "react-native"
+import { SafeAreaView } from "react-native-safe-area-context"
 
 import { BudgetsWidget } from "@mxenabled/react-native-widget-sdk"
 

example/app/connect.tsx

@@ -1,5 +1,6 @@
 import React from "react"
-import { SafeAreaView, StyleSheet, Platform } from "react-native"
+import { StyleSheet, Platform } from "react-native"
+import { SafeAreaView } from "react-native-safe-area-context"
 import * as Linking from "expo-linking"
 
 import { ConnectWidget } from "@mxenabled/react-native-widget-sdk"

example/app/goals.tsx

@@ -1,5 +1,6 @@
 import React from "react"
-import { SafeAreaView, StyleSheet, Platform } from "react-native"
+import { StyleSheet, Platform } from "react-native"
+import { SafeAreaView } from "react-native-safe-area-context"
 
 import { GoalsWidget } from "@mxenabled/react-native-widget-sdk"
 

example/app/index.tsx

@@ -1,5 +1,6 @@
 import React, { FC, PropsWithChildren } from "react"
-import { SafeAreaView, Text, View, StyleSheet } from "react-native"
+import { Text, View, StyleSheet } from "react-native"
+import { SafeAreaView } from "react-native-safe-area-context"
 import { Link } from "expo-router"
 
 const styles = StyleSheet.create({

example/app/pulse.tsx

@@ -1,6 +1,6 @@
 import React from "react"
-import { SafeAreaView, StyleSheet, Platform } from "react-native"
-
+import { StyleSheet, Platform } from "react-native"
+import { SafeAreaView } from "react-native-safe-area-context"
 import { PulseWidget } from "@mxenabled/react-native-widget-sdk"
 
 const baseUrl = Platform.OS === "android" ? "http://10.0.2.2:8089" : "http://localhost:8089"

example/app/spending.tsx

@@ -1,6 +1,6 @@
 import React from "react"
-import { SafeAreaView, StyleSheet, Platform } from "react-native"
-
+import { StyleSheet, Platform } from "react-native"
+import { SafeAreaView } from "react-native-safe-area-context"
 import { SpendingWidget } from "@mxenabled/react-native-widget-sdk"
 
 const baseUrl = Platform.OS === "android" ? "http://10.0.2.2:8089" : "http://localhost:8089"

example/app/transactions.tsx

@@ -1,6 +1,6 @@
 import React from "react"
-import { SafeAreaView, StyleSheet, Platform } from "react-native"
-
+import { StyleSheet, Platform } from "react-native"
+import { SafeAreaView } from "react-native-safe-area-context"
 import { TransactionsWidget } from "@mxenabled/react-native-widget-sdk"
 
 const baseUrl = Platform.OS === "android" ? "http://10.0.2.2:8089" : "http://localhost:8089"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mxenabled/react-native-widget-sdk",
   "description": "MX React Native Widget SDK",
-  "version": "2.0.3",
+  "version": "3.0.0",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

src/components/renderer.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, MutableRefObject, ReactElement } from "react"
-import { SafeAreaView, StyleProp, ViewStyle } from "react-native"
+import { StyleProp, ViewStyle, View } from "react-native"
 import { WebView } from "react-native-webview"
 import { Payload } from "@mxenabled/widget-post-message-definitions"
 
@@ -35,7 +35,7 @@ export function useWidgetRendererWithRef<Configuration>(
   const style = props.style || fullscreenStyles
 
   if (!url) {
-    return [ref, <SafeAreaView style={style} />]
+    return [ref, <View style={style} />]
   }
 
   const scheme = props.uiMessageWebviewUrlScheme || "mx"
@@ -54,7 +54,7 @@ export function useWidgetRendererWithRef<Configuration>(
 
   return [
     ref,
-    <SafeAreaView testID="widget_view" style={style}>
+    <View testID="widget_view" style={style}>
       <WebView
         testID="widget_webview"
         style={props.webViewStyle}
@@ -70,6 +70,6 @@ export function useWidgetRendererWithRef<Configuration>(
         onShouldStartLoadWithRequest={handler}
         onError={props.onWebViewError}
       />
-    </SafeAreaView>,
+    </View>,
   ]
 }