Navigate back to the homepage

How to bold text in react native

Infinitbility
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

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

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

Font Weight value and their meaning

Font WeightWeight meaning
100Thin
200Ultra Light
300Light
400Regular
500Medium
600Semibold
700Bold
800Heavy
900Black

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';
3
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 );
11};
12
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 }
24});
25
26export default LotsOfStyles;

Output

react native fontWaight bold

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

Thanks For Reading…

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]

Tutorials

React Native

Categories

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–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]