fix(example-app): 🐛 remove bottom white space visible in iOS screens

crstnmac · crstnmac · commit 1e1b58684b21 · 2022-12-14T18:57:34.000+05:30
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import { LogBox, SafeAreaView, StatusBar } from "react-native";
+import { LogBox, StatusBar } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
 import { AdaptUIProvider } from "@adaptui/react-native-tailwind";
 import { NavigationContainer } from "@react-navigation/native";
 import tailwind from "twrnc";
@@ -17,15 +18,18 @@ const App = () => {
           style={tailwind.style(
             `flex-1 android:mt-[${StatusBar.currentHeight || 0}px]`,
           )}
+          edges={["bottom"]}
         >
-          <StatusBar
-            translucent
-            backgroundColor={"transparent"}
-            barStyle="dark-content"
-          />
-          <AdaptUIProvider>
-            <AppRoot />
-          </AdaptUIProvider>
+          <SafeAreaProvider>
+            <StatusBar
+              translucent
+              backgroundColor={"transparent"}
+              barStyle="dark-content"
+            />
+            <AdaptUIProvider>
+              <AppRoot />
+            </AdaptUIProvider>
+          </SafeAreaProvider>
         </SafeAreaView>
       </NavigationContainer>
     </GestureHandlerRootView>
diff --git a/example/src/components/Group.tsx b/example/src/components/Group.tsx
@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from "react";
-import { ViewProps } from "react-native";
+import { View, ViewProps } from "react-native";
 import {
   Box,
   styleAdapter,
@@ -15,7 +15,7 @@ export const Group = (props: PropsWithChildren<GroupType>) => {
   const { children, label, style, ...other } = props;
   const tailwind = useTheme();
   return (
-    <Box
+    <View
       style={[
         tailwind.style("bg-white-800 rounded-xl p-2 flex-col w-full"),
         styleAdapter(style),
@@ -30,6 +30,6 @@ export const Group = (props: PropsWithChildren<GroupType>) => {
       >
         {children}
       </Box>
-    </Box>
+    </View>
   );
 };
diff --git a/example/src/modules/feedback/CircularProgressScreen.tsx b/example/src/modules/feedback/CircularProgressScreen.tsx
@@ -1,4 +1,5 @@
 import React, { SetStateAction, useState } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   Box,
   Button,
@@ -46,6 +47,7 @@ export const CircularProgressScreen = () => {
   const [selectedSize, setSelectedSize] = useState<CircularProgressSizes>("md");
   const [hasHints, setHasHints] = useState<boolean>(false);
   const [hasCustomTrack, setHasCustomTrack] = useState<boolean>(false);
+  const safeAreaInsets = useSafeAreaInsets();
 
   return (
     <Box style={tailwind.style("flex-1 justify-center bg-white-900")}>
@@ -67,7 +69,7 @@ export const CircularProgressScreen = () => {
       </Box>
       <Box
         style={tailwind.style(
-          "rounded-t-lg shadow-lg bg-gray-100 justify-end p-2",
+          `rounded-t-lg shadow-lg bg-gray-100 justify-end px-2 pt-2 pb-[${safeAreaInsets.bottom}]`,
         )}
       >
         <RadioGroup
diff --git a/example/src/modules/feedback/MeterComponentScreen.tsx b/example/src/modules/feedback/MeterComponentScreen.tsx
@@ -1,4 +1,5 @@
 import React, { SetStateAction, useState } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   Box,
   Meter,
@@ -21,6 +22,7 @@ export const MeterComponentScreen = () => {
   const [hasIntervals, setHasIntervals] = useState<boolean>(false);
   const [hasHints, setHasHints] = useState<boolean>(false);
   const [hasLabel, setHasLabel] = useState<boolean>(false);
+  const safeAreaInsets = useSafeAreaInsets();
 
   return (
     <Box style={tailwind.style("flex-1 justify-center bg-white-900")}>
@@ -41,7 +43,7 @@ export const MeterComponentScreen = () => {
       </Box>
       <Box
         style={tailwind.style(
-          "rounded-t-lg shadow-lg bg-gray-100 justify-end p-2",
+          `rounded-t-lg shadow-lg bg-gray-100 justify-end px-2 pt-2 pb-[${safeAreaInsets.bottom}]`,
         )}
       >
         <RadioGroup
diff --git a/example/src/modules/feedback/ProgressScreen.tsx b/example/src/modules/feedback/ProgressScreen.tsx
@@ -1,4 +1,5 @@
 import React, { SetStateAction, useState } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   Box,
   Button,
@@ -47,6 +48,7 @@ export const ProgressScreen = () => {
 
   const [hasHints, setHasHints] = useState<boolean>(false);
   const [hasLabel, setHasLabel] = useState<boolean>(false);
+  const safeAreaInsets = useSafeAreaInsets();
 
   return (
     <Box style={tailwind.style("flex-1 justify-center bg-white-900")}>
@@ -72,7 +74,7 @@ export const ProgressScreen = () => {
       </Box>
       <Box
         style={tailwind.style(
-          "rounded-t-lg shadow-lg bg-gray-100 justify-end p-2",
+          `rounded-t-lg shadow-lg bg-gray-100 justify-end px-2 pt-2 pb-[${safeAreaInsets.bottom}]`,
         )}
       >
         <RadioGroup
diff --git a/example/src/modules/feedback/SpinnerScreen.tsx b/example/src/modules/feedback/SpinnerScreen.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   Box,
   Radio,
@@ -19,6 +20,7 @@ export const SpinnerScreen = () => {
   const [selectedSize, setSelectedSize] = useState<SpinnerSizes>("md");
   const [selectedSpinnerTrackVisibility, setSelectedSpinnerTrackVisibility] =
     useState<SpinnerTrackVisibility>("transparent");
+  const safeAreaInsets = useSafeAreaInsets();
 
   return (
     <Box style={tailwind.style("flex-1 justify-center bg-white-900")}>
@@ -34,10 +36,9 @@ export const SpinnerScreen = () => {
           track={selectedSpinnerTrackVisibility}
         />
       </Box>
-
       <Box
         style={tailwind.style(
-          "rounded-t-lg shadow-lg bg-gray-100 justify-end p-2",
+          `rounded-t-lg shadow-lg bg-gray-100 justify-end px-2 pt-2 pb-[${safeAreaInsets.bottom}]`,
         )}
       >
         <RadioGroup
diff --git a/example/src/modules/forms/CheckboxGroupScreen.tsx b/example/src/modules/forms/CheckboxGroupScreen.tsx
@@ -1,4 +1,5 @@
 import React, { SetStateAction, useState } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   Box,
   Checkbox,
@@ -22,6 +23,7 @@ export const CheckboxGroupScreen = () => {
   const [selectedSize, setSelectedSize] = useState<CheckboxSizes>("md");
   const [isDisabled, setIsDisabled] = useState<boolean>(false);
   const [isInvalid, setIsInvalid] = useState<boolean>(false);
+  const safeAreaInsets = useSafeAreaInsets();
 
   return (
     <Box style={tailwind.style("flex-1 justify-center bg-white-900")}>
@@ -50,7 +52,7 @@ export const CheckboxGroupScreen = () => {
       </Box>
       <Box
         style={tailwind.style(
-          "rounded-t-lg shadow-lg bg-gray-100 justify-end p-2",
+          `rounded-t-lg shadow-lg bg-gray-100 justify-end px-2 pt-2 pb-[${safeAreaInsets.bottom}]`,
         )}
       >
         <RadioGroup
diff --git a/example/src/modules/forms/InputScreen.tsx b/example/src/modules/forms/InputScreen.tsx
@@ -1,4 +1,5 @@
 import React, { SetStateAction, useCallback, useRef, useState } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   Box,
   Button,
@@ -26,6 +27,7 @@ export const InputScreen = () => {
   const [hasPrefix, setHasPrefix] = useState<boolean>(false);
   const suffix = hasSuffix ? <Icon icon={<Slot />} /> : null;
   const prefix = hasPrefix ? <Icon icon={<Slot />} /> : null;
+  const safeAreaInsets = useSafeAreaInsets();
 
   const inputRef = useRef<any>(null);
 
@@ -53,7 +55,7 @@ export const InputScreen = () => {
       </Box>
       <Box
         style={tailwind.style(
-          "rounded-t-lg shadow-lg bg-gray-100 justify-end p-2",
+          `rounded-t-lg shadow-lg bg-gray-100 justify-end px-2 pt-2 pb-[${safeAreaInsets.bottom}]`,
         )}
       >
         <RadioGroup
diff --git a/example/src/modules/forms/RadioScreen.tsx b/example/src/modules/forms/RadioScreen.tsx
@@ -1,4 +1,5 @@
 import React, { SetStateAction, useState } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   Box,
   Radio,
@@ -19,6 +20,7 @@ export const RadioScreen = () => {
   const [isDisabled, setIsDisabled] = useState<boolean>(false);
   const [isInvalid, setIsInvalid] = useState<boolean>(false);
   const [hasLabel, setHasLabel] = useState<boolean>(true);
+  const safeAreaInsets = useSafeAreaInsets();
 
   return (
     <Box style={tailwind.style("flex-1 justify-center bg-white-900")}>
@@ -71,7 +73,7 @@ export const RadioScreen = () => {
       </Box>
       <Box
         style={tailwind.style(
-          "rounded-t-lg shadow-lg bg-gray-100 justify-end p-2",
+          `rounded-t-lg shadow-lg bg-gray-100 justify-end px-2 pt-2 pb-[${safeAreaInsets.bottom}]`,
         )}
       >
         <RadioGroup
diff --git a/example/src/modules/forms/SelectScreen.tsx b/example/src/modules/forms/SelectScreen.tsx
@@ -1,4 +1,5 @@
 import React, { SetStateAction, useState } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   Box,
   CaretDown,
@@ -86,6 +87,7 @@ export const SelectScreen = () => {
   const [isSelectInvalid, setIsSelectInvalid] = useState<boolean>(false);
   const [isSelectDisabled, setIsSelectDisabled] = useState<boolean>(false);
   const [hasPrefix, setHasPrefix] = useState<boolean>(false);
+  const safeAreaInsets = useSafeAreaInsets();
 
   const [changeSuffix, setChangeSuffix] = useState(false);
 
@@ -108,7 +110,7 @@ export const SelectScreen = () => {
         </Box>
         <Box
           style={tailwind.style(
-            "rounded-t-lg shadow-lg bg-gray-100 justify-end p-2",
+            `rounded-t-lg shadow-lg bg-gray-100 justify-end px-2 pt-2 pb-[${safeAreaInsets.bottom}]`,
           )}
         >
           <RadioGroup
diff --git a/example/src/modules/forms/SliderComponentScreen.tsx b/example/src/modules/forms/SliderComponentScreen.tsx
@@ -1,4 +1,5 @@
 import React, { SetStateAction, useState } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   Box,
   Equals,
@@ -25,6 +26,7 @@ export const SliderComponentScreen = () => {
   const [hasMaxValue, setHasMaxValue] = useState<boolean>(false);
   const [hasStep, setHasStep] = useState<boolean>(false);
   const [hasRange, setHasRange] = useState<boolean>(false);
+  const safeAreaInsets = useSafeAreaInsets();
 
   return (
     <Box style={tailwind.style("flex-1 justify-center bg-white-900")}>
@@ -46,7 +48,7 @@ export const SliderComponentScreen = () => {
       </Box>
       <Box
         style={tailwind.style(
-          "rounded-t-lg shadow-lg bg-gray-100 justify-end p-2",
+          `rounded-t-lg shadow-lg bg-gray-100 justify-end px-2 pt-2 pb-[${safeAreaInsets.bottom}]`,
         )}
       >
         <RadioGroup
diff --git a/example/src/modules/forms/SwitchComponentScreen.tsx b/example/src/modules/forms/SwitchComponentScreen.tsx
@@ -1,4 +1,5 @@
 import React, { SetStateAction, useState } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   Box,
   Radio,
@@ -19,6 +20,7 @@ export const SwitchComponentScreen = () => {
 
   const [hasLabel, setHasLabel] = useState(false);
   const [hasDesc, setHasDesc] = useState(false);
+  const safeAreaInsets = useSafeAreaInsets();
 
   const [isSwitchDisabled, setIsSwitchDisabled] = useState<boolean>(false);
 
@@ -43,7 +45,7 @@ export const SwitchComponentScreen = () => {
       </Box>
       <Box
         style={tailwind.style(
-          "rounded-t-lg shadow-lg bg-gray-100 justify-end p-2",
+          `rounded-t-lg shadow-lg bg-gray-100 justify-end px-2 pt-2 pb-[${safeAreaInsets.bottom}]`,
         )}
       >
         <RadioGroup
diff --git a/example/src/modules/forms/TextAreaScreen.tsx b/example/src/modules/forms/TextAreaScreen.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useRef, useState } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   Box,
   Button,
@@ -25,6 +26,7 @@ export const TextAreaScreen = () => {
   const [size, setSize] = useState<TextAreaSizes>("sm");
   const suffix = hasSuffix ? <Icon icon={<Slot />} /> : null;
   const textAreaRef = useRef<any>(null);
+  const safeAreaInsets = useSafeAreaInsets();
 
   const handleFocusInOnPress = useCallback(() => {
     textAreaRef.current?.focus();
@@ -50,7 +52,7 @@ export const TextAreaScreen = () => {
       </Box>
       <Box
         style={tailwind.style(
-          "rounded-t-lg shadow-lg bg-gray-100 justify-end p-2",
+          `rounded-t-lg shadow-lg bg-gray-100 justify-end px-2 pt-2 pb-[${safeAreaInsets.bottom}]`,
         )}
       >
         <RadioGroup
diff --git a/example/src/modules/popups/TooltipScreen.tsx b/example/src/modules/popups/TooltipScreen.tsx
@@ -1,4 +1,5 @@
 import React, { SetStateAction, useState } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   Box,
   Button,
@@ -17,6 +18,7 @@ export const TooltipScreen = () => {
 
   const [hasArrow, setHasArrow] = useState<boolean>(false);
   const [hasOffset, setHasOffset] = useState<boolean>(false);
+  const safeAreaInsets = useSafeAreaInsets();
 
   const [tooltipPlacement, setTooltipPlacement] =
     useState<TooltipPlacement>("right");
@@ -47,7 +49,7 @@ export const TooltipScreen = () => {
       </Box>
       <Box
         style={tailwind.style(
-          "rounded-t-lg shadow-lg bg-gray-100 justify-end p-2",
+          `rounded-t-lg shadow-lg bg-gray-100 justify-end px-2 pt-2 pb-[${safeAreaInsets.bottom}]`,
         )}
       >
         <RadioGroup
diff --git a/example/src/modules/primitives/AvatarGroupScreen.tsx b/example/src/modules/primitives/AvatarGroupScreen.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { ImageSourcePropType } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   Avatar,
   AvatarGroup,
@@ -28,6 +29,7 @@ export const AvatarGroupScreen = () => {
   const [isMax, setIsMax] = useState<boolean>(false);
   const [maxNum, setMaxNum] = useState(10);
   const [parentsBackground, setParentsBackground] = useState("bg-white-900");
+  const safeAreaInsets = useSafeAreaInsets();
 
   useEffect(() => {
     switch (selectedVariant) {
@@ -124,7 +126,7 @@ export const AvatarGroupScreen = () => {
       </Box>
       <Box
         style={tailwind.style(
-          "rounded-t-lg shadow-lg bg-gray-100 justify-end p-2",
+          `rounded-t-lg shadow-lg bg-gray-100 justify-end px-2 pt-2 pb-[${safeAreaInsets.bottom}]`,
         )}
       >
         <RadioGroup
diff --git a/example/src/modules/primitives/AvatarScreen.tsx b/example/src/modules/primitives/AvatarScreen.tsx
@@ -1,4 +1,6 @@
 import React, { useEffect, useState } from "react";
+import { ImageSourcePropType } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   Avatar,
   AvatarSizes,
@@ -20,12 +22,13 @@ export const AvatarScreen = () => {
   const [name, setName] = useState<string | null>(null);
   const [isSquared, setIsSquared] = useState<boolean>(false);
   const [selectedSize, setSelectedSize] = useState<AvatarSizes>("xl");
-  const [imageUri, setImageUri] = useState<Object | null>(null);
+  const [imageUri, setImageUri] = useState<ImageSourcePropType | null>(null);
   const [selectedVariant, setSelectedVariant] = useState<null | string>(null);
   const [hasParentBackground, setHasParentBackground] =
     useState<boolean>(false);
   const [parentsBackground, setParentsBackground] =
     useState<string>("bg-white-900");
+  const safeAreaInsets = useSafeAreaInsets();
 
   useEffect(() => {
     switch (selectedVariant) {
@@ -72,12 +75,12 @@ export const AvatarScreen = () => {
           style={tailwind.style("my-1")}
           src={imageUri}
           parentsBackground={parentsBackground}
-          key={imageUri}
+          key={imageUri as string}
         />
       </Box>
       <Box
         style={tailwind.style(
-          "p-2 rounded-t-lg shadow-lg bg-gray-100 justify-end",
+          `rounded-t-lg shadow-lg bg-gray-100 justify-end px-2 pt-2 pb-[${safeAreaInsets.bottom}]`,
         )}
       >
         <RadioGroup
diff --git a/example/src/modules/primitives/BadgeScreen.tsx b/example/src/modules/primitives/BadgeScreen.tsx
diff --git a/example/src/modules/primitives/ButtonScreen.tsx b/example/src/modules/primitives/ButtonScreen.tsx
diff --git a/example/src/modules/primitives/CheckboxScreen.tsx b/example/src/modules/primitives/CheckboxScreen.tsx
diff --git a/example/src/modules/primitives/DividerScreen.tsx b/example/src/modules/primitives/DividerScreen.tsx
diff --git a/example/src/modules/primitives/TagScreen.tsx b/example/src/modules/primitives/TagScreen.tsx
