Files
cruiseLovers/assets/components/auth/RecoverScreenLayout.tsx

53 lines
1.5 KiB
TypeScript

import styles from '@/styles/screens/auth/recover.styles';
import { ReactNode } from 'react';
import {
Image,
ImageBackground,
KeyboardAvoidingView,
Platform,
ScrollView,
StatusBar,
Text,
View,
} from 'react-native';
type Props = {
title: string;
subtitle: string;
children: ReactNode;
};
export function RecoverScreenLayout({ title, subtitle, children }: Props) {
return (
<KeyboardAvoidingView
style={styles.container}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 20}>
<StatusBar barStyle="light-content" />
<ScrollView
contentContainerStyle={styles.scrollContent}
keyboardShouldPersistTaps="handled"
showsVerticalScrollIndicator={false}
bounces={false}>
<ImageBackground
source={require('@/assets/images/banner-login.png')}
style={styles.hero}
imageStyle={styles.heroImage}>
<View style={styles.overlay} />
<View style={styles.heroContent}>
<Image
source={require('@/assets/icons/logotipo-branco.png')}
style={styles.logo}
resizeMode="contain"
/>
<Text style={styles.title}>{title}</Text>
<Text style={styles.subtitle}>{subtitle}</Text>
</View>
</ImageBackground>
<View style={styles.formCard}>{children}</View>
</ScrollView>
</KeyboardAvoidingView>
);
}