CODEWITHSUNDEEP
javascriptreactjsreact-nativefeed
Dhara Patel
Dhara Patel

Reputation: 48

How to open URI in web in react native?

Code

App.js


useEffect(() => {
    axios
        .get(
            `https://newsapi.org/v2/everything?q=bitcoin&apiKey=6529d29d039d45d591fc53ee553c0e92`
        )
        .then(response => {
            // console.log(response.data.articles)
            setNews(response.data.articles);
            setLoading(false)
        })
        .catch(error => {
            console.log(error);
            setLoading(true)
        });
}, []);



<ScrollView>
    {news.map((article) => (
        <>
            <Card containerStyle={styles.card}>
                <Card.Image key={article.urlToImage}
                    source={{ uri: !article.urlToImage ? "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDZLgldd2q0XXCd-lobijWU4aNMdPMfoaOKLxOTmdC&s" : article.urlToImage }}
                />
                <Card.Divider />
                <Text numberOfLines={2} style={{ textAlign: 'left', color: '#000', fontFamily: 'Lobster', fontSize: RFPercentage(3), marginBottom: verticalScale(5) }} key={article.title}>{article.title}</Text>

                <Text style={{ fontSize: RFPercentage(2.70), fontFamily: 'LobsterTwo-Bold', marginBottom: verticalScale(15) }} key={article.description} numberOfLines={3}>
                    {article.description}
                </Text>

                <Text key={article.author} style={{ fontFamily: 'LobsterTwo-Italic', fontSize: RFPercentage(2.30), marginBottom: scale(5), color: '#E02424' }}>
                    {article.author == null ? "Unknow Author" : article.author} on {new Date(article.publishedAt).toGMTString()}</Text>

                <TouchableOpacity
                    style={styles.cardbtn}
                >
                    <Text style={{ fontFamily: 'Lobster', color: '#fff', fontSize: RFPercentage(3) }}>Read More</Text>
                </TouchableOpacity>
            </Card>
        </>
    ))}
</ScrollView>

Explanation

data is successfully fetched. in the data article.url comes a link to the full news when I try to click the Read More button it redirects to a google page and opens the link to which one comes I'm article.url

Button

 <TouchableOpacity style={styles.cardbtn}>
      <Text style={{ fontFamily: 'Lobster', color: '#fff', fontSize: RFPercentage(3) }}>Read More</Text>
 </TouchableOpacity>

here is a button when I click the button it redirects me to google and opens a link Page like this example it's working but in my project not open any link

anyone can help me?

Upvotes: 0

Views: 274

Answers (2)

Aditya Singh
Aditya Singh

Reputation: 1

You can use Linking for this; it's a core component of the React native framework.

import { Linking } from 'react-native';

Linking.openURL(url);

You can add this to your code and it should work fine.

Upvotes: 0

Vicky Ahuja
Vicky Ahuja

Reputation: 1214

Check the sample code in codeSandbox,

Hope this helps you with your query: Open link Example

In this example I have imported Linking api from react-native package, which gives us many functionalities to work with http urls.

we can use openURL method to open url in external browser.

Upvotes: 1

Related Questions