react native firebase phone authentication - very strange behavior

Question

Ive copied the code for phone auth from RNFB pretty much exactly from their site...see code below (link here ).

When I run code using the "Phone numbers for testing" functionalty provided by Firebase (ie use a dummy phone number)....then it does NOT create a user in FB when I run the signInWithPhoneNumber function.....and its not until I run confirmCode function that it creates the user in FB. As I understand it, thats the way its suppposed to work.
HOWEVER....when I run MyPhoneAuthButton fn using my own phone number (ie a "real" test)...then the SMS auth message is sent to me and the user is created immediately in FB without having to run confirmCode fn . Why is it acting differently when testing vs running in prod? Which process should I be coding for? Any help appreciated

const MyPhoneAuthButton = props => {
  const [objConfirm, setObjConfirm] = useState(null);
  const [code, setCode] = useState('');

  // Handle the button press
  const signInWithPhoneNumber = phoneNumber => {
    auth()
      .signInWithPhoneNumber(phoneNumber)
      .then(confirmResult => {
        setObjConfirm(confirmResult);
      })
      .catch(err => {
        console.log('Invalid Phone Number', err.message);
      });
  };

  const confirmCode = () => {
    objConfirm
      .confirm(code)
      .then(user => {
        console.log('User auth by phone OK', user);
      .catch(err => {
        console.log('Invalid code.', err.message);
      });
  };


  <MyButton
    onPress={() => {
      signInWithPhoneNumber(props.telNum);
    }}>
    Sign in With Phone Number
  </MyButton>

  const signInWithPhoneNumber = phoneNumber => {
    auth()
      .signInWithPhoneNumber(phoneNumber)
      .then(confirmResult => {
        console.log('User successfully authorized via telNum');
        setObjConfirm(confirmResult);
      })
      .catch(err => {
        Alert.alert('Invalid Phone Number', err.message);
        console.log('Invalid Phone Number', err.message);
      });
  };

Answer 1

It should be like that. You should pass the confirmation phase firstly, then you will have the button for code confirmation. I have reorganized it according to the url you linked from firebase

 const MyPhoneAuthButton = props => { const [objConfirm, setObjConfirm] = useState(null); const [code, setCode] = useState(''); // Handle the button press const signInWithPhoneNumber = phoneNumber => { auth() .signInWithPhoneNumber(phoneNumber) .then(confirmResult => { setObjConfirm(confirmResult); }) .catch(err => { console.log('Invalid Phone Number', err.message); }); }; const confirmCode = () => { objConfirm .confirm(code) .then(user => { console.log('User auth by phone OK', user); .catch(err => { console.log('Invalid code.', err.message); }); }; const signInWithPhoneNumber = phoneNumber => { auth() .signInWithPhoneNumber(phoneNumber) .then(confirmResult => { console.log('User successfully authorized via telNum'); setObjConfirm(confirmResult); }) .catch(err => { Alert.alert('Invalid Phone Number', err.message); console.log('Invalid Phone Number', err.message); }); }; if(!objConfirm) { return ( <MyButton onPress={() => { signInWithPhoneNumber(props.telNum); }}> Sign in With Phone Number </MyButton> ) } return ( <> <TextInput value={code} onChangeText={text => setCode(text)} /> <Button title="Confirm Code" onPress={() => confirmCode()} /> </> );