Navigate back to the homepage

font weight in React Native

Infinitbility
Style
May 3rd, 2021 · 1 min read
font weight in React Native

Hi Devs’,

Welcome to infinitbility,

This article help you to use fontWeight in react native with their output example.

React Native provide fontWeight style props to make text look bolder in application.

let’s start today topic font weight in React Native Or how to use fontWeight in react native

fontWeight default value is normal use if developer not defined fontWeight for text.

Table of contents

  1. fontWeight Props
  2. fontWeight 100
  3. fontWeight 500
  4. fontWeight 900
  5. fontWeight bold

fontWeight Props

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.

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

fontWeight 100 example

let’s check fontWeight 100 example with output and compare with 500, 900, and bold value.

fontWeight100.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: '100',
23 }
24});
25
26export default LotsOfStyles;

Output

react native fontWaight 100

fontWeight 500 example

let’s check fontWeight 500 example with output and compare with 100, 900, and bold value.

fontWeight500.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: '500',
23 }
24});
25
26export default LotsOfStyles;

Output

react native fontWaight 500

fontWeight 900 example

let’s check fontWeight 900 example with output and compare with 100, 500, and bold value.

fontWeight900.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: '900',
23 }
24});
25
26export default LotsOfStyles;

Output

react native fontWaight 900

fontWeight bold example

let’s check fontWeight bold example with output and compare with 100, 500, and 900 value.

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

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]

More articles from Infinitbility

RGB in react native

RGB in react native

React Native Tutorial - how to use rgb() in react native

May 2nd, 2021 · 1 min read
Text align in react native

Text align in react native

React Native Tutorial - how to align text in react native

May 1st, 2021 · 1 min read
© 2021 Infinitbility
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]