[SOLVED] React Native Linking openURL : Use special characters like # and *

React Native Linking openURL : Use special characters like # and *

I am building a React Native app able to trigger mobile payment via USSD codes (widely used in Africa).

A USSD code is run from the dialer app of any phone and looks like this : #144# or #1*1*4# for example.

My app should basically redirect a user to the dialer app and fill the phone number with #144#.

It looks like special characters can't be sent to the android dialer app using Linking.openURL...

This Linking.openURL(`tel:+221786756172`)

works perfectly fine, I have a redirection and the phone number is filled.

But this Linking.openURL(`tel:#144#`)

doesn't work, the field of the dialer app remains empty...

I tried to escape the special characters, no success.

Could you guys help me in any way, that's UX improvement++

Thanks!!

Solution

Encode the USSD code first then use it. You can use below function:

const phoneShare = (number) => {
    let phoneNumber = '';
    if (Platform.OS === 'android') { phoneNumber = `tel:${encodeURIComponent(number)}`; }
    else { phoneNumber = `telprompt:${number}`; }
    Linking.openURL("" + phoneNumber + "");
};

How to use it?

<TouchableOpacity onPress={() => phoneShare('#144#')}>
    <Text>Press Me</Text>
</TouchableOpacity>