Change Text Font Size on Button Click in React Native Programmatically

By default in react native applications the Text component font size should be set using fontSize Style, which is static and dose not change dynamically. But in this tutorial we would going to Change Text Font Size on Button Click in both Android and iOS applications using State value with ternary operator.

Contents in this project Change Text Font Size on Button Click in React Native :

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Import StyleSheet, Text, View and Button component in your project.

3. Create Constructor in your class with super(), Now declare a State named as ValueHolder and set its default value as true . This State is used to Change Text Font Size with Ternary operator.

4. Create a function named as SetStateValueFunction(), This function would used to set the State value on button click.

5. Create 1 Text component and 1 Button component in render’s return block.

We are Setting the font size with Ternary operator with State’s value, For example : If the State value is True then it will by default set the Text font size to 20 . If the State value is false then it will set the Font size as 40.

Calling the SetStateValueFunction() function on Button onPress event which would set the State value as False on click.

Below Screenshot would help you to understand how its handling using State :

6. Create CSS Style for Root View.

7. Complete source code for App.js File :

Screenshots in Android application :

Change Text Font Size

Screenshot in iOS mobile application :


  1. hello there…. thanks for the tutorial… just wanted to ask after making it bigger onpress… how to make it back to normal size again… maybe a timer??please help. thanks

    • Ayiz what actually you want to do you can also make it smaller on timer and also on button click, what is your requirement ?

      • SaiSuman Kanuganti

        When we click on it it makes font to 40 right so if we click on same button it should come back to font 20 so each and every time it should be 20 or 40 on each click .

  2. How to increase/decrease the font size in all the components globally when we click on button

Leave a Reply

Your email address will not be published. Required fields are marked *