International phone numbers support

[joaopiopedreira]

Hi @joshswan , it looks like we can override the phone regex directly in your src/matchers.js file. I've done it in my branch and it works like a charm. The idea is to add a regex by country and then merge them all when invoking the phone autolinker.

To add a new country, we would add the corresponding regex to this object (in src/matchers.js):

// To include a new country, find it's ISO Alpha 2 code at http://www.nationsonline.org/oneworld/country_code_list.htm
const regexByCountry = {
  US: /(\([0-9]{3}\)[\s-]|[0-9]{3}[\s-])[0-9]{3}[-\s][0-9]{4}/g,
  GB: /(?:(?:\(?(?:0(?:0|11)\)?[\s-]?\(?|\+)?(44)\)?[\s-]?(? (...),
  FR: /(?:(?:\(?(?:0(?:0|11)\)?[\s-]?\(?|\+)?(44)\)?[\s-]?(? (...),
  PT: /(?:(?:\(?(?:0(?:0|11)\)?[\s-]?\(?|\+)?(44)\)?[\s-]?(? (...),
  IE:  /(?:(?:\(?(?:0(?:0|11)\)?[\s-]?\(?|\+)?(44)\)?[\s-]?(? (...),
  DE:  /(?:(?:\(?(?:0(?:0|11)\)?[\s-]?\(?|\+)?(44)\)?[\s-]?(? (...),
};

Our phone override would then look like this:

  // Phone override
  {
    id: 'phone',
    regex: combinedRegex(['US', 'GB', 'FR', 'PT', 'IE', 'DE']),
    Match: Autolinker.Util.extend(Autolinker.match.Match, {
      constructor(cfg) {
        Autolinker.match.Match.prototype.constructor.call(this, cfg);
        this.number = cfg.phone;
      },
      getType() {
        return 'phone';
      },
      getNumber() {
        return this.number;
      },
      getAnchorHref() {
        return `tel:${this.number}`;
      },
      getAnchorText() {
        return this.matchedText;
      },
    }),
  },

Is this something you'd want to include in your package? Should I submit a PR? Cheers

[joshswan]

Yeah definitely open for a PR. There may need to be a way to configure which countries are enabled and which aren't, but maybe I'm overthinking it.

[joaopiopedreira]

Hi @joshswan, thinking about it, it would be great to pass an array with the countries and corresponding regexes as props to the component (something like phoneCountries={array}, where array would be [{US:/some regex/, GB: /some regex/,...}]. We would the combine all the regex expressions behind the scenes. This would also allow us to set the right country regex per user, according to its localization.

Any ideas on how to go about this? Cheers mate

[joshswan]

Was toying with that idea myself. The only issue I see are that the user would have to maintain the list of regexes themselves. I guess it would allow for greater flexibility and people could just create their own wrapper component so they don't need to pass in the array each time they want to use it in their app.

We could also build in some and allow for passing in regexes as well, e.g. <Autolink phone={['US', 'GB', /^(...)$/]} />. Thoughts?

[joaopiopedreira]

Love the idea @joshswan. Makes perfect sense to me. Need help implementing it or do you have a roadmap in mind already?

[joshswan]

Definitely open to a PR if you've got some time! Otherwise I'll try to get around to it in the next week or so.

Yes Please.

[normanholz]

Please implement this. Cheers from Germany

[StevenMasini]

@joshswan @joaopiopedreira Did you consider to use libphonenumber-js to detect the phone number?

Using the findPhoneNumbers method.

[StevenMasini]

Ok I just noticed that the problem doesn't come from react-native-autolink but from Autolinker.js.

[joshswan]

Yep the issue lies in Autolinker.js. I'll take a look at the findPhoneNumbers method though since that could be much easier than having country by country regexes.

[mayconmesquita]

this feature would be awesome!