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.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
constructor(){ super() ; this.state = { ValueHolder : true } } |
4. Create a function named as SetStateValueFunction(), This function would used to set the State value on button click.
|
1 2 3 4 5 6 7 8 9 |
SetStateValueFunction() { this.setState({ ValueHolder : false }); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
render() { return ( <View style={styles.container}> <Text style={{ fontSize: (this.state.ValueHolder === true ? 20 : 40) }} > Sample Text </Text> <Button onPress={ this.SetStateValueFunction.bind(this) } title="Click here to change font size" /> </View> ); } |
Below Screenshot would help you to understand how its handling using State :
|
1 2 3 4 5 6 7 8 |
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', margin: 10 } }); |
7. Complete source code for App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; export default class App extends Component<{}> { constructor(){ super() ; this.state = { ValueHolder : true } } SetStateValueFunction() { this.setState({ ValueHolder : false }); } render() { return ( <View style={styles.container}> <Text style={{ fontSize: (this.state.ValueHolder === true ? 20 : 40) }} > Sample Text </Text> <Button onPress={ this.SetStateValueFunction.bind(this) } title="Click here to change font size" /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', margin: 10 } }); |
Screenshots in Android application :
Screenshot in iOS mobile application :
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 ?
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 .
How to increase/decrease the font size in all the components globally when we click on button
Manisha you want to change all the text component size available in App ? Am I right ?