Add Top Start Position of Overlay with Safe Area Insets

Author: RakaDoank

packages/carbon-react-native/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@audira/carbon-react-native",
-	"version": "1.0.0-beta.10",
+	"version": "1.0.0-beta.11",
 	"license": "MIT",
 	"homepage": "https://rakadoank.github.io/carbon-react-native",
 	"repository": "https://github.com/RakaDoank/carbon-react-native",

packages/carbon-react-native/src/providers/toast/_overlay/Overlay.tsx

@@ -13,10 +13,6 @@ import {
 	type LayoutChangeEvent,
 } from "react-native"
 
-import {
-	Spacing,
-} from "@audira/carbon-react-native-elements"
-
 import {
 	GlobalConfigContext,
 } from "../../../_internal/contexts"
@@ -34,6 +30,10 @@ import {
 	type ComponentWrapperRef,
 } from "./_component-wrapper"
 
+import {
+	Gap,
+} from "./_gap"
+
 export const Overlay = forwardRef<OverlayRef>(
 	function(
 		___props,
@@ -91,12 +91,12 @@ export const Overlay = forwardRef<OverlayRef>(
 					) {
 						componentWrappersRef.current[index].cancelX() // cancel the current delay first
 						componentWrappersRef.current[index].shiftX(
-							componentsConfig.current[index].width + Spacing.spacing_03,
+							componentsConfig.current[index].width + Gap,
 						)
 						if(index > 0) {
 							for(let i = 0; i < index; i++) {
 								componentWrappersRef.current[i]?.shiftY(
-									-componentsConfig.current[index].height - Spacing.spacing_03,
+									-componentsConfig.current[index].height - Gap,
 								)
 							}
 						}
@@ -127,14 +127,14 @@ export const Overlay = forwardRef<OverlayRef>(
 						}
 
 						componentWrappersRef.current[index].shiftX(
-							-componentsConfig.current[index].width - Spacing.spacing_03,
+							-componentsConfig.current[index].width - Gap,
 						)
 
 						if(componentWrappersRef.current.length > 1) {
 							for(let i = 0; i < componentWrappersRef.current.length - 1; i++) {
 								componentWrappersRef.current[i]?.shiftY(
 									// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion, @typescript-eslint/no-extra-non-null-assertion
-									componentsConfig.current[0]!!.height + Spacing.spacing_03,
+									componentsConfig.current[0]!!.height + Gap,
 								)
 							}
 						}
@@ -151,12 +151,12 @@ export const Overlay = forwardRef<OverlayRef>(
 
 					if(componentsConfig.current[index]?.state === 1) {
 						componentWrappersRef.current[index]?.shiftX(
-							componentsConfig.current[index].width + Spacing.spacing_03,
+							componentsConfig.current[index].width + Gap,
 							componentsConfig.current[index].duration ?? globalConfigContext.toastDuration,
 						)
 					} else if(
 						componentsConfig.current[index]?.state === 2 &&
-						!componentsConfig.current.some(config => config.state < 2) // somehow, the state may increase to "3" when it's dismissed by click/press. only god knows it.
+						!componentsConfig.current.some(config => config.state < 2)
 					) {
 						// Delete all componentsConfig, componentWrappersRef, and components (react state) when it's all done
 						componentsConfig.current.splice(0, componentsConfig.current.length)

packages/carbon-react-native/src/providers/toast/_overlay/_component-wrapper/ComponentWrapper.tsx

@@ -14,9 +14,16 @@ import {
 
 import {
 	Motion,
-	Spacing,
 } from "@audira/carbon-react-native-elements"
 
+import {
+	useSafeAreaInsets,
+} from "react-native-safe-area-context"
+
+import {
+	Gap,
+} from "../_gap"
+
 import type {
 	ComponentWrapperProps,
 } from "./ComponentWrapperProps"
@@ -37,14 +44,17 @@ export const ComponentWrapper = forwardRef<ComponentWrapperRef, ComponentWrapper
 	) {
 
 		const
+			safeAreaInsets =
+				useSafeAreaInsets(),
+
 			translateX =
 				useRef(new Animated.Value(0)),
 
 			translateXValueJS =
 				useRef(0),
 
 			translateY =
-				useRef(new Animated.Value(0)),
+				useRef(new Animated.Value(safeAreaInsets.top + Gap)),
 
 			translateYValueJS =
 				useRef(0)
@@ -148,13 +158,15 @@ const
 		StyleSheet.create({
 			componentWrapper: {
 				position: "absolute",
-				top: Spacing.spacing_03,
 				left: "100%",
 				width: "auto",
 				...Platform.select({
 					web: {
 						flexDirection: "row",
 					},
+					android: {
+						top: Gap, // iOS doesn't need this, Apple handles it internally
+					},
 				}),
 			},
 		}),

packages/carbon-react-native/src/providers/toast/_overlay/_gap.ts

@@ -0,0 +1,5 @@
+import {
+	Spacing,
+} from "@audira/carbon-react-native-elements"
+
+export const Gap = Spacing.spacing_03

storybook/.storybook-rn/preview.tsx

@@ -10,7 +10,7 @@ import {
 } from "react-native"
 
 import type {
-	Decorator,
+	// Decorator,
 	Preview,
 } from "@storybook/react-native"
 
@@ -29,9 +29,9 @@ const preview: Preview = {
 		Story => (
 			<SafeAreaProvider>
 				<CarbonReactNative>
-					<Body
-						Story={ Story }
-					/>
+					<Body>
+						<Story/>
+					</Body>
 				</CarbonReactNative>
 			</SafeAreaProvider>
 		),
@@ -46,10 +46,11 @@ const preview: Preview = {
 
 export default preview
 interface BodyProps {
-	Story: Parameters<Decorator>[0],
+	// Story: Parameters<Decorator>[0],
+	children?: React.ReactNode,
 }
 function Body({
-	Story,
+	children,
 }: BodyProps) {
 
 	const
@@ -71,7 +72,7 @@ function Body({
 			style={ [styleSheet.root, carbonStyleSheet.root] }
 			contentContainerStyle={ styleSheet.scrollContentContainer }
 		>
-			<Story/>
+			{ children }
 		</ScrollView>
 	)
 
@@ -84,7 +85,6 @@ const
 				flex: 1,
 			},
 			scrollContentContainer: {
-				padding: 16,
 				flexGrow: 1,
 				flexShrink: 1,
 				flexBasis: "auto",