Add href phone link to a TextInput

Question

I currently have the following in a React Native app:

                 <TextInput
                   style={styles.input}
                   placeholder="Phone"
                   value={formState.phone}
                 />

The value in the above is a phone number how can I make it to where this value text input is an href or link a user can click and dial out?

From a few answers I've seen there is "Linking" from expo in a managed workflow. The example given is:

  <Text {...this.props} onPress={this._handlePress}>
    {this.props.children}
  </Text>

How would I be able to use Linking or any other method to achieve this?

Answer 1

You can also use Parsed Text.

  handlePhonePress = (url) => {
      Linking.openURL(url);
  }
   <ParsedText
      style={styles.text}
      parse={
        [
          {type: 'phone', style: styles.phone, onPress: this.handlePhonePress},
        ]
      }
    >
      ...
    </ParsedText>

By doing this your phone number will also accepts style e.g. you can make it underlined and blue

Answer 2

import { Linking } from "react-native";

_handlePress() {
  Linking.openURL(`tel:${phoneNumber}`);
}