Navigate back to the homepage

How to bold text in react native

React Native
August 2nd, 2021 · 1 min read
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


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

enum(normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900)auto

Font Weight value and their meaning

Font WeightWeight meaning
200Ultra Light

Bold Text Example

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


1import React from 'react';
2import { StyleSheet, Text, View } from 'react-native';
4const 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 );
13const styles = StyleSheet.create({
14 textContainer: {
15 flex: 1,
16 justifyContent: 'center',
17 padding: 20
18 },
19 text: {
20 fontSize: 30,
21 textAlign: 'center',
22 fontWeight: 'bold',
23 }
26export default LotsOfStyles;


react native fontWaight bold

Need more details and props value Example visit :-

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.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide



More articles from Infinitbility

How to clean gradle in react native

How to clean gradle in react native

React Native clean gradle example

August 2nd, 2021 · 1 min read
How to blur background in react native

How to blur background in react native

React Native blur effect

August 1st, 2021 · 1 min read
© 2020–2022 Infinitbility
Link to $ to $ to $ to $ to $ to $mailto:[email protected]