SwiftUI still does not have a text view where you can tap on individual words to trigger actions.
So today I'm going to show you how you can add #hashtags, @mentions, links and more into a SwiftUI text.
Just like you see it right over here. Let's get into it. Go ahead and take a look at
Activetext at STORE.REBELOPER.COM/ACTIVETEXT and this is what you will be able to build out.
If you tap on the mention you will be able to have a mention action, a hashtag action
also we support links as you can already see and we can have a plain text and of course we can
change a word into whatever view would like. In this case we have the Swift logo which is really,
really nice, okay. It's at STORE.REBELOPER.COM/ACTIVETEXT and today I'm going to show you how you can set
this up. It's really, really straightforward. So what I have done is just created a simple
vanilla Xcode project and added some content views and it's something in the content view and
that is the string that we are going to use. A message for the alert and is that alert
presented and finally we have our scroll view with our text field so I can add this interactively and
this alert right over here. So now it's time to use this string in conjunction with our
active text. But before we do that of course you want to go ahead and download the resources
and then you will need to add in your active text library. So let's drag and drop this folder
right over here. Make sure you copy items if needed. Create groups and also check your target.
There we go. We have our active text right over here and now we will be able to use active text.
So let me just have some more room right over here and add active text and as you can see we have
an initializer and line of set and alignment are optional. They do have predefined values but let's
just use both of them so I just do option and return. So I have all over the properties here and
for the content let's just hit, let's just add in here our string value so it's a binding
of string. So @string, so @string line offset well zero is by default. I will just keep zero and
alignment you may have leading, trailing or center. By default we have a leading of
course, I will leave it as that but you want to make sure that you check out training and center also.
Now under transform you will have here it's a word and text tuple. So the word
is basically the word inside that string each of them and the text is basically the text view that
we get back. So let's just name this tuple a result and then we can add in here some code. So let's say
if we wanted to take a look at some hashtags. So in that case I would just ask if our results
dot word, so we want to take a look at the string dot first and that is a character equals a hash
then I want to do something and what do I actually want to do, well I want to take that text make it
bold, add a foreground color and also a tab gesture. Or whatever you'd like basically. I'm just going to
get a result and type out text. This is the view that we get from that one word and let's just
make it bold in our case and then let's have a foreground color and let's just make this, I don't
know maybe red. And then let's just have an on tab gesture and currently I'm just going to print out
tabbed. And yeah I'm just going to show the alert later on, but just you know whenever you do an
ontap gesture you can basically navigate away or do whatever action you like. Now if the word
doesn't contain a hash as its first character we want to do and go ahead with that text. So we just
go result dot text. So basically that is what we are going to do right over here. Let's build and
run and let's just add in here #rebeloper and there we go and let's add a plain text.
And now if I just type out, a tap on the plain text as you can see nothing happens inside my console.
If I tap on the actual #rebeloper it will say tabbed and it's that easy
to do. So now what if I wanted to have an @ and then, well let's just use multiple ones. Let's just
have an @, a mention and a hashtag also. For that I'm just going to use a switch statement.
So switch result dot word dot first. So case, so we are going to go through all of the cases.
Case this is an @ and then case if this is a # and we are also going to go with the default
value and the default value is the simplest one it is our simple result dot text and
in case of an @ sign so we are mentioning something I want to go and have a result dot
text dot bold and then have a foreground color of blue and then I want to have an on onTapGesture
and yeah I'm just going to use the messages right over here. So the message will be the actual
result dot word and I'm just going to toggle the is alert presented because that will just show
us our alert. Yeah, it's right over here. You can see I'm just having the message displayed
as tap, okay. So that's for the mentioning. What about the hashtags? As you can see here we had an
onTapGesture but we can add anything right over here. For example we can add a button and with that
button I'm going to use the one with the action and the label. Let me just have some more room here
and on the action and label I'm just going to do whatever we did on the tap gesture. So we are going
to set the message and pop up the alert and on the label I'm just going to use the result.text
and I'm pasting it there and instead of blue let's just use maybe orange, why not and
yeah basically that's it. We don't need the onTapGesture because the button is taking care
of our action. So let's just build and run and take a look at how differently we can handle the
mentions and the hashtags. So plain text. That's our plain text, okay. Now let's add @rebeloper
and then let's add a hash, I don't know SwiftUI, okay. So @rebeloper tabbed @rebeloper, okay.
and @SwiftUI tabbed #SwiftUI. That's really, really great, okay. So that's when we have
our first character inside our word. But what if we want to support and of course we do want to
support links. So in that case we want to have to look out for let's say HTTP. So let's do that.
I'm just going to leave this and append it to the else statement. So I'm just going to go if
result dot word. Again we're taking a look at that one word as a string and I'm just
going to check if it contains and HTTP, okay. If it contains HTTP let's do something, otherwise let's
do the check for all of this that I have already created. So let me just move that right over here.
So if it does have HTTP then what I want to do is just have a link. So we grab our result.text
and we actually want to replace it with a link view from SwiftUI. So let's do that. I'm just
going to use the replace with content. Now this is a part of Activetext. So, yeah this is not part of
SwiftUI. I'm just going to replace it with and we can just do whatever we want to do right over here.
So let's just use the one with the link title and destination. The title will be result dot word and
because active text is checking for spaces it's going to remove that space now on the actual
link that we are replacing with. We want to add a space and I just added this convenience method of
add space, that's just a simple space as a string added to the string of word. Now the destination
it needs to be a URL. So let's create our URL from our string value and that is our result dot word
and we need to bang that out because yeah it doesn't support options. So let's
build and run and let's start typing out some stuff right over here. So let's see @rebeloper.
That's great. #SwiftUI, that's also great, plain text,
okay. That's also great and then let's add an HTTPS maybe.
rebeloper.com, okay. That's great and let's tap on the mention. Let's tap on the SwiftUI
hash and now if we tap on the link of course, oh it's just corrected this to developer. Now let me
just do that rebeloper, there we go. Let's tap on that, there we go. We have our
DEV_FACTORY added right over here. 60 minute Zoom core with me. Okay! So that's one way to
add a link, but there is another way of adding a link because maybe you want to have a label for
that link. So now you just replace it with some arbitrary view but maybe you want to have
an image also, a system image you know the link system image. So let me just type
that out. So it's a result again, well grabbing the text it's still a view and then I'm going to
replace it with and the content in our case it will be a label with a title and a system image.
So the title will be result word add space. Let me just copy that out. So it will be faster
and the system image will be actually link. So let's see how this looks like. Well basically,
well I just did not add our write over there. Now we have a simple label. What we want to do
is create a link out of it. Now this could be a label, it could be an image and we
will see how you can add also like replacing the text with images, but for now it's a label
and we want to create an actual link out of it. Again a new view modifier from active text
it's called link and all you have to do is add a destination right over here and let's just see
result dot word is the destination and we also have an is button option, it's set to false by
default so I'm just going to have it right over here as true. So let's build and run and see
our custom-made link. So I'm not going to bother with the mentions and hashtags for now let me just
add HTTP and S, oh I need to have this as plain text and then HTTP, there we go. As you can see if
I type out HTTP we are going to get that really, really nice link right over there. HTTPS rebeloper
and hopefully it will not change that to developer.com. And if I tap let's say on that image.
It's going to take it right over there. Now we had a small issue where we had a small, not a small
h but a capital H right over here and it did not recognize it for that, yeah you maybe want to
have a word dot lowercase. That's the well and then I could just go ahead and type out also
upper case like HTTP and that is just going to render that out correctly.
Great! So that's how you can replace it with the label and create a link but I also want
to replace a whole word. So I'm just going to add another if else. So if something, if the result
dot text, oh sorry not the text but the word equals to and let's just have it as Swift. So if this is
the actual Swift and again I'm going to go with lowercase. So maybe this is with the capital S then
I'm going to replace. So a result dot text replace with and let's just have a horizontal
stack right over here with a spacing of zero and the content will be our image.
So image and then system name Swift. So that's our image and because this is a text you want to add
again a space after your image. So I'm just going to add a text and with a space string. So let's
build and run and see how this looks like. Oh I need an else right over here, else if.
Let's build and run, finally. We will be able to see. So let's just have maybe @rebeloper,
there we go. And now let's type out Swift. So Swift and then we have our Swift and of course you may
add a foreground color I'm just going to have a foreground color of mint, why not. I really like
the mint color and there we go. Let's just type out Swift and we have this added as an image.
So it's just really, really nice. Now you can take a look at Activetext at STORE.REBELOPER.COM/ACTIVETEXT
and if you do want to add in-app purchases into your iOS applications and
Android and web go ahead and check out my latest video on RevenueCat right over here.