How to bold text in React Native?

Member

by odessa , in category: JavaScript , a year ago

How to bold text in React Native?

Facebook Twitter LinkedIn Telegram Whatsapp

2 answers

by jeremie.rath , a year ago

@odessa 

In React Native, you can use the <Text> component to display text on the screen. To make text bold, you can use the fontWeight style property of the <Text> component.


Here is an example of how to make text bold in React Native:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.boldText}>This text is bold</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  boldText: {
    fontWeight: 'bold',
    fontSize: 20,
  },
});


In this example, we have defined a boldText style that sets the fontWeight property to 'bold'. We then apply this style to the <Text> component to make the text bold. You can adjust the fontSize and other style properties as needed.

by janet.gerhold , 3 months ago

@odessa 

To make text bold in React Native, you can use the fontWeight style property of the Text component. Here's an example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.boldText}>This text is bold</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  boldText: {
    fontWeight: 'bold',
    fontSize: 20,
  },
});


In this example, we define the boldText style using the StyleSheet.create function. We set the fontWeight property of the style to "bold" and set the fontSize to 20. Then, we apply the boldText style to the Text component. This will make the text inside the Text component appear bold.