In the last section we spend some time to make sure that we had a very reusable buttoned component. 2
So now we can place the button component pass in a of von press and then whenever the user presses on 3
it boom something different is going to happen which is exactly what we want. 4
So the next thing we need to do is figure out OK well when a user does press this thing how do we direct 5
them over to their web browser and point them to a very specific key or l. 6
So if you are in the browser environment you know we were doing react jazzier we could put an anchor 7
tag or something like that just say okay anchor tag whenever someone clicks you take the user here. 8
There you go. 9
Well unfortunately with re-activated it's not quite as straightforward as that. 10
There's no concept really of an anchor tag any way of telling our app to just say like oh yeah just 11
automatically pop open browsers a little bit more complicated. 12
Well you know it's not that let me tell you it's not that much more complicated but it's not an anchor 13
tag. 14
So whatever let's get to it let's just get to it inside my browser. 15
I'm going to pop open the re-act native documentation so you know here we are. 16
And unlove to incite all stroll down until I find the section that contains a price. 17
So here's Abts right here and I'm looking for a very particular API called linking. 18
So here's linking 19
linking library which is provided by Riak native is how we can interface our application with other 20
apps that are running on the user's mobile device included in their the user's browser. 21
So whenever you want to kick a user over to their browser we can make use of this linking library. 22
And again you can also read the documentation here in case you're curious and you can figure out how 23
to kick the user over to other apps as well. 24
So you might want to kick the user over to Oubre so that they can request a ride or their email client 25
so they can write or email or whatever other app the user might have on their device. 26
This is how you interface with it with the linking library. 27
So for our use case just sending the user over to a browser is not going to be too bad. 28
Let's check out one method in the docs for the saying I scroll back down and you can find on here. 29
The linking library has a method called open you are out. 30
And basically you know if you want to add a. 31
Or open up a Web site that address we can just call open you URL with a plain text normal vanilla. 32
You are like an age TTP type. 33
And so that's exactly what we're going to do. 34
Remember that in our album's object we've already got to you or L to the Amazon store available as the 35
URL property. 36
So basically we need to call linking dot open or L with this u r l and we should be good to go. 37
So let's get a shot back in my album detail. 38
I'm going to go back up to the top and I will import the library linking for Mac native and am where 39
I am destructuring of my album object. 40
I will also pull off the L property as well. 41
So here's our Ural now inside of our button. 42
We will replace the console log statement with linking dot hopin you are l and notice that it's capital 43
U capital R and L and then we'll just say just open that one page right there. 44
OK let's give this a shot in our simulator. 45
And I will click the button 46
oops and you'll notice that I got kicked over to Amazon.com and my simulator is a little bit lag right 47
now but are you up. 48
This music album and automatically on the top left hand side I can click back to albums and go back 49
to my application and I can then go down to the next album and click that one and there we go. 50
Perfect. 51
So this is exactly what we wanted. 52
This is looking really fantastic. 53
I think there's just one last thing we need to do. 54
We need to make sure that our button at the bottom of each card has a little bit better text than just 55
click me. 56
So let's take care of that in the next section.