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
Type | Default |
enum(normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900) | auto |
Font Weight value and their meaning
Font Weight | Weight meaning |
100 | Thin |
200 | Ultra Light |
300 | Light |
400 | Regular |
500 | Medium |
600 | Semibold |
700 | Bold |
800 | Heavy |
900 | Black |
Bold Text Example
Below Example we wil use fontWeight
as a bold and check their output
fontWeightbold.js
1import React from 'react';2import { StyleSheet, Text, View } from 'react-native';34const LotsOfStyles = () => {5 return (6 <View style={styles.textContainer}>7 <Text style={[styles.text, {fontSize: 50}]}>Infinitbility</Text>8 <Text style={styles.text}>We have the ability to build infinite way for us.</Text>9 </View>10 );11};1213const styles = StyleSheet.create({14 textContainer: {15 flex: 1,16 justifyContent: 'center',17 padding: 2018 },19 text: {20 fontSize: 30,21 textAlign: 'center',22 fontWeight: 'bold',23 }24});2526export default LotsOfStyles;
Output

Need more details and props value Example visit :- https://infinitbility.com/react-native/font-weight-in-react-native
Thanks For Reading…
Follow me on Twitter
Join our email list and get notified about new content
No worries, I respect your privacy and I will never abuse your email.
Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.