diff --git a/example/src/App.tsx b/example/src/App.tsx index a4e0ab41..caceef62 100644 --- 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"]} > - - - - + + + + + + diff --git a/example/src/components/Group.tsx b/example/src/components/Group.tsx index 5637a85a..efc5e6e7 100644 --- 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) => { const { children, label, style, ...other } = props; const tailwind = useTheme(); return ( - ) => { > {children} - + ); }; diff --git a/example/src/modules/feedback/CircularProgressScreen.tsx b/example/src/modules/feedback/CircularProgressScreen.tsx index 4ede579f..4f3b691b 100644 --- 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("md"); const [hasHints, setHasHints] = useState(false); const [hasCustomTrack, setHasCustomTrack] = useState(false); + const safeAreaInsets = useSafeAreaInsets(); return ( @@ -56,23 +58,25 @@ export const CircularProgressScreen = () => { > setSelectedSize(value)} + onChange={(value: string) => + setSelectedSize(value as CircularProgressSizes) + } orientation="horizontal" > @@ -84,7 +88,9 @@ export const CircularProgressScreen = () => { setSelectedTheme(value)} + onChange={(value: string) => + setSelectedTheme(value as CircularProgressTheme) + } orientation="horizontal" > diff --git a/example/src/modules/feedback/MeterComponentScreen.tsx b/example/src/modules/feedback/MeterComponentScreen.tsx index 7ad81dc9..d1a198f2 100644 --- 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(false); const [hasHints, setHasHints] = useState(false); const [hasLabel, setHasLabel] = useState(false); + const safeAreaInsets = useSafeAreaInsets(); return ( @@ -41,12 +43,12 @@ export const MeterComponentScreen = () => { setSelectedSize(value)} + onChange={(value: string) => setSelectedSize(value as MeterSizes)} orientation="horizontal" > @@ -57,7 +59,7 @@ export const MeterComponentScreen = () => { setSelectedTheme(value)} + onChange={(value: string) => setSelectedTheme(value as MeterTheme)} orientation="horizontal" > diff --git a/example/src/modules/feedback/ProgressScreen.tsx b/example/src/modules/feedback/ProgressScreen.tsx index 7c4b2859..bb42b6d9 100644 --- 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(false); const [hasLabel, setHasLabel] = useState(false); + const safeAreaInsets = useSafeAreaInsets(); return ( @@ -72,12 +74,14 @@ export const ProgressScreen = () => { setSelectedSize(value)} + onChange={(value: string) => + setSelectedSize(value as ProgressBarSizes) + } orientation="horizontal" > @@ -88,7 +92,9 @@ export const ProgressScreen = () => { setSelectedTheme(value)} + onChange={(value: string) => + setSelectedTheme(value as ProgressBarTheme) + } orientation="horizontal" > diff --git a/example/src/modules/feedback/SpinnerScreen.tsx b/example/src/modules/feedback/SpinnerScreen.tsx index a1b726b7..0109a2c2 100644 --- 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("md"); const [selectedSpinnerTrackVisibility, setSelectedSpinnerTrackVisibility] = useState("transparent"); + const safeAreaInsets = useSafeAreaInsets(); return ( @@ -34,15 +36,14 @@ export const SpinnerScreen = () => { track={selectedSpinnerTrackVisibility} /> - setSelectedSize(value)} + onChange={(value: string) => setSelectedSize(value as SpinnerSizes)} orientation="horizontal" > @@ -55,7 +56,7 @@ export const SpinnerScreen = () => { setSelectedTheme(value)} + onChange={(value: string) => setSelectedTheme(value as SpinnerTheme)} orientation="horizontal" > @@ -68,8 +69,8 @@ export const SpinnerScreen = () => { - setSelectedSpinnerTrackVisibility(value) + onChange={(value: string) => + setSelectedSpinnerTrackVisibility(value as SpinnerTrackVisibility) } orientation="horizontal" > diff --git a/example/src/modules/forms/CheckboxGroupScreen.tsx b/example/src/modules/forms/CheckboxGroupScreen.tsx index c2b565d2..afee5f7b 100644 --- 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("md"); const [isDisabled, setIsDisabled] = useState(false); const [isInvalid, setIsInvalid] = useState(false); + const safeAreaInsets = useSafeAreaInsets(); return ( @@ -50,12 +52,12 @@ export const CheckboxGroupScreen = () => { setSelectedSize(value)} + onChange={(value: string) => setSelectedSize(value as CheckboxSizes)} orientation="horizontal" > @@ -66,7 +68,7 @@ export const CheckboxGroupScreen = () => { setSelectedTheme(value)} + onChange={(value: string) => setSelectedTheme(value as CheckboxTheme)} orientation="horizontal" > diff --git a/example/src/modules/forms/InputScreen.tsx b/example/src/modules/forms/InputScreen.tsx index f55a1f91..fb68bb72 100644 --- 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(false); const suffix = hasSuffix ? } /> : null; const prefix = hasPrefix ? } /> : null; + const safeAreaInsets = useSafeAreaInsets(); const inputRef = useRef(null); @@ -53,12 +55,12 @@ export const InputScreen = () => { setSelectedSize(value)} + onChange={(value: string) => setSelectedSize(value as InputSizes)} orientation="horizontal" > @@ -70,7 +72,9 @@ export const InputScreen = () => { setSelectedVariant(value)} + onChange={(value: string) => + setSelectedVariant(value as InputVariants) + } orientation="horizontal" > diff --git a/example/src/modules/forms/RadioScreen.tsx b/example/src/modules/forms/RadioScreen.tsx index 921e6314..e0ca3d05 100644 --- 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(false); const [isInvalid, setIsInvalid] = useState(false); const [hasLabel, setHasLabel] = useState(true); + const safeAreaInsets = useSafeAreaInsets(); return ( @@ -71,12 +73,12 @@ export const RadioScreen = () => { setSelectedSize(value)} + onChange={(value: string) => setSelectedSize(value as RadioSizes)} orientation="horizontal" > @@ -87,7 +89,7 @@ export const RadioScreen = () => { setSelectedTheme(value)} + onChange={(value: string) => setSelectedTheme(value as RadioTheme)} orientation="horizontal" > diff --git a/example/src/modules/forms/SelectScreen.tsx b/example/src/modules/forms/SelectScreen.tsx index 28b7f5ba..4420dd1f 100644 --- 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(false); const [isSelectDisabled, setIsSelectDisabled] = useState(false); const [hasPrefix, setHasPrefix] = useState(false); + const safeAreaInsets = useSafeAreaInsets(); const [changeSuffix, setChangeSuffix] = useState(false); @@ -108,12 +110,12 @@ export const SelectScreen = () => { setSelectedSize(value)} + onChange={(value: string) => setSelectedSize(value as SelectSizes)} orientation="horizontal" > @@ -125,7 +127,9 @@ export const SelectScreen = () => { setSelectedVariant(value)} + onChange={(value: string) => + setSelectedVariant(value as SelectVariants) + } orientation="horizontal" > diff --git a/example/src/modules/forms/SliderComponentScreen.tsx b/example/src/modules/forms/SliderComponentScreen.tsx index 5fb199cf..8559e24b 100644 --- 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(false); const [hasStep, setHasStep] = useState(false); const [hasRange, setHasRange] = useState(false); + const safeAreaInsets = useSafeAreaInsets(); return ( @@ -46,12 +48,12 @@ export const SliderComponentScreen = () => { setSelectedSize(value)} + onChange={(value: string) => setSelectedSize(value as SliderSizes)} orientation="horizontal" > @@ -62,7 +64,7 @@ export const SliderComponentScreen = () => { setSelectedTheme(value)} + onChange={(value: string) => setSelectedTheme(value as SliderTheme)} orientation="horizontal" > diff --git a/example/src/modules/forms/SwitchComponentScreen.tsx b/example/src/modules/forms/SwitchComponentScreen.tsx index cd9c7570..5b4406eb 100644 --- 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(false); @@ -43,12 +45,12 @@ export const SwitchComponentScreen = () => { setSelectedSize(value)} + onChange={(value: string) => setSelectedSize(value as SwitchSize)} orientation="horizontal" > @@ -60,7 +62,7 @@ export const SwitchComponentScreen = () => { setSelectedTheme(value)} + onChange={(value: string) => setSelectedTheme(value as SwitchTheme)} orientation="horizontal" > diff --git a/example/src/modules/forms/TextAreaScreen.tsx b/example/src/modules/forms/TextAreaScreen.tsx index 4d717391..ec83c92e 100644 --- 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("sm"); const suffix = hasSuffix ? } /> : null; const textAreaRef = useRef(null); + const safeAreaInsets = useSafeAreaInsets(); const handleFocusInOnPress = useCallback(() => { textAreaRef.current?.focus(); @@ -50,12 +52,12 @@ export const TextAreaScreen = () => { setSize(value)} + onChange={(value: string) => setSize(value as TextAreaSizes)} orientation="horizontal" > @@ -67,7 +69,7 @@ export const TextAreaScreen = () => { setHasVariant(value)} + onChange={(value: string) => setHasVariant(value as TextAreaVariants)} orientation="horizontal" > diff --git a/example/src/modules/popups/TooltipScreen.tsx b/example/src/modules/popups/TooltipScreen.tsx index 6ac0aa54..4bbd3a7b 100644 --- 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(false); const [hasOffset, setHasOffset] = useState(false); + const safeAreaInsets = useSafeAreaInsets(); const [tooltipPlacement, setTooltipPlacement] = useState("right"); @@ -47,12 +49,14 @@ export const TooltipScreen = () => { setTooltipPlacement(value)} + onChange={(value: string) => + setTooltipPlacement(value as TooltipPlacement) + } orientation="horizontal" > diff --git a/example/src/modules/primitives/AvatarGroupScreen.tsx b/example/src/modules/primitives/AvatarGroupScreen.tsx index acac4db6..355e333f 100644 --- 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, @@ -17,17 +18,20 @@ import { Group } from "../../components"; export const AvatarGroupScreen = () => { const tailwind = useTheme(); - const [name, setName] = useState(null); + const [name, setName] = useState(undefined); const [isSquared, setIsSquared] = useState(false); const [selectedSize, setSelectedSize] = useState("xl"); const [hasImage, setHasImage] = useState(true); - const [selectedVariant, setSelectedVariant] = useState(null); + const [selectedVariant, setSelectedVariant] = useState( + undefined, + ); const [hasParentsBackground, setHasParentsBackground] = useState(false); const [hasRing, setHasRing] = useState(false); const [isMax, setIsMax] = useState(false); const [maxNum, setMaxNum] = useState(10); const [parentsBackground, setParentsBackground] = useState("bg-white-900"); + const safeAreaInsets = useSafeAreaInsets(); useEffect(() => { switch (selectedVariant) { @@ -37,10 +41,10 @@ export const AvatarGroupScreen = () => { break; case "withImage": setHasImage(true); - setName(null); + setName(undefined); break; default: - setName(null); + setName(undefined); setHasImage(false); } @@ -105,11 +109,11 @@ export const AvatarGroupScreen = () => { {avatars.map((image, i) => { return ( { setSelectedSize(value)} + onChange={(value: string) => setSelectedSize(value as AvatarSizes)} orientation="horizontal" > @@ -144,13 +148,13 @@ export const AvatarGroupScreen = () => { { + onChange={(value: undefined | string) => { setSelectedVariant(value); }} orientation="horizontal" > - + @@ -178,7 +182,7 @@ export const AvatarGroupScreen = () => { state={hasRing} onStateChange={setHasRing} size="md" - style={tailwind.style("mt-1")} + style={tailwind.style("ml-1")} /> { state={isMax} onStateChange={setIsMax} size="md" - style={tailwind.style("mt-1 ml-1")} + style={tailwind.style("mt-1")} /> diff --git a/example/src/modules/primitives/AvatarScreen.tsx b/example/src/modules/primitives/AvatarScreen.tsx index 5335f719..3d0e043a 100644 --- 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, @@ -16,33 +18,40 @@ import { Group } from "../../components"; export const AvatarScreen = () => { const tailwind = useTheme(); - const [selectedStatus, setSelectedStatus] = useState(null); - const [name, setName] = useState(null); + const [selectedStatus, setSelectedStatus] = useState< + AvatarStatusType | undefined + >(undefined); + const [name, setName] = useState(undefined); const [isSquared, setIsSquared] = useState(false); const [selectedSize, setSelectedSize] = useState("xl"); - const [imageUri, setImageUri] = useState(null); - const [selectedVariant, setSelectedVariant] = useState(null); + const [imageUri, setImageUri] = useState( + undefined, + ); + const [selectedVariant, setSelectedVariant] = useState( + undefined, + ); const [hasParentBackground, setHasParentBackground] = useState(false); const [parentsBackground, setParentsBackground] = useState("bg-white-900"); + const safeAreaInsets = useSafeAreaInsets(); useEffect(() => { switch (selectedVariant) { case "withInitials": setName("Sandeep Prabhakaran"); - setImageUri(null); + setImageUri(undefined); break; case "withImage": setImageUri({ uri: "https://i.pravatar.cc/300??img=5", cache: "reload", }); - setName(null); + setName(undefined); break; default: - setName(null); - setImageUri(null); + setName(undefined); + setImageUri(undefined); } switch (hasParentBackground) { @@ -72,17 +81,17 @@ export const AvatarScreen = () => { style={tailwind.style("my-1")} src={imageUri} parentsBackground={parentsBackground} - key={imageUri} + key={imageUri as string} /> setSelectedSize(value)} + onChange={(value: string) => setSelectedSize(value as AvatarSizes)} orientation="horizontal" > @@ -98,13 +107,13 @@ export const AvatarScreen = () => { { + onChange={(value: undefined | string) => { setSelectedVariant(value); }} orientation="horizontal" > - + @@ -112,11 +121,13 @@ export const AvatarScreen = () => { setSelectedStatus(value)} + onChange={(value: string) => + setSelectedStatus(value as AvatarStatusType) + } orientation="horizontal" > - + diff --git a/example/src/modules/primitives/BadgeScreen.tsx b/example/src/modules/primitives/BadgeScreen.tsx index 7ea34ccc..2df851d7 100644 --- a/example/src/modules/primitives/BadgeScreen.tsx +++ b/example/src/modules/primitives/BadgeScreen.tsx @@ -1,4 +1,5 @@ import React, { useState } from "react"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; import { Badge, BadgeSizes, @@ -22,6 +23,7 @@ export const BadgeScreen = () => { const [prefix, setPrefix] = useState(false); const [variant, setVariant] = useState("outline"); const [theme, setTheme] = useState("base"); + const safeAreaInsets = useSafeAreaInsets(); return ( @@ -42,12 +44,12 @@ export const BadgeScreen = () => { setSize(value)} + onChange={(value: string) => setSize(value as BadgeSizes)} orientation="horizontal" > @@ -59,7 +61,7 @@ export const BadgeScreen = () => { setVariant(value)} + onChange={(value: string) => setVariant(value as BadgeVariants)} orientation="horizontal" > @@ -71,7 +73,7 @@ export const BadgeScreen = () => { setTheme(value)} + onChange={(value: string) => setTheme(value as BadgeTheme)} orientation="horizontal" > diff --git a/example/src/modules/primitives/ButtonScreen.tsx b/example/src/modules/primitives/ButtonScreen.tsx index d5de1c1d..f7f37665 100644 --- a/example/src/modules/primitives/ButtonScreen.tsx +++ b/example/src/modules/primitives/ButtonScreen.tsx @@ -1,4 +1,5 @@ import React, { SetStateAction, useState } from "react"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; import { Box, Button, @@ -24,6 +25,7 @@ export const ButtonScreen = () => { const [hasPrefix, setHasPrefix] = useState(false); const [hasSuffix, setHasSuffix] = useState(false); const [isLoading, setIsLoading] = useState(false); + const safeAreaInsets = useSafeAreaInsets(); return ( @@ -46,12 +48,12 @@ export const ButtonScreen = () => { setSelectedSize(value)} + onChange={(value: string) => setSelectedSize(value as ButtonSizes)} orientation="horizontal" > @@ -63,7 +65,9 @@ export const ButtonScreen = () => { setSelectedVariant(value)} + onChange={(value: string) => + setSelectedVariant(value as ButtonVariants) + } orientation="horizontal" > @@ -75,7 +79,7 @@ export const ButtonScreen = () => { setSelectedTheme(value)} + onChange={(value: string) => setSelectedTheme(value as ButtonTheme)} orientation="horizontal" > diff --git a/example/src/modules/primitives/CheckboxScreen.tsx b/example/src/modules/primitives/CheckboxScreen.tsx index 0e5a863a..9f5ab324 100644 --- a/example/src/modules/primitives/CheckboxScreen.tsx +++ b/example/src/modules/primitives/CheckboxScreen.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,8 @@ export const CheckboxScreen = () => { const [isInvalid, setIsInvalid] = useState(false); const [isIndeterminate, setIsIndeterminate] = useState(false); const [hasLabel, setHasLabel] = useState(false); + const safeAreaInsets = useSafeAreaInsets(); + return ( { setSelectedSize(value)} + onChange={(value: string) => setSelectedSize(value as CheckboxSizes)} orientation="horizontal" > @@ -61,7 +64,7 @@ export const CheckboxScreen = () => { setSelectedTheme(value)} + onChange={(value: string) => setSelectedTheme(value as CheckboxTheme)} orientation="horizontal" > diff --git a/example/src/modules/primitives/DividerScreen.tsx b/example/src/modules/primitives/DividerScreen.tsx index 43764c7d..ddef6133 100644 --- a/example/src/modules/primitives/DividerScreen.tsx +++ b/example/src/modules/primitives/DividerScreen.tsx @@ -1,4 +1,5 @@ import React, { SetStateAction, useState } from "react"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; import { Box, Divider, @@ -22,6 +23,7 @@ export const DividerScreen = () => { const [hasLabel, setHasLabel] = useState(false); const [selectedLabelPosition, setSelectedLabelPosition] = useState("center"); + const safeAreaInsets = useSafeAreaInsets(); return ( @@ -30,7 +32,7 @@ export const DividerScreen = () => { orientation={selectedOrientation} labelPosition={selectedLabelPosition} slot={ - !hasLabel ? null : ( + !hasLabel ? undefined : ( { - setSelectedLabelPosition(value) + onChange={(value: string) => + setSelectedLabelPosition(value as DividerLabelPosition) } orientation="horizontal" > @@ -67,8 +69,8 @@ export const DividerScreen = () => { - setSelectedOrientation(value) + onChange={(value: string) => + setSelectedOrientation(value as DividerOrientation) } orientation="horizontal" > diff --git a/example/src/modules/primitives/TagScreen.tsx b/example/src/modules/primitives/TagScreen.tsx index 963daf25..a170fde1 100644 --- a/example/src/modules/primitives/TagScreen.tsx +++ b/example/src/modules/primitives/TagScreen.tsx @@ -1,4 +1,5 @@ import React, { SetStateAction, useState } from "react"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; import { Box, Icon, @@ -23,6 +24,7 @@ export const TagScreen = () => { const [hasPrefix, setHasPrefix] = useState(false); const [hasSuffix, setHasSuffix] = useState(false); const [isClosable, setIsClosable] = useState(false); + const safeAreaInsets = useSafeAreaInsets(); return ( @@ -46,12 +48,12 @@ export const TagScreen = () => { setSelectedSize(value)} + onChange={(value: string) => setSelectedSize(value as TagSize)} orientation="horizontal" > @@ -63,7 +65,7 @@ export const TagScreen = () => { setSelectedVariant(value)} + onChange={(value: string) => setSelectedVariant(value as TagVariant)} orientation="horizontal" > @@ -74,7 +76,7 @@ export const TagScreen = () => { setSelectedTheme(value)} + onChange={(value: string) => setSelectedTheme(value as TagTheme)} orientation="horizontal" > diff --git a/src/components/avatar/Avatar.tsx b/src/components/avatar/Avatar.tsx index 5a0016fa..b99898bb 100644 --- a/src/components/avatar/Avatar.tsx +++ b/src/components/avatar/Avatar.tsx @@ -29,7 +29,7 @@ function getInitials(name: string, size: AvatarSizes) { } export type AvatarSizes = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"; -export type AvatarStatusType = "active" | "away" | "sleep" | "typing" | null; +export type AvatarStatusType = "active" | "away" | "sleep" | "typing"; export interface AvatarProps extends BoxProps { /** diff --git a/src/components/divider/Divider.tsx b/src/components/divider/Divider.tsx index 32b61593..969d7831 100644 --- a/src/components/divider/Divider.tsx +++ b/src/components/divider/Divider.tsx @@ -21,7 +21,7 @@ interface DividerProps { /** * Pass custom component instead of deafult component. */ - slot: ReactElement; + slot: ReactElement | undefined; /** * The position of the label/slot * @default start