How to choose flag for <PhoneInput> Component ?

[lisa-gogo]

Description

This is PhoneInput component, I want to choose other country' flag

<View testID="PhoneNumber>
         <PhoneInput
            value={phoneRegisteredUser.slice(2)}
            style={styles.InputContainer}
            textStyle={styles.phoneInputTextStyle}
            ref={phoneRef}
            initialCountry={'us'}
            onPressFlag={onPressFlag}
            allowZeroAfterCountryCode={false}
            textProps={{
              placeholder: IMLocalized('Phone Number'),
              placeholderTextColor: '#dcdcdc',
            }}
         />
</View>

After I tap this testID, I can't open flag list. It will only allow enter phone number.

What should I do with detox ?

Your environment

Detox version: React Native version: Node version: Device model: OS: Test-runner (select one): jest-circus / jest+jasmine / mocha / other

[asafkorem]

Hey @lisa710junyi, I'm not familiar with this component, so I'm not sure what exactly are you trying to achieve UI-wise. However, I can only guess what is required here:

• The dependency (PhoneInput) needs to expose a testID for the flag element (which I guess what opens the list of countries), then you can tap this element after matching it by id (await element(by.id('...')).tap();).
• When the list opens, you should be able to match the desired country by test-ID, text or label, and tap it. You can use this API to scroll to the country element in the list if needed (you need to be able to locate the list element, by test-ID).

Please ask the team that maintains this dependency for the required test-IDs, or check in their documentation whether they already provide these.

[lisa-gogo]

Hi @asafkorem Thank you for helping me.

 <View testID="PhoneNumber">
          <PhoneInput
            value={phoneRegisteredUser.slice(2)}
            style={styles.InputContainer}
            textStyle={styles.phoneInputTextStyle}
            ref={phoneRef}
            initialCountry={'us'}
            onPressFlag={onPressFlag}
            allowZeroAfterCountryCode={false}
            textProps={{
              placeholder: IMLocalized('Phone Number'),
              placeholderTextColor: '#dcdcdc',
            }}
          />
        </View>

it('Enter phone number, tap send code and enter verification code',async()=>{
await element(by.id('PhoneNumber')).tap()
await element(by.id('PhoneNumber')).typeText('123456')
await element(by.id('sendCode')).tap()

})

I am not able to open flag list. I only allow for entering phone number. Thank you so much.

[asafkorem]

Hi @lisa710junyi, I'm closing the issue.

As I mentioned, in order to open the flag list you must be able to access the flag element by test-id, which should be provided by the maintainers of this component.

Let me know if there's anything help we can help with! 🙂