React Native - Linking to Articles

This lesson is part of a series on React Native.

Step 13 - Navigating to an Article

Our first step is to update the renderItem function in our FlatList so that it returns a Pressable element instead of a View. We'll also add an onPress event handler to the Pressable element.

Update sports.jsx to look like this:

import { StyleSheet, Text, FlatList, Pressable} from 'react-native' ///////Import Pressable
import { useEffect, useState } from 'react'
import { getNews } from '../../api/news-api'
import CustomView from '../../components/CustomScreen'
import Spacer from '../../components/Spacer'


const Sports = () => {

  const [articles, setArticles] = useState([])

  useEffect(() => {
    // Fetch sports news articles
    getNews('sports').then((sportsArticles) => {
      setArticles(sportsArticles)
    })
  }, [])

  ////////////// Add this function
  const gotoArticle = (url) => {
    console.log("Go to article:", url)
  }

  return (  
    <CustomView style={{padding: 20}}>
      <FlatList
        data={articles}
        renderItem={({ item }) => (

          ////// Replace the View element with Pressable
          <Pressable key={item.index} onPress={() => gotoArticle(item.url)}>
            <Text style={{width: '100%',textAlign: 'left'}}>{item.title}</Text>
            <Spacer height={10} />
          </Pressable> 
          /////// Make sure you change the closing tag to Pressable instead of View
        
        )}
      />
    </CustomView>
  )
}

export default Sports

const styles = StyleSheet.create({})

Run the app an look at what happens when you click on items in the FlatList

Linking to Web Pages

We can use a Linking object to navigate to URLs.

If you are running the app in the browser, a new tab will open to display the URL

If you are running the app on your phone, then it will open the default browser app and open the page in that.

We could spend some time talking about how mobile operating systems are designed to make the apps installed interoperable.

Update the code in sports.jsx to look like this:

import { StyleSheet, Text, FlatList, Pressable, Linking} from 'react-native' ////////////////// Import Linking
import { useEffect, useState } from 'react'
import { getNews } from '../../api/news-api'
import CustomView from '../../components/CustomScreen'
import Spacer from '../../components/Spacer'

const Sports = () => {

  const [articles, setArticles] = useState([])

  useEffect(() => {
    // Fetch sports news articles
    getNews('sports').then((sportsArticles) => {
      setArticles(sportsArticles)
    })
  }, [])

  const gotoArticle =  async (url) => {   /////// add 'async' on this line, then update the function like so:
    const supported = await Linking.canOpenURL(url);
    if (supported) {
      await Linking.openURL(url)  
    } else {
      console.log("Don't know how to open URI: " + url);
    }
    
  }

  return (  
    <CustomView style={{padding: 20}}>
      <FlatList
        data={articles}
        renderItem={({ item }) => (
          <Pressable key={item.index} onPress={() => gotoArticle(item)}>
            <Text style={{width: '100%',textAlign: 'left'}}>{item.title}</Text>
            <Spacer height={10} />
          </Pressable>
        )}
      />
    </CustomView>
  )
}

export default Sports

const styles = StyleSheet.create({})

Apparently, some devices do not support opening links, which is why we check to see if 'linking' is supported before we attempt to link to the url.