Dynamically change text font weight upon component tap?

Question
#1

Hi all, this is definitely a major beginner question here but I’ve tried reading a lot of forums/watching tutorials and YouTube videos and still can’t quite get my logic to work.

I’m trying to create logic such that when the “dining” text is tapped it makes the font weight of the “dining” text be 700 and the “events” text be 100, and when the “events” text is tapped it makes the font weight of “events” be 700 and the font weight of the “dining” text be 100.

I created two page variables: diningFont with an initial value of 700 and eventFont with an initial value of 100. I then set font weight to be bound to each of these page variables for both the “dining” and “events” text. This is how it looks in its default state in the composer.

image

Here is my logic for the “dining” text as well. The “events” text is the same but with the font weights reversed.

image
image745×188 8.12 KB

However, upon previewing my app on my phone, both font weights default to 100 and nothing happens when I tap them despite the composer preview actually showing different font sizes.

What am I doing wrong? Thanks for the help here.

#2

Hey,

So you are binding the variables to the font weight of each text? You could try making sure that those page variables are integer text types. I was able to get it working with another logic flow so it’s possible, but let’s see if we get your way working first :slight_smile:

#3

Hi Cecilia! Thanks for your help here. I changed both to integer text but still no success. I’m more than happy to try with your logic flow. Could you show me how you approached this?

#4

Sure! My example is quite simple but it can be tweaked to fit your use case:

  • I have a text type page variable font_weight that has initial value bold

  • I have a button with Set page variable after the Component tap with the formula: IF(pageVars.text_weight == "bold", "light", "bold") so by clicking it the page var changes from light to bold vice versa

  • For the text I want to change, I set the following formula to the Font weight property: IF(pageVars.text_weight=="bold", "700", "400")

1 Like
#5

It works! Thank you, Cecilia!

1 Like