Skip to content

Commit d7944d1

Browse files
kodiakhq[bot]kodiakhq[bot]
authored
Fix example app (#105)
Fix example app
2 parents ba5a834 + f33de1e commit d7944d1

23 files changed

+171
-102
lines changed

‎example/src/App.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
2-
import { LogBox, SafeAreaView, StatusBar } from "react-native";
2+
import { LogBox, StatusBar } from "react-native";
33
import { GestureHandlerRootView } from "react-native-gesture-handler";
4+
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
45
import { AdaptUIProvider } from "@adaptui/react-native-tailwind";
56
import { NavigationContainer } from "@react-navigation/native";
67
import tailwind from "twrnc";
@@ -17,15 +18,18 @@ const App = () => {
1718
style={tailwind.style(
1819
`flex-1 android:mt-[${StatusBar.currentHeight || 0}px]`,
1920
)}
21+
edges={["bottom"]}
2022
>
21-
<StatusBar
22-
translucent
23-
backgroundColor={"transparent"}
24-
barStyle="dark-content"
25-
/>
26-
<AdaptUIProvider>
27-
<AppRoot />
28-
</AdaptUIProvider>
23+
<SafeAreaProvider>
24+
<StatusBar
25+
translucent
26+
backgroundColor={"transparent"}
27+
barStyle="dark-content"
28+
/>
29+
<AdaptUIProvider>
30+
<AppRoot />
31+
</AdaptUIProvider>
32+
</SafeAreaProvider>
2933
</SafeAreaView>
3034
</NavigationContainer>
3135
</GestureHandlerRootView>

‎example/src/components/Group.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { PropsWithChildren } from "react";
2-
import { ViewProps } from "react-native";
2+
import { View, ViewProps } from "react-native";
33
import {
44
Box,
55
styleAdapter,
@@ -15,7 +15,7 @@ export const Group = (props: PropsWithChildren<GroupType>) => {
1515
const { children, label, style, ...other } = props;
1616
const tailwind = useTheme();
1717
return (
18-
<Box
18+
<View
1919
style={[
2020
tailwind.style("bg-white-800 rounded-xl p-2 flex-col w-full"),
2121
styleAdapter(style),
@@ -30,6 +30,6 @@ export const Group = (props: PropsWithChildren<GroupType>) => {
3030
>
3131
{children}
3232
</Box>
33-
</Box>
33+
</View>
3434
);
3535
};

‎example/src/modules/feedback/CircularProgressScreen.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { SetStateAction, useState } from "react";
2+
import { useSafeAreaInsets } from "react-native-safe-area-context";
23
import {
34
Box,
45
Button,
@@ -46,6 +47,7 @@ export const CircularProgressScreen = () => {
4647
const [selectedSize, setSelectedSize] = useState<CircularProgressSizes>("md");
4748
const [hasHints, setHasHints] = useState<boolean>(false);
4849
const [hasCustomTrack, setHasCustomTrack] = useState<boolean>(false);
50+
const safeAreaInsets = useSafeAreaInsets();
4951

5052
return (
5153
<Box style={tailwind.style("flex-1 justify-center bg-white-900")}>
@@ -56,23 +58,25 @@ export const CircularProgressScreen = () => {
5658
>
5759
<CircularProgress
5860
style={!hasCustomTrack ? null : tailwind.style("w-48 h-48")}
59-
hint={!hasHints ? null : `${progressValue}%`}
61+
hint={!hasHints ? undefined : `${progressValue}%`}
6062
value={progressValue}
6163
themeColor={selectedTheme}
6264
size={selectedSize}
6365
progressTrackColor={
64-
!hasCustomTrack ? null : tailwind.getColor("text-green-600")
66+
!hasCustomTrack ? undefined : tailwind.getColor("text-green-600")
6567
}
6668
/>
6769
</Box>
6870
<Box
6971
style={tailwind.style(
70-
"rounded-t-lg shadow-lg bg-gray-100 justify-end p-2",
72+
`rounded-t-lg shadow-lg bg-gray-100 justify-end px-2 pt-2 pb-[${safeAreaInsets.bottom}]`,
7173
)}
7274
>
7375
<RadioGroup
7476
value={selectedSize}
75-
onChange={(value: CircularProgressSizes) => setSelectedSize(value)}
77+
onChange={(value: string) =>
78+
setSelectedSize(value as CircularProgressSizes)
79+
}
7680
orientation="horizontal"
7781
>
7882
<Group label="Sizes">
@@ -84,7 +88,9 @@ export const CircularProgressScreen = () => {
8488
</RadioGroup>
8589
<RadioGroup
8690
value={selectedTheme}
87-
onChange={(value: CircularProgressTheme) => setSelectedTheme(value)}
91+
onChange={(value: string) =>
92+
setSelectedTheme(value as CircularProgressTheme)
93+
}
8894
orientation="horizontal"
8995
>
9096
<Group label="Theme" style={tailwind.style("mt-2")}>

‎example/src/modules/feedback/MeterComponentScreen.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { SetStateAction, useState } from "react";
2+
import { useSafeAreaInsets } from "react-native-safe-area-context";
23
import {
34
Box,
45
Meter,
@@ -21,6 +22,7 @@ export const MeterComponentScreen = () => {
2122
const [hasIntervals, setHasIntervals] = useState<boolean>(false);
2223
const [hasHints, setHasHints] = useState<boolean>(false);
2324
const [hasLabel, setHasLabel] = useState<boolean>(false);
25+
const safeAreaInsets = useSafeAreaInsets();
2426

2527
return (
2628
<Box style={tailwind.style("flex-1 justify-center bg-white-900")}>
@@ -41,12 +43,12 @@ export const MeterComponentScreen = () => {
4143
</Box>
4244
<Box
4345
style={tailwind.style(
44-
"rounded-t-lg shadow-lg bg-gray-100 justify-end p-2",
46+
`rounded-t-lg shadow-lg bg-gray-100 justify-end px-2 pt-2 pb-[${safeAreaInsets.bottom}]`,
4547
)}
4648
>
4749
<RadioGroup
4850
value={selectedSize}
49-
onChange={(value: MeterSizes) => setSelectedSize(value)}
51+
onChange={(value: string) => setSelectedSize(value as MeterSizes)}
5052
orientation="horizontal"
5153
>
5254
<Group label="Sizes">
@@ -57,7 +59,7 @@ export const MeterComponentScreen = () => {
5759
</RadioGroup>
5860
<RadioGroup
5961
value={selectedTheme}
60-
onChange={(value: MeterTheme) => setSelectedTheme(value)}
62+
onChange={(value: string) => setSelectedTheme(value as MeterTheme)}
6163
orientation="horizontal"
6264
>
6365
<Group label="Theme" style={tailwind.style("mt-2")}>

‎example/src/modules/feedback/ProgressScreen.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { SetStateAction, useState } from "react";
2+
import { useSafeAreaInsets } from "react-native-safe-area-context";
23
import {
34
Box,
45
Button,
@@ -47,6 +48,7 @@ export const ProgressScreen = () => {
4748

4849
const [hasHints, setHasHints] = useState<boolean>(false);
4950
const [hasLabel, setHasLabel] = useState<boolean>(false);
51+
const safeAreaInsets = useSafeAreaInsets();
5052

5153
return (
5254
<Box style={tailwind.style("flex-1 justify-center bg-white-900")}>
@@ -72,12 +74,14 @@ export const ProgressScreen = () => {
7274
</Box>
7375
<Box
7476
style={tailwind.style(
75-
"rounded-t-lg shadow-lg bg-gray-100 justify-end p-2",
77+
`rounded-t-lg shadow-lg bg-gray-100 justify-end px-2 pt-2 pb-[${safeAreaInsets.bottom}]`,
7678
)}
7779
>
7880
<RadioGroup
7981
value={selectedSize}
80-
onChange={(value: ProgressBarSizes) => setSelectedSize(value)}
82+
onChange={(value: string) =>
83+
setSelectedSize(value as ProgressBarSizes)
84+
}
8185
orientation="horizontal"
8286
>
8387
<Group label="Sizes">
@@ -88,7 +92,9 @@ export const ProgressScreen = () => {
8892
</RadioGroup>
8993
<RadioGroup
9094
value={selectedTheme}
91-
onChange={(value: ProgressBarTheme) => setSelectedTheme(value)}
95+
onChange={(value: string) =>
96+
setSelectedTheme(value as ProgressBarTheme)
97+
}
9298
orientation="horizontal"
9399
>
94100
<Group label="Theme" style={tailwind.style("mt-2")}>

‎example/src/modules/feedback/SpinnerScreen.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useState } from "react";
2+
import { useSafeAreaInsets } from "react-native-safe-area-context";
23
import {
34
Box,
45
Radio,
@@ -19,6 +20,7 @@ export const SpinnerScreen = () => {
1920
const [selectedSize, setSelectedSize] = useState<SpinnerSizes>("md");
2021
const [selectedSpinnerTrackVisibility, setSelectedSpinnerTrackVisibility] =
2122
useState<SpinnerTrackVisibility>("transparent");
23+
const safeAreaInsets = useSafeAreaInsets();
2224

2325
return (
2426
<Box style={tailwind.style("flex-1 justify-center bg-white-900")}>
@@ -34,15 +36,14 @@ export const SpinnerScreen = () => {
3436
track={selectedSpinnerTrackVisibility}
3537
/>
3638
</Box>
37-
3839
<Box
3940
style={tailwind.style(
40-
"rounded-t-lg shadow-lg bg-gray-100 justify-end p-2",
41+
`rounded-t-lg shadow-lg bg-gray-100 justify-end px-2 pt-2 pb-[${safeAreaInsets.bottom}]`,
4142
)}
4243
>
4344
<RadioGroup
4445
value={selectedSize}
45-
onChange={(value: SpinnerSizes) => setSelectedSize(value)}
46+
onChange={(value: string) => setSelectedSize(value as SpinnerSizes)}
4647
orientation="horizontal"
4748
>
4849
<Group label="Sizes">
@@ -55,7 +56,7 @@ export const SpinnerScreen = () => {
5556
</RadioGroup>
5657
<RadioGroup
5758
value={selectedTheme}
58-
onChange={(value: SpinnerTheme) => setSelectedTheme(value)}
59+
onChange={(value: string) => setSelectedTheme(value as SpinnerTheme)}
5960
orientation="horizontal"
6061
>
6162
<Group label="Theme" style={tailwind.style("mt-2")}>
@@ -68,8 +69,8 @@ export const SpinnerScreen = () => {
6869
</RadioGroup>
6970
<RadioGroup
7071
value={selectedSpinnerTrackVisibility}
71-
onChange={(value: SpinnerTrackVisibility) =>
72-
setSelectedSpinnerTrackVisibility(value)
72+
onChange={(value: string) =>
73+
setSelectedSpinnerTrackVisibility(value as SpinnerTrackVisibility)
7374
}
7475
orientation="horizontal"
7576
>

‎example/src/modules/forms/CheckboxGroupScreen.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { SetStateAction, useState } from "react";
2+
import { useSafeAreaInsets } from "react-native-safe-area-context";
23
import {
34
Box,
45
Checkbox,
@@ -22,6 +23,7 @@ export const CheckboxGroupScreen = () => {
2223
const [selectedSize, setSelectedSize] = useState<CheckboxSizes>("md");
2324
const [isDisabled, setIsDisabled] = useState<boolean>(false);
2425
const [isInvalid, setIsInvalid] = useState<boolean>(false);
26+
const safeAreaInsets = useSafeAreaInsets();
2527

2628
return (
2729
<Box style={tailwind.style("flex-1 justify-center bg-white-900")}>
@@ -50,12 +52,12 @@ export const CheckboxGroupScreen = () => {
5052
</Box>
5153
<Box
5254
style={tailwind.style(
53-
"rounded-t-lg shadow-lg bg-gray-100 justify-end p-2",
55+
`rounded-t-lg shadow-lg bg-gray-100 justify-end px-2 pt-2 pb-[${safeAreaInsets.bottom}]`,
5456
)}
5557
>
5658
<RadioGroup
5759
value={selectedSize}
58-
onChange={(value: CheckboxSizes) => setSelectedSize(value)}
60+
onChange={(value: string) => setSelectedSize(value as CheckboxSizes)}
5961
orientation="horizontal"
6062
>
6163
<Group label="Sizes">
@@ -66,7 +68,7 @@ export const CheckboxGroupScreen = () => {
6668
</RadioGroup>
6769
<RadioGroup
6870
value={selectedTheme}
69-
onChange={(value: CheckboxTheme) => setSelectedTheme(value)}
71+
onChange={(value: string) => setSelectedTheme(value as CheckboxTheme)}
7072
orientation="horizontal"
7173
>
7274
<Group label="Theme" style={tailwind.style("mt-2")}>

‎example/src/modules/forms/InputScreen.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { SetStateAction, useCallback, useRef, useState } from "react";
2+
import { useSafeAreaInsets } from "react-native-safe-area-context";
23
import {
34
Box,
45
Button,
@@ -26,6 +27,7 @@ export const InputScreen = () => {
2627
const [hasPrefix, setHasPrefix] = useState<boolean>(false);
2728
const suffix = hasSuffix ? <Icon icon={<Slot />} /> : null;
2829
const prefix = hasPrefix ? <Icon icon={<Slot />} /> : null;
30+
const safeAreaInsets = useSafeAreaInsets();
2931

3032
const inputRef = useRef<any>(null);
3133

@@ -53,12 +55,12 @@ export const InputScreen = () => {
5355
</Box>
5456
<Box
5557
style={tailwind.style(
56-
"rounded-t-lg shadow-lg bg-gray-100 justify-end p-2",
58+
`rounded-t-lg shadow-lg bg-gray-100 justify-end px-2 pt-2 pb-[${safeAreaInsets.bottom}]`,
5759
)}
5860
>
5961
<RadioGroup
6062
value={selectedSize}
61-
onChange={(value: InputSizes) => setSelectedSize(value)}
63+
onChange={(value: string) => setSelectedSize(value as InputSizes)}
6264
orientation="horizontal"
6365
>
6466
<Group label="Sizes">
@@ -70,7 +72,9 @@ export const InputScreen = () => {
7072
</RadioGroup>
7173
<RadioGroup
7274
value={selectedVariant}
73-
onChange={(value: InputVariants) => setSelectedVariant(value)}
75+
onChange={(value: string) =>
76+
setSelectedVariant(value as InputVariants)
77+
}
7478
orientation="horizontal"
7579
>
7680
<Group label="Variants" style={tailwind.style("mt-2")}>

‎example/src/modules/forms/RadioScreen.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { SetStateAction, useState } from "react";
2+
import { useSafeAreaInsets } from "react-native-safe-area-context";
23
import {
34
Box,
45
Radio,
@@ -19,6 +20,7 @@ export const RadioScreen = () => {
1920
const [isDisabled, setIsDisabled] = useState<boolean>(false);
2021
const [isInvalid, setIsInvalid] = useState<boolean>(false);
2122
const [hasLabel, setHasLabel] = useState<boolean>(true);
23+
const safeAreaInsets = useSafeAreaInsets();
2224

2325
return (
2426
<Box style={tailwind.style("flex-1 justify-center bg-white-900")}>
@@ -71,12 +73,12 @@ export const RadioScreen = () => {
7173
</Box>
7274
<Box
7375
style={tailwind.style(
74-
"rounded-t-lg shadow-lg bg-gray-100 justify-end p-2",
76+
`rounded-t-lg shadow-lg bg-gray-100 justify-end px-2 pt-2 pb-[${safeAreaInsets.bottom}]`,
7577
)}
7678
>
7779
<RadioGroup
7880
value={selectedSize}
79-
onChange={(value: RadioSizes) => setSelectedSize(value)}
81+
onChange={(value: string) => setSelectedSize(value as RadioSizes)}
8082
orientation="horizontal"
8183
>
8284
<Group label="Sizes">
@@ -87,7 +89,7 @@ export const RadioScreen = () => {
8789
</RadioGroup>
8890
<RadioGroup
8991
value={selectedTheme}
90-
onChange={(value: RadioTheme) => setSelectedTheme(value)}
92+
onChange={(value: string) => setSelectedTheme(value as RadioTheme)}
9193
orientation="horizontal"
9294
>
9395
<Group label="Theme" style={tailwind.style("mt-2")}>

0 commit comments

Comments
 (0)