Skip to content

Commit

Permalink
Fix example app (#105)
Browse files Browse the repository at this point in the history
Fix example app
  • Loading branch information
kodiakhq[bot] authored Dec 15, 2022
2 parents ba5a834 + f33de1e commit d7944d1
Show file tree
Hide file tree
Showing 23 changed files with 171 additions and 102 deletions.
22 changes: 13 additions & 9 deletions example/src/App.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions example/src/components/Group.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { PropsWithChildren } from "react";
import { ViewProps } from "react-native";
import { View, ViewProps } from "react-native";
import {
Box,
styleAdapter,
Expand All @@ -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),
Expand All @@ -30,6 +30,6 @@ export const Group = (props: PropsWithChildren<GroupType>) => {
>
{children}
</Box>
</Box>
</View>
);
};
16 changes: 11 additions & 5 deletions example/src/modules/feedback/CircularProgressScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { SetStateAction, useState } from "react";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import {
Box,
Button,
Expand Down Expand Up @@ -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")}>
Expand All @@ -56,23 +58,25 @@ export const CircularProgressScreen = () => {
>
<CircularProgress
style={!hasCustomTrack ? null : tailwind.style("w-48 h-48")}
hint={!hasHints ? null : `${progressValue}%`}
hint={!hasHints ? undefined : `${progressValue}%`}
value={progressValue}
themeColor={selectedTheme}
size={selectedSize}
progressTrackColor={
!hasCustomTrack ? null : tailwind.getColor("text-green-600")
!hasCustomTrack ? undefined : tailwind.getColor("text-green-600")
}
/>
</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
value={selectedSize}
onChange={(value: CircularProgressSizes) => setSelectedSize(value)}
onChange={(value: string) =>
setSelectedSize(value as CircularProgressSizes)
}
orientation="horizontal"
>
<Group label="Sizes">
Expand All @@ -84,7 +88,9 @@ export const CircularProgressScreen = () => {
</RadioGroup>
<RadioGroup
value={selectedTheme}
onChange={(value: CircularProgressTheme) => setSelectedTheme(value)}
onChange={(value: string) =>
setSelectedTheme(value as CircularProgressTheme)
}
orientation="horizontal"
>
<Group label="Theme" style={tailwind.style("mt-2")}>
Expand Down
8 changes: 5 additions & 3 deletions example/src/modules/feedback/MeterComponentScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { SetStateAction, useState } from "react";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import {
Box,
Meter,
Expand All @@ -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")}>
Expand All @@ -41,12 +43,12 @@ 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
value={selectedSize}
onChange={(value: MeterSizes) => setSelectedSize(value)}
onChange={(value: string) => setSelectedSize(value as MeterSizes)}
orientation="horizontal"
>
<Group label="Sizes">
Expand All @@ -57,7 +59,7 @@ export const MeterComponentScreen = () => {
</RadioGroup>
<RadioGroup
value={selectedTheme}
onChange={(value: MeterTheme) => setSelectedTheme(value)}
onChange={(value: string) => setSelectedTheme(value as MeterTheme)}
orientation="horizontal"
>
<Group label="Theme" style={tailwind.style("mt-2")}>
Expand Down
12 changes: 9 additions & 3 deletions example/src/modules/feedback/ProgressScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { SetStateAction, useState } from "react";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import {
Box,
Button,
Expand Down Expand Up @@ -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")}>
Expand All @@ -72,12 +74,14 @@ 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
value={selectedSize}
onChange={(value: ProgressBarSizes) => setSelectedSize(value)}
onChange={(value: string) =>
setSelectedSize(value as ProgressBarSizes)
}
orientation="horizontal"
>
<Group label="Sizes">
Expand All @@ -88,7 +92,9 @@ export const ProgressScreen = () => {
</RadioGroup>
<RadioGroup
value={selectedTheme}
onChange={(value: ProgressBarTheme) => setSelectedTheme(value)}
onChange={(value: string) =>
setSelectedTheme(value as ProgressBarTheme)
}
orientation="horizontal"
>
<Group label="Theme" style={tailwind.style("mt-2")}>
Expand Down
13 changes: 7 additions & 6 deletions example/src/modules/feedback/SpinnerScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { useState } from "react";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import {
Box,
Radio,
Expand All @@ -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")}>
Expand All @@ -34,15 +36,14 @@ 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
value={selectedSize}
onChange={(value: SpinnerSizes) => setSelectedSize(value)}
onChange={(value: string) => setSelectedSize(value as SpinnerSizes)}
orientation="horizontal"
>
<Group label="Sizes">
Expand All @@ -55,7 +56,7 @@ export const SpinnerScreen = () => {
</RadioGroup>
<RadioGroup
value={selectedTheme}
onChange={(value: SpinnerTheme) => setSelectedTheme(value)}
onChange={(value: string) => setSelectedTheme(value as SpinnerTheme)}
orientation="horizontal"
>
<Group label="Theme" style={tailwind.style("mt-2")}>
Expand All @@ -68,8 +69,8 @@ export const SpinnerScreen = () => {
</RadioGroup>
<RadioGroup
value={selectedSpinnerTrackVisibility}
onChange={(value: SpinnerTrackVisibility) =>
setSelectedSpinnerTrackVisibility(value)
onChange={(value: string) =>
setSelectedSpinnerTrackVisibility(value as SpinnerTrackVisibility)
}
orientation="horizontal"
>
Expand Down
8 changes: 5 additions & 3 deletions example/src/modules/forms/CheckboxGroupScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { SetStateAction, useState } from "react";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import {
Box,
Checkbox,
Expand All @@ -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")}>
Expand Down Expand Up @@ -50,12 +52,12 @@ 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
value={selectedSize}
onChange={(value: CheckboxSizes) => setSelectedSize(value)}
onChange={(value: string) => setSelectedSize(value as CheckboxSizes)}
orientation="horizontal"
>
<Group label="Sizes">
Expand All @@ -66,7 +68,7 @@ export const CheckboxGroupScreen = () => {
</RadioGroup>
<RadioGroup
value={selectedTheme}
onChange={(value: CheckboxTheme) => setSelectedTheme(value)}
onChange={(value: string) => setSelectedTheme(value as CheckboxTheme)}
orientation="horizontal"
>
<Group label="Theme" style={tailwind.style("mt-2")}>
Expand Down
10 changes: 7 additions & 3 deletions example/src/modules/forms/InputScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { SetStateAction, useCallback, useRef, useState } from "react";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import {
Box,
Button,
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -53,12 +55,12 @@ 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
value={selectedSize}
onChange={(value: InputSizes) => setSelectedSize(value)}
onChange={(value: string) => setSelectedSize(value as InputSizes)}
orientation="horizontal"
>
<Group label="Sizes">
Expand All @@ -70,7 +72,9 @@ export const InputScreen = () => {
</RadioGroup>
<RadioGroup
value={selectedVariant}
onChange={(value: InputVariants) => setSelectedVariant(value)}
onChange={(value: string) =>
setSelectedVariant(value as InputVariants)
}
orientation="horizontal"
>
<Group label="Variants" style={tailwind.style("mt-2")}>
Expand Down
8 changes: 5 additions & 3 deletions example/src/modules/forms/RadioScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { SetStateAction, useState } from "react";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import {
Box,
Radio,
Expand All @@ -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")}>
Expand Down Expand Up @@ -71,12 +73,12 @@ 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
value={selectedSize}
onChange={(value: RadioSizes) => setSelectedSize(value)}
onChange={(value: string) => setSelectedSize(value as RadioSizes)}
orientation="horizontal"
>
<Group label="Sizes">
Expand All @@ -87,7 +89,7 @@ export const RadioScreen = () => {
</RadioGroup>
<RadioGroup
value={selectedTheme}
onChange={(value: RadioTheme) => setSelectedTheme(value)}
onChange={(value: string) => setSelectedTheme(value as RadioTheme)}
orientation="horizontal"
>
<Group label="Theme" style={tailwind.style("mt-2")}>
Expand Down
Loading

0 comments on commit d7944d1

Please sign in to comment.