React Native : How to open a specific URL with onPress function from an array of urls?

Question

I have an array of urls like that:

 [ "https://hey.com",
   "https://yes.com",
   "https://wow.com",
      /..
 ]

I have the same icon but multiple times. I want each of them to redirect to its specific url when on pressed.

I tried this code but it's not working:

onPress=(arrayOfURL)=>{  
for (i in arrayOfURL)
{      
  this.setState({ browserOpen: true });
  WebBrowser.openBrowserAsync(JSON.stringify(arrayOfURL[i]))
  .then(() => {
        WebBrowser.dismissBrowser();
        this.setState({ browserOpen: false });
    });         
}

}

The code for the icon:

          <View >         
            <Icon
              name='sc-telegram'
              type='evilicon'
              color='black'          
              onPress={this.onPress} />
          </View>

Can you add the code portion where you have the icons and you call `onPress()`? — Milore, Dec 06 '18 at 10:57
I just noticed you wrote arrayOfURI[i] and not arrayOfURL[i]. Is the browser opening or is that the problem? — Milore, Dec 06 '18 at 11:08
No, sorry, it's just a mistake. My browser doesn't open. I think the problem is that each time I press the icon, the function loops and try to open every URL in my array — danaso, Dec 06 '18 at 11:09
It tries to open all urls at the same time. What I want is that when I press the icon for on specific image, it opens the url for that image. — danaso, Dec 06 '18 at 11:15

score 0 · Answer 1 · answered Dec 06 '18 at 11:36

A quick help ! Have not tested the code, but this is what i do.

const urls = ["https://hey.com", "https://yes.com", "https://wow.com"];

urls.map(value => {
 return <View>         
            <Icon
              name='sc-telegram'
              type='evilicon'
              color='black'          
              onPress={() => this.openSpecificUrl(value)} />
          </View>

})

onSpecificUrl = (specificUrl) => {
  //you will get specific url from an array. You can perform your opening logic here
}

I tried. I got 'undefined is not a function ..near urls.map..' — danaso, Dec 06 '18 at 11:59

score 0 · Answer 2 · answered Dec 06 '18 at 11:38

0

So it seems you're doing a logic error. You don't need a for loop, just call onPress() method by each icon passing it a parameter that specifies the link you want to be opened:

<Icon
     name='sc-telegram'
     type='evilicon'
     color='black'          
     onPress={() => this.onPress(arrayOfURL[0])} />

And then simply:

onPress = (url) => {
  [...]
  WebBrowser.openBrowserAsync(url).then(...)
  [...]
}

If your problem is how to assign your link to icons dynamically...well that's just an other question. I hope I haven't misunderstood everything this time and that this can helps you solve your doubts.

answered Dec 06 '18 at 11:38

Milore

1,672
1
15
20

you nailed it. my big problem is to assign dynamically, cause I have just one icon but multiple times, so I can't call onPress like `onPress={() => this.onPress(arrayOfURL[0])} />` – danaso Dec 06 '18 at 12:02
So, I think @Neel answer is correct. Once you've defined your array of urls, map it with its correct name in the render method (where you have to place your icons). – Milore Dec 06 '18 at 12:10

React Native : How to open a specific URL with onPress function from an array of urls?

2 Answers2