Set Change Text Font Size in React Native Android iOS Tutorial

How to change text component font size in pixels in react native application using custom CSS style sheet class in both iOS and Android devices.

In react native font size can be customized through¬†fontSize style attribute. You can define any number of size in pixels according to your requirement and that will apply on your Text component. So let’s get started ūüôā .

Contents in this project Change Text Font Size in React Native :

  1. Start a fresh React Native project. If you don’t know how then read my this tutorial.
  2. Add StyleSheet, View and Text component in import block.
  3. Add View tag in render’s return block.
  4. Add inline style in View to make the all the Text component items align center.
  5. Add Three Text component inside View .
  6. Create StyleSheet just above the AppRegistry.registerComponent line.
  7. Inside StyleSheet create three classes named as One, Two and Three.
  8. Call each CSS class into each Text.
  9. Complete Source Code.

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

2. Add StyleSheet, View and Text component in import block.

3. Add View tag in render’s return block.

4. Add inline style in View to make the all the Text component items align center.

5. Add Three Text component inside View .

6. Create StyleSheet just above the AppRegistry.registerComponent line.

7. Inside StyleSheet create three classes named as One, Two and Three.

8. Call each CSS class into each Text.

9. Complete Source Code for index.android.js file :

Screenshot in iOS device :
Font Size

Screenshot in Android device :

Leave a Reply

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