Amirul93

Registration.tsx

Apr 12th, 2021
525
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import {HeaderBackButton} from '@react-navigation/stack';
  2. import React, {useCallback,  useState} from 'react';
  3. import {Text, View} from 'react-native';
  4. import Modal from 'react-native-modal';
  5. import {useFormikContext} from 'formik';
  6. import Button from '../../components/Button';
  7. import Theme from '../../utils/theme';
  8. import {PhoneInput} from '../../components/PhoneInput';
  9. import {Register} from '../../models/registerSchema';
  10. import PickerModal from '../../components/PhoneInput/PickerModal';
  11. import countries from '../../data/countries';
  12.  
  13. function delay(t, v) {
  14.   return new Promise(function (resolve) {
  15.     setTimeout(resolve.bind(null, v), t);
  16.   });
  17. }
  18.  
  19. Promise.prototype.delay = function (t) {
  20.   return this.then(function (v) {
  21.     return delay(t, v);
  22.   });
  23. };
  24.  
  25. const Registration: React.FunctionComponent = ({...props}) => {
  26.   const [countryId, setCountryId] = useState('0');
  27.   const [pickerModalVisible, setPickerModalVisible] = useState(false);
  28.   const [loading, setLoading] = useState(false);
  29.   const [phoneError, setPhoneError] = useState('');
  30.  
  31.   const formik = useFormikContext<Register>();
  32.  
  33.   const currentCountry = countries[parseInt(countryId, 10)];
  34.  
  35.   const togglePickerModal = useCallback((id?: string) => {
  36.     id && setCountryId(id);
  37.     setPickerModalVisible(visible => !visible);
  38.   }, []);
  39.  
  40.   const changeText = useCallback(value => formik.handleChange('phone')(value), [
  41.     formik,
  42.   ]);
  43.  
  44.   const validatePhone = () => {
  45.     setLoading(true);
  46.  
  47.     delay(500).then(() => {
  48.       setLoading(false);
  49.       console.log(formik.values.phone);
  50.  
  51.       if (formik.values.phone === undefined) {
  52.         setPhoneError('No phone number provided. Please enter a phone number.');
  53.       } else {
  54.         if (formik.errors.phone) {
  55.           setPhoneError(formik.errors.phone);
  56.         } else {
  57.           setPhoneError('');
  58.         }
  59.       }
  60.     });
  61.   };
  62.  
  63.   return (
  64.     <>
  65.       <Modal
  66.         onBackButtonPress={() => togglePickerModal()}
  67.         propagateSwipe
  68.         deviceWidth={Theme.width}
  69.         deviceHeight={Theme.height}
  70.         isVisible={pickerModalVisible}>
  71.         <PickerModal onTogglePickerModal={togglePickerModal} />
  72.       </Modal>
  73.  
  74.       <View
  75.         style={{
  76.           display: 'flex',
  77.           height: 60,
  78.           justifyContent: 'center',
  79.         }}>
  80.         <View style={{height: 30}}>
  81.           <HeaderBackButton
  82.             onPress={() => props.onPageChange(0)}
  83.             style={{
  84.               flex: 1,
  85.               alignItems: 'center',
  86.               justifyContent: 'center',
  87.               width: 30,
  88.               height: 30,
  89.             }}
  90.             tintColor={Theme.colors.black}
  91.           />
  92.         </View>
  93.       </View>
  94.       <View
  95.         style={{
  96.           flex: 1,
  97.           paddingHorizontal: Theme.spacing.padding * 1.2,
  98.           paddingBottom: Theme.spacing.padding,
  99.           justifyContent: 'space-between',
  100.         }}>
  101.         <View>
  102.           <Text style={{...Theme.fonts.h2, color: Theme.colors.black}}>
  103.             Registration
  104.           </Text>
  105.           <Text
  106.             style={{
  107.               ...Theme.fonts.body,
  108.               color: Theme.colors.darkGray,
  109.               textAlign: 'left',
  110.             }}>
  111.             Enter your mobile number, we will send your OTP to verify later
  112.           </Text>
  113.           <PhoneInput
  114.             style={{marginTop: Theme.spacing.margin}}
  115.             onChangeText={value => changeText(value)}
  116.             onTogglePickerModal={() => togglePickerModal()}
  117.             country={currentCountry}
  118.           />
  119.           <Text
  120.             style={[
  121.               Theme.fonts.caption,
  122.               {
  123.                 color: Theme.colors.error,
  124.                 textAlign: 'center',
  125.                 marginTop: Theme.spacing.margin / 2,
  126.               },
  127.             ]}>
  128.             {phoneError}
  129.           </Text>
  130.         </View>
  131.  
  132.         <View>
  133.           <Button loading={loading} primary onPress={() => validatePhone()}>
  134.             Next
  135.           </Button>
  136.         </View>
  137.       </View>
  138.     </>
  139.   );
  140. };
  141.  
  142. export default Registration;
  143.  
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×