import { ObservableForgotPasswordScreen , ObservableThemeStore , } from '@ulangi/ulangi-observable' ; import { observer } from 'mobx-react' ; import * as React from 'react' ; import { View } from 'react-native' ; import { ForgotPasswordScreenIds } from '../../constants/ids/ForgotPasswordScreenIds' ; import { ForgotPasswordScreenDelegate } from '../../delegates/auth/ForgotPasswordScreenDelegate' ; import { Screen } from '../common/Screen' ; import { ForgotPasswordForm } from './ForgotPasswordForm' ; import { ForgotPasswordScreenStyles , forgotPasswordScreenResponsiveStyles , } from './ForgotPasswordScreen.style' ; import { Logo } from './Logo' ; export interface ForgotPasswordScreenProps { themeStore : ObservableThemeStore ; observableScreen : ObservableForgotPasswordScreen ; screenDelegate : ForgotPasswordScreenDelegate ; } @ observer export class ForgotPasswordScreen extends React . Component < ForgotPasswordScreenProps > { private get styles ( ) : ForgotPasswordScreenStyles { return forgotPasswordScreenResponsiveStyles . compile ( this . props . observableScreen . screenLayout , this . props . themeStore . theme ) ; } public render ( ) { return ( < Screen style = { this . styles . screen } testID = { ForgotPasswordScreenIds . SCREEN } useSafeAreaView = { true } useDismissKeyboardView = { true } observableScreen = { this . props . observableScreen } > < View style = { this . styles . container } > < View style = { this . styles . logo_container } > < Logo /> < /View> < View style = { this . styles . form_container } > < ForgotPasswordForm theme = { this . props . themeStore . theme } screenLayout = { this . props . observableScreen . screenLayout } email = { this . props . observableScreen . email } submit = { this . props . screenDelegate . requestResetPasswordEmail } back = { this . props . screenDelegate . back } / > < /View> < /View> < /Screen>); } }