How to Change Set Text Font Size in React Native Example

Hello friends, In this tutorial we would learn about changing fontSize in react native for both Android & iOS platforms. In react native the Text component support fontSize property or attribute to changing the text size in pixels. The supported value for fontSize is Number. So in this tutorial we would learn about How to Change Set Text Font Size in React Native Example.

Contents in this project How to Change Set Text Font Size in React Native Example :-

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

import React from 'react';

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

import React from 'react';

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

2. Creating main component named as App. Here we would make 4 Text component in the return() block. In this example we are applying fontSize on 2 Text components using inline styling and another 2 we’re using custom styling.

export default function App() {

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

      <Text style={{ fontSize: 25, color: 'red' }}> Set fontSize in React Native </Text>

      <Text style={{ fontSize: 25 }}> Sample Text 1 </Text>

      <Text style={styleSheet.text1}> Sample Text 2 </Text>

      <Text style={styleSheet.text2}> Sample Text 3 </Text>

    </View>
  );
}

export default function App() {

return (

<Text style={{ fontSize: 25, color: 'red' }}> Set fontSize in React Native </Text>

<Text style={{ fontSize: 25 }}> Sample Text 1 </Text>

<Text style={styleSheet.text1}> Sample Text 2 </Text>

<Text style={styleSheet.text2}> Sample Text 3 </Text>

</View>

);

}

3. Creating style.

const styleSheet = StyleSheet.create({

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

  text1: {
    fontSize: 28
  },

  text2: {
    fontSize: 30
  }

});

const styleSheet = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: 'center',

alignItems: 'center'

text1: {

fontSize: 28

text2: {

fontSize: 30

}

});

4. Complete Source Code for our React Native Project’s Main App.js File :-

import React from 'react';

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

export default function App() {

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

      <Text style={{ fontSize: 25, color: 'red' }}> Set fontSize in React Native </Text>

      <Text style={{ fontSize: 25 }}> Sample Text 1 </Text>

      <Text style={styleSheet.text1}> Sample Text 2 </Text>

      <Text style={styleSheet.text2}> Sample Text 3 </Text>

    </View>
  );
}

const styleSheet = StyleSheet.create({

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

  text1: {
    fontSize: 28
  },

  text2: {
    fontSize: 30
  }

});