Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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"

},`

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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)

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading