import React, { useEffect } from 'react'; import { TextInput } from 'react-native'; import { Background, Box, Indicator } from 'components'; import { Header } from 'components/Header'; import { NumberPad } from 'components/NumberPad'; import PinLayoutStyle from './PinLayout.style'; import Loading from 'components/Loading'; type IPinLayout = { pinEntry: string; loading: boolean; isLogin: boolean; isConfirm: boolean; onCheckIfPinExists: () => void; onPinEntryFinished: () => void; onPinChange: (v: string) => void; onPinDelete: () => void; }; const PinLayout: React.FC<IPinLayout> = ({ isLogin, isConfirm, pinEntry, loading, onCheckIfPinExists, onPinEntryFinished, onPinChange, onPinDelete, }) => { useEffect(() => { onCheckIfPinExists(); }, [onCheckIfPinExists]); useEffect(() => { onPinEntryFinished(); }, [onPinEntryFinished]); const title = isLogin || isConfirm ? 'Verification required' : 'Create a PIN'; const subtitle = isLogin || isConfirm ? 'Please enter your PIN to proceed' : 'Enhance the security of your account by creating a PIN code'; return ( <Background> {loading && <Loading isFullScreen />} <Header {...{ title, subtitle }} /> <Box position="absolute"> <TextInput value={pinEntry} onChangeText={onPinChange} maxLength={4} style={{ opacity: 0 }} keyboardType="numeric" /> </Box> <Box alignItems="center" style={PinLayoutStyle.indicator}> <Indicator type="pin" pinLength={pinEntry.length} /> </Box> <Box flex={1} justifyContent="center"> <NumberPad onNumberPress={onPinChange} onDeletePress={onPinDelete} onForgotPress={() => true} {...{ isLogin }} /> </Box> </Background> ); }; export default PinLayout;