How do I open link from data.json in react-native using button?

Question

I want to open the link in the data.json file that I created in react-native and I don't know how to do it, can you help me?

<TouchableOpacity
                    style={styles.play}
                    onPress={() => Linking.openURL('props.song.musicUrl') }
                    
                >
                <Text style ={styles.play_button}>Press Here</Text>

`{ "id":0,

    "imageUrl":"https://i.pinimg.com/564x/94/28/8f/94288fe9af3ede8f4e07505da921f373.jpg",
    "musicUrl":"https://www.youtube.com/watch?v=s6vXWtNZu0c"

},`

Answer 1

There are three steps to do this (I think you've already achieved 1 and 2):

• First read the contents of the json file
• Get the link from the json
• Open link with Linking

1. To read the contents of the json file Fetch data from local json file

   const customData = require('./customData.json');
   

2. Get the link from the json

   const link = customData.musicUrl
   

3. Use Linking

   Linking.openURL(link)
   

---

In your case,

   Linking.openURL(props.song.musicUrl) // <- Remove quotes 

Since adding quotes creates a String, you're trying to open the link 'props.song.musicUrl' instead of the link inside the JSON.

You can look here for guidance (OpenURL)