setValue or initialValue doesn't seem to work

[teamseamive]

We tried setting the default value of the phone with value or initialValue but it doesn't seem to work but passing them to textProps={{value: phone}} does work but then autoFormat doesn't unless focused on input.

Also, some functions like setValue return an undefined error, can you make some examples with those?

Thanks!

[zizzle6717]

Try again with the latest version ^1.0.8. Use initialValue to set a default value. The component stores a value and a displayValue in state. The display value is formatted, and calling ref.getValue will return the actual value with formatting removed. If you are using a custom flag picker, you can have keep it updated using the callback from onChangePhoneNumber

onPhoneInputChange = (value: string, iso2: string) => {
        const newState: any = {
            phone: value,
        };
        if (iso2) {
            newState.countryCode = (iso2?.toUpperCase() as CountryCode);
        }
        this.setState(newState);
}

[teamseamive]

initialValue as a textProps or a normal prop? tried setting as a normal prop with initialValue={phone} and not input was set. Also, what about setValue?

[zizzle6717]

In a recent release it was accidentally renamed to 'setNumber'. I have changed it back to 'setValue'.

On Tue, Mar 9, 2021, 2:31 PM Seamive, Inc. notifications@github.com wrote:

initialValue as a textProps or a normal prop? Also, what about setValue?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/rili-live/react-native-phone-input/issues/4#issuecomment-794416157, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACXGCEV7SCYXAW2PZDFJFNLTC2ATJANCNFSM4Y4JUPBQ .

[zizzle6717]

I've updated the README with an example of initialValue and it works as expected as far as I can tell

[zizzle6717]

https://github.com/rili-live/react-native-phone-input/blob/master/src/PhoneInput.tsx#L39

[teamseamive]

I'm using this, still no luck with initialValue

  const [phone, setPhone] = useState('');
...
DeviceInfo.getPhoneNumber().then((phoneNumber) => {
      if (__DEV__) {
        console.log('Got phone number:', phoneNumber);
      }
      if (typeof phoneNumber !== 'undefined' || phoneNumber !== '') {
        let gotPhone = phoneNumber.substring(1);
        setPhone(gotPhone);
        console.log(phone);
        // phoneInput.current?.focus();
      }
    });
  };

It gets the phone number say +1323000000 and I'm removing first + just in case and then I have initivalValue={phone}

[teamseamive]

Also, when we use.

  useEffect(() => {
    if (__DEV__) {
      console.log('Phone format:', phoneFormat);
      phoneInput.current?.setValue(phoneFormat);
    }
  }, [phoneFormat]);

It gives errors:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Even we're in useEffect.

[zizzle6717]

initialValue is used in the PhoneInput constructor, so it must be defined before the component is rendered. In your case you are fetching a phone number asynchronously after the component renders, so you should use setValue.

An example of this would be

...
componentDidMount = () => {
        // Asynchronously set the value after the PhoneInput mounts/renders and you have a ref.
        setTimeout(() => {
            this.phone.setValue('+13175448348');
        }, 1000);
}
...
render = () => {
    return (
        <PhoneInput
              autoFormat={true}
              ref={(ref) => { this.phone = ref; }}
              onPressFlag={this.onPressFlag}
              offset={0}
              onChangePhoneNumber={this.onPhoneInputChange}
              initialCountry={'us'}
              flagStyle={styles.displayNone}
              style={formStyles.phoneInput}
          />
    );
}

In regard to your comment about useEffect, please create a separate issue and add more context around your code. I would also encourage you to look at the source code of react-native-phone-input to better understand the intended functionality. I'm closing this ticket as setValue and initialValue are otherwise now working as expected. Please also consider making a PR with the proposed fix to the issues you run into