React Native PhoneLink component. e.g. <PhoneLink phoneNumber="+442011145678" />

PhoneLinkComponent.tsx

import React from 'react';
import { StyleSheet, Text, TouchableOpacity, Linking } from 'react-native';

interface PhoneLinkProps {
  phoneNumber: string;
}

export const PhoneLink: React.FC<PhoneLinkProps> = ({ phoneNumber }) => {
  const handlePress = () => {
    Linking.openURL(`tel:${phoneNumber}`);
  };

  return (
    <TouchableOpacity style={styles.container} onPress={handlePress}>
      <Text style={styles.phoneNumber}>{phoneNumber}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#007AFF',
    borderRadius: 8,
    paddingVertical: 12,
    paddingHorizontal: 16,
    alignItems: 'center',
  },
  phoneNumber: {
    color: '#FFFFFF',
    fontSize: 18,
    fontWeight: 'bold',
  },
});

Usage,

// external library imports
import React from 'react';
import { View } from 'react-native';

// local file imports
import { PhoneLink } from './PhoneLink';


export const App: React.FC = () => {
  const ukPhoneNumber: string = '+442011145678';

  return (
    <View>
      {/* ... other components here ... */}
      <PhoneLink phoneNumber={phoneNumber} />
    </View>
  );
};

Enjoy! 🎉 Happy React Native development 🚀