Registration.tsx

import {HeaderBackButton} from '@react-navigation/stack';
import React, {useCallback,  useState} from 'react';
import {Text, View} from 'react-native';
import Modal from 'react-native-modal';
import {useFormikContext} from 'formik';
import Button from '../../components/Button';
import Theme from '../../utils/theme';
import {PhoneInput} from '../../components/PhoneInput';
import {Register} from '../../models/registerSchema';
import PickerModal from '../../components/PhoneInput/PickerModal';
import countries from '../../data/countries';

function delay(t, v) {
  return new Promise(function (resolve) {
    setTimeout(resolve.bind(null, v), t);
  });
}

Promise.prototype.delay = function (t) {
  return this.then(function (v) {
    return delay(t, v);
  });
};

const Registration: React.FunctionComponent = ({...props}) => {
  const [countryId, setCountryId] = useState('0');
  const [pickerModalVisible, setPickerModalVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  const [phoneError, setPhoneError] = useState('');

  const formik = useFormikContext<Register>();

  const currentCountry = countries[parseInt(countryId, 10)];

  const togglePickerModal = useCallback((id?: string) => {
    id && setCountryId(id);
    setPickerModalVisible(visible => !visible);
  }, []);

  const changeText = useCallback(value => formik.handleChange('phone')(value), [
    formik,
  ]);

  const validatePhone = () => {
    setLoading(true);

    delay(500).then(() => {
      setLoading(false);
      console.log(formik.values.phone);

      if (formik.values.phone === undefined) {
        setPhoneError('No phone number provided. Please enter a phone number.');
      } else {
        if (formik.errors.phone) {
          setPhoneError(formik.errors.phone);
        } else {
          setPhoneError('');
        }
      }
    });
  };

  return (
    <>
      <Modal
        onBackButtonPress={() => togglePickerModal()}
        propagateSwipe
        deviceWidth={Theme.width}
        deviceHeight={Theme.height}
        isVisible={pickerModalVisible}>
        <PickerModal onTogglePickerModal={togglePickerModal} />
      </Modal>

      <View
        style={{
          display: 'flex',
          height: 60,
          justifyContent: 'center',
        }}>
        <View style={{height: 30}}>
          <HeaderBackButton
            onPress={() => props.onPageChange(0)}
            style={{
              flex: 1,
              alignItems: 'center',
              justifyContent: 'center',
              width: 30,
              height: 30,
            }}
            tintColor={Theme.colors.black}
          />
        </View>
      </View>
      <View
        style={{
          flex: 1,
          paddingHorizontal: Theme.spacing.padding * 1.2,
          paddingBottom: Theme.spacing.padding,
          justifyContent: 'space-between',
        }}>
        <View>
          <Text style={{...Theme.fonts.h2, color: Theme.colors.black}}>
            Registration
          </Text>
          <Text
            style={{
              ...Theme.fonts.body,
              color: Theme.colors.darkGray,
              textAlign: 'left',
            }}>
            Enter your mobile number, we will send your OTP to verify later
          </Text>
          <PhoneInput
            style={{marginTop: Theme.spacing.margin}}
            onChangeText={value => changeText(value)}
            onTogglePickerModal={() => togglePickerModal()}
            country={currentCountry}
          />
          <Text
            style={[
              Theme.fonts.caption,
              {
                color: Theme.colors.error,
                textAlign: 'center',
                marginTop: Theme.spacing.margin / 2,
              },
            ]}>
            {phoneError}
          </Text>
        </View>

        <View>
          <Button loading={loading} primary onPress={() => validatePhone()}>
            Next
          </Button>
        </View>
      </View>
    </>
  );
};

export default Registration;