Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 1x 4x 4x 4x 4x | import { ReactNode } from "react";
import {
KeyboardAwareScrollView,
KeyboardToolbar,
} from "react-native-keyboard-controller";
import { StyleProp, View, ViewStyle } from "react-native";
import { makeStyles } from "@repo/ui/themes/makeStyles";
import { useTheme } from "@repo/ui/themes/ThemeContext";
import { HeaderRequest, HeaderRequestProps } from "../HeaderRequest";
import { ScreenLayout } from "../ScreenLayout";
interface WrapperRequestProps extends HeaderRequestProps {
children: ReactNode;
contentContainerStyle?: StyleProp<ViewStyle>;
hideHeader?: boolean;
footerComponent?: ReactNode;
}
export const WrapperRequest = ({
children,
contentContainerStyle,
title,
onBack,
disabled,
rightComponent,
hideHeader,
footerComponent,
}: WrapperRequestProps) => {
const { theme } = useTheme();
const styles = useStyles();
return (
<>
<ScreenLayout>
{!hideHeader && (
<HeaderRequest
title={title}
onBack={onBack}
disabled={disabled}
rightComponent={rightComponent}
/>
)}
<KeyboardAwareScrollView
bottomOffset={theme.metrics.spacing[20]}
keyboardShouldPersistTaps="always"
nestedScrollEnabled={true}
contentContainerStyle={[
styles.content,
contentContainerStyle,
{ flexGrow: 1 },
]}
style={styles.scrollView}
>
{children}
</KeyboardAwareScrollView>
{footerComponent && (
<View style={styles.footer}>{footerComponent}</View>
)}
</ScreenLayout>
<KeyboardToolbar />
</>
);
};
const useStyles = makeStyles((theme) => ({
scrollView: {
flex: 1,
},
content: {
padding: theme.metrics.spacing[4],
gap: theme.metrics.spacing[4],
},
footer: {
padding: theme.metrics.spacing[4],
paddingBottom: theme.metrics.spacing[0],
},
}));
|