React Native Change Text Font Size on Button Click Example

Hello friends, In today’s tutorial we would learn about increasing and decreasing Text component size on button click in react native. This would be possible via State management. Now what we are doing is that on the fontSize style prop we would pass a State variable which value can be change dynamically on button onPress event. Now the main part is that we would Toggle the smaller and larger values. When first time click on button it will increase the Text font size now again when user clicks on button it will decrease the value. So in this tutorial we would learn about React Native Change Text Font Size on Button Click Example.

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

1. Open your project’s main App.js file and import useState, Text, StyleSheet, Button and SafeAreaView component.

import React, { useState } from 'react';

import { Text, StyleSheet, Button, SafeAreaView } from 'react-native';

import React, { useState } from 'react';

import { Text, StyleSheet, Button, SafeAreaView } from 'react-native';

2. Creating our main App component.

export default function App() {



}

export default function App() {

}

3. Creating 1 State named as FontSize with State update method setFontSize with default value of 20. This is our default text font size.

  // Default Text Font Size.
  const [FontSize, setFontSize] = useState(20);

1 2	// Default Text Font Size. const [FontSize, setFontSize] = useState(20);

4. Creating another State named as text with State update method setText with default Button above text. Now we would use this State to update button above text on font increase and decrease time.

  const [text, setText] = useState('Make Text Bigger');

1	const [text, setText] = useState('Make Text Bigger');

5. Creating a function named as letChangeTextSize(). In this function we would simply increase and decrease Text font values using Toggle. So this 1 function will do both work for us.

  const letChangeTextSize = () => {

    if (FontSize == 20) {
      setFontSize(32);
      setText('Make Text Smaller')
    } else {
      setFontSize(20);
      setText('Make Text Bigger')
    }
  }

const letChangeTextSize = () => {

if (FontSize == 20) {

setFontSize(32);

setText('Make Text Smaller')

} else {

setFontSize(20);

setText('Make Text Bigger')

}

6. Creating return() block, Now here we would make our Text component and Button component.

  return (
    <SafeAreaView style={styleSheet.MainContainer}>

      <Text style={[styleSheet.text, { fontSize: FontSize }]}>
        This is a Sample Text.
      </Text>

      <Button onPress={letChangeTextSize}
        title={text} />

    </SafeAreaView>
  );

return (

This is a Sample Text.

</Text>

<Button onPress={letChangeTextSize}

title={text} />

</SafeAreaView>

);

7. Creating Style.

const styleSheet = StyleSheet.create({

  MainContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },

  text: {
    textAlign: 'center',
    color: 'black',
    paddingBottom: 14
  }

});

const styleSheet = StyleSheet.create({

MainContainer: {

flex: 1,

alignItems: 'center',

justifyContent: 'center'

text: {

textAlign: 'center',

color: 'black',

paddingBottom: 14

}

});

8. Complete Source Code for App.js File :-

import React, { useState } from 'react';

import { Text, StyleSheet, Button, SafeAreaView } from 'react-native';

export default function App() {

  // Default Text Font Size.
  const [FontSize, setFontSize] = useState(20);

  const [text, setText] = useState('Make Text Bigger');

  const letChangeTextSize = () => {

    if (FontSize == 20) {
      setFontSize(32);
      setText('Make Text Smaller')
    } else {
      setFontSize(20);
      setText('Make Text Bigger')
    }
  }

  return (
    <SafeAreaView style={styleSheet.MainContainer}>

      <Text style={[styleSheet.text, { fontSize: FontSize }]}>
        This is a Sample Text.
      </Text>

      <Button onPress={letChangeTextSize}
        title={text} />

    </SafeAreaView>
  );
}

const styleSheet = StyleSheet.create({

  MainContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },

  text: {
    textAlign: 'center',
    color: 'black',
    paddingBottom: 14
  }

});