ReactImageView: Image source "null" doesn't exist

[janusqa]

This package seems to be producing this error/warning, but I am not sure why or how to fix it.

ReactImageView: Image source "null" doesn't exist

[minisk93]

Facing the same problem

[minisk93]

The problem is related to default flag rendering. A workaround is to define renderFlag function and render the flag using getFlag by PhoneInput ref

[janusqa]

@minisk93 can you give a code example of how and where you do this?

[janusqa]

Ok I see what is happening here, I am using react-hook-form and its not providing this input with values on first render (or fast enough to load the flag as you pointed out) So I set the initialValue by passing in a value directly (and then let react-hook-form do its initial thing) and then setting the initialCountry based on the initialValue. If there is no Initialvalue then it loads the us flag. I ended up with this

<PhoneInput
    ref={phoneInputRef}
    initialCountry={phoneInputRef.current?.getISOCode() ?? "us"}
    initialValue={initialValue}
    onChangePhoneNumber={onChange}
    textStyle={styles.input}
    onSelectCountry={() =>
        onChange(phoneInputRef.current?.getCountryCode())
    }
    textProps={{
        ...textInputProps,
        value,
        onBlur,
    }}
/>

[minisk93]

@janusqa On my side, the problem was with flag rendering for invalid phone number. If phone number is invalid or input is just empty, the source image for the flag can not be found, thus causing this warning. So handling imageSource undefined scenario fixes it. E.g. like this

<PhoneInput
        ref={phoneRef}
        initialCountry={country}
        allowZeroAfterCountryCode={true}
        autoFormat={true}
        renderFlag={({ imageSource }) => {
          return (
            <>{imageSource && <Image source={imageSource} style={{ width: 30, height: 22 }} />}</>
          );
        }}
        style={globalStyles.formElement}
        textStyle={{ color: colors.darkWhite, fontSize: sizes.fontMedium }}
        onPressFlag={onFlagPress}
      />