font weight react native

Font Weight in React Native#

Font weight is an important aspect of typography in React Native. It determines how thick or thin the characters in a text appear. The font weight property is used to set the weight of the text.

The font weight property accepts numeric values ranging from 100 to 900, in increments of 100. The default value is 400, which is considered normal font weight. Higher values make the text bolder, while lower values make it lighter.

Setting Font Weight in React Native#

There are several ways to set font weight in React Native:

• Using the fontWeight property: This is the most common way to set font weight in React Native. It can be set inline or in a stylesheet. Here's an example:

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

const styles = StyleSheet.create({
  boldText: {
    fontWeight: 'bold',
  },
});

export default function App() {
  return (
    <Text style={styles.boldText}>Hello World!</Text>
  );
}

• Using custom fonts: If you're using custom fonts in your React Native app, you can specify the font weight in the font file itself. Here's an example:

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  boldText: {
    fontFamily: 'Montserrat-Bold',
  },
});

In this example, we're using the Montserrat-Bold font, which has a default font weight of 700.

Conclusion#

Font weight is an important aspect of typography in React Native. By using the fontWeight property or custom fonts, you can easily set the weight of your text to achieve the desired effect.