React native how to user confirmation fields

Question

Hi everyone as this package and this snack says its easy to use but I can't use it. I'm calling it as a component as snack do. Then it shows confirmation fields and gets values but how can I react or get this values. Thank you.

Vahid Alimohamadi Vahid Alimohamadi · Accepted Answer · 2021-02-07T09:38:42

I just send you my working code:

import React, {useState, useCallback, useEffect, useRef} from 'react';
import {
  CodeField,
  Cursor,
  useBlurOnFulfill,
  useClearByFocusCell,
} from 'react-native-confirmation-code-field';
import Toast from 'react-native-root-toast';
import {View, Text, ActivityIndicator, StyleSheet} from 'react-native';
import axios from 'axios';
import {authURI} from '../../config.json';
import styles from '../../styles';
import AsyncStorage from '@react-native-community/async-storage';
import SmsRetriever from 'react-native-sms-retriever';
import {AuthContext} from '../../contexts';

export default ({navigation, route}) => {
  // let codeContainer = useRef(null);
  let [loading, load] = useState(false);
  const [value, setValue] = useState('');
  const codeContainer = useBlurOnFulfill({value, cellCount: 5});
  const [props, getCellOnLayoutHandler] = useClearByFocusCell({
    value,
    setValue,
  });
  let {signIn} = React.useContext(AuthContext);
  useEffect(() => {
    value.length === 5 && handlerOnFulfill(value);
  }, [handlerOnFulfill, value]);

  const handlerOnFulfill = useCallback(
    async (verificationCode) => {
      if (loading) {
        return;
      }

      load(true);
      let mobilePhone = route.params?.mobilePhone || '';
      // console.warn(mobilePhone);
      try {
        let response = await axios.post(`${authURI}/user/verify`, {
          mobilePhone,
          verificationCode,
        });
        await AsyncStorage.setItem(
          '@myabb/tokens',
          JSON.stringify(response.data),
        );
        load(false);
        return signIn(response.data);
      } catch (error) {
        let messages;
        if (error && error.response.data && error.response.data.messages) {
          messages = error.response.data.messages.map((message, index) => (
            <Text key={index}>{message}</Text>
          ));
        }
        load(false);

        Toast.show(messages ? messages : 'Network error.', {
          backgroundColor: 'red',
          shadow: true,
          animation: true,
          duration: 5000,
          position: Toast.positions.CENTER,
        });
      }
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [loading, route.params],
  );

  useEffect(() => {
    SmsRetriever.startSmsRetriever().then((r) => {
      SmsRetriever.addSmsListener((event) => {
        event.message && setValue(event.message.match(/\d+/g)[0]);
      });
    });
    return function cleanup() {
      SmsRetriever.removeSmsListener();
    };
  }, []);

  return (
    <View style={styles.container}>
      <Text style={{...styles.Text, textAlign: 'center', fontSize: 17}}>
        Confirmation code sent to your mobile phone.
      </Text>
      <CodeField
        ref={codeContainer}
        {...props}
        value={value}
        onChangeText={setValue}
        cellCount={5}
        rootStyle={cstyles.codeFiledRoot}
        keyboardType="number-pad"
        renderCell={({index, symbol, isFocused}) => (
          <Text
            key={index}
            style={[cstyles.cell, isFocused && cstyles.focusCell]}
            onLayout={getCellOnLayoutHandler(index)}>
            {symbol || (isFocused ? <Cursor /> : null)}
          </Text>
        )}
      />
      {!!loading && <ActivityIndicator />}
    </View>
  );
};

const cstyles = StyleSheet.create({
  root: {flex: 1, padding: 20},
  title: {textAlign: 'center', fontSize: 30},
  codeFiledRoot: {marginTop: 20},
  cell: {
    ...styles.Text,
    width: 40,
    height: 40,
    lineHeight: 38,
    fontSize: 24,
    borderBottomWidth: 2,
    margin: 5,
    borderColor: '#00000030',
    textAlign: 'center',
  },
  focusCell: {
    borderColor: '#000',
  },
});

I hope it helps you, but you have to see the publisher's examples.

React native how to user confirmation fields

1 Answers