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"

},`

score 1 · Accepted Answer · answered Jan 21 '22 at 12:13

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

To read the contents of the json file Fetch data from local json file
```
const customData = require('./customData.json');
```
Get the link from the json
```
const link = customData.musicUrl
```
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)

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

1 Answers1