Linking and Touchable Opacity in React Native

Hey guys, what's up? Welcome back to my React Native series. Let's not waste the time. Go through my previous article and be ready to understand how to give links to other websites in our app.

Linking

In simple and short, Linking gives you a general interface to interact with both incoming and outgoing app links. We can give mail, telephone, sms and web app linking.

In this article, we will provide links to social account images in our PortfolioCard.tsx file.

TouchableOpacity

This is a kind of wrapper for making views respond properly to touches. Using this we can be less dependent on styling since on press down, it reduces the opacity and does some animation which will help the user to understand the action taken.

So let's use it and make our images linkable to appropriate social platforms.

1. First and foremost, we will create one function and use the Linking component to open the URL. Don't forget to import the component from 'react-native'.

    function openWebsite(websiteLink: string) {
        Linking.openURL(websiteLink);
    }
   

2. The second step is wrapping images inside the TouchableOpacity component.

    <TouchableOpacity>
        <Image 
            source={require('../images/linkedin.png')}
            alt="LinkedIn"
            style={styles.account}
        />
    </TouchableOpacity>
   

3. And the third step is calling our openWebsite function on the image click using the onPress event of TouchableOpacity.

    <TouchableOpacity
    onPress={() => openWebsite('https://www.linkedin.com/in/shrutika-                dorugade-990b84189/')}
    >
        <Image 
            source={require('../images/linkedin.png')}
            alt="LinkedIn"
            style={styles.account}
        />
    </TouchableOpacity>
   

That's it, friends. Only these three steps are required to add a link to your image or text. I have pushed all the code into my git repository so that it will be easy to you to take a copy of it.
Link to Complete Source Code

Happy Learning and will see you in our next article.

---

Special thanks to Hitesh Choudhary !!!