AstrOOnauta / react-native-international-phone-number

⚛️ International mobile phone number input component for React Native 📱
https://snack.expo.dev/@astroonauta/react-native-international-phone-number
ISC License
262 stars 45 forks source link

Keypad does not close #15

Closed rosejtec closed 12 months ago

rosejtec commented 12 months ago

Hello,

Thank you for this great package! Can I check if there is a way to close the number keypad only its been inputted? Currently I have to click on another input field to close it.

Thanks!

AstrOOnauta commented 12 months ago

Hi @rosejtec! Thanks for your interesting in the lib!

This is not a lib issue. For resolve this case, you need to configure your component to close the keyboard when you click outside of it: englobing the screen with the component TouchableWithoutFeedback from 'react-native". Follow the example:

import React, { useState } from 'react';
import { TouchableWithoutFeedback, Keyboard} from 'react-native';
import PhoneInput from 'react-native-international-phone-number';

...

return(
  <TouchableWithoutFeedback onPress={Keyboard.dismiss}>

       ...

       <PhoneInput
           value={inputValue}
           onChangePhoneNumber={handleInputValue}
           selectedCountry={selectedCountry}
           onChangeSelectedCountry={handleSelectedCountry}
        />

     ...

   </TouchableWithoutFeedback>
)

So, I hope this helps you.

🚀 AstrOOnauta 🚀

rosejtec commented 12 months ago

Interesting! I found another way to do it too by adding returnKeyType='done'. I'll give your suggestion a try too.

<PhoneInput
       value={inputValue}
       onChangePhoneNumber={handleInputValue}
       selectedCountry={selectedCountry}
       onChangeSelectedCountry={handleSelectedCountry}
       returnKeyType='done'
  />

Thanks