How to bold text in react native

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial wil help you to make text bold in react native, here you will get answer how to make tet bold in react native, manage bold text look in react native, how many options of bold text.

Let’s start today topic How to bold text in react native

Introduction

React Native provide fontWeight style to make text look like bold. Specifies font weight. The values ’normal’ and ‘bold’ are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.

Font Weight possible values to make text bold

Font Weight value and their meaning

Bold Text Example

Below Example we wil use fontWeight as a bold and check their output

fontWeightbold.js

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

const LotsOfStyles = () => {
    return (
      <View style={styles.textContainer}>
        <Text style={[styles.text, {fontSize: 50}]}>Infinitbility</Text>
        <Text style={styles.text}>We have the ability to build infinite way for us.</Text>
      </View>
    );
};

const styles = StyleSheet.create({
  textContainer: {
    flex: 1,
    justifyContent: 'center',
    padding: 20
  },
  text: {
    fontSize: 30,
    textAlign: 'center',
    fontWeight: 'bold',
  }
});

export default LotsOfStyles;

Output

Need more details and props value Example visit :- https://infinitbility.github.io/react-native/font-weight-in-react-native

Thanks For Reading…