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.

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, Text, View, Button } from ‘react-native’;

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.

<br />
constructor(){</p>
<p>    super() ;</p>
<p>    this.state = {</p>
<p>      ValueHolder : true</p>
<p>    }</p>
<p>  }

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.

<br />
SetStateValueFunction() {</p>
<p>    this.setState({</p>
<p>      ValueHolder : false</p>
<p>    });</p>
<p> }

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.

<br />
render() {<br />
    return (<br />
      <View style={styles.container}></p>
<p>        <Text style={{ fontSize: (this.state.ValueHolder === true ? 20 : 40) }} > Sample Text </Text></p>
<p>       <Button onPress={ this.SetStateValueFunction.bind(this) } title=”Click here to change font size” /></p>
<p>      </View><br />
    );<br />
  }

render() {

return (

<Text style={{ fontSize: (this.state.ValueHolder === true ? 20 : 40) }} > Sample Text </Text>

</View>

);

}

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

6. Create CSS Style for Root View.

<br />
const styles = StyleSheet.create({<br />
  container: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
    margin: 10<br />
  }<br />
});

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’,

margin: 10

}

});

7. Complete source code for App.js File :

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, Text, View, Button } from ‘react-native’;</p>
<p>export default class App extends Component<{}> {</p>
<p>  constructor(){</p>
<p>    super() ;</p>
<p>    this.state = {</p>
<p>      ValueHolder : true</p>
<p>    }</p>
<p>  }</p>
<p>  SetStateValueFunction() {</p>
<p>    this.setState({</p>
<p>      ValueHolder : false</p>
<p>    });</p>
<p> }</p>
<p>  render() {<br />
    return (<br />
      <View style={styles.container}></p>
<p>        <Text style={{ fontSize: (this.state.ValueHolder === true ? 20 : 40) }} > Sample Text </Text></p>
<p>       <Button onPress={ this.SetStateValueFunction.bind(this) } title=”Click here to change font size” /></p>
<p>      </View><br />
    );<br />
  }<br />
}</p>
<p>const styles = StyleSheet.create({<br />
  container: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
    margin: 10<br />
  }<br />
});