I am new to React Native, now I want to make a sample project. I see there is an option for making a text bold by using 'fontWeight'.

I am Using expo.

But even if I use this property for my <Text> tag, I can't see any changes.

Can you suggest me any possibilities and solutions?

Here is what i tried.

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button, TouchableOpacity } from 'react-native';
import { Image } from 'react-native';
import { FlatList, ActivityIndicator } from 'react-native';

export default class Screen1 extends Component {
  //Screen1 Component
  constructor(props){
    super(props);
  }

  render() {

      return(
        <View style={{flex: 1, padding: 20}}>
          <Text style={{ fontWeight: 'bold' }} >Bold Text</Text>
        </View>
      )
    }

}

I am new to React Native, now I want to make a sample project. I see there is an option for making a text bold by using 'fontWeight'.

I am Using expo.

But even if I use this property for my <Text> tag, I can't see any changes.

Can you suggest me any possibilities and solutions?

Here is what i tried.

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button, TouchableOpacity } from 'react-native';
import { Image } from 'react-native';
import { FlatList, ActivityIndicator } from 'react-native';

export default class Screen1 extends Component {
  //Screen1 Component
  constructor(props){
    super(props);
  }

  render() {

      return(
        <View style={{flex: 1, padding: 20}}>
          <Text style={{ fontWeight: 'bold' }} >Bold Text</Text>
        </View>
      )
    }

}

• javascript
• react-native

3 Answers 3

your mistake in TEXT tag , try this

  <Text style={{ fontWeight: 'bold' }} >Bold Text</Text>

There isn't an issue with your style, your style is perfect as it is { fontWeight: 'bold' }, but your <Text/> ponent is not correctly.

<Text/>Bold Text</Text>

You have an extra '/' inside of your JSX ponent. It should be like this:

<Text>Bold Text</Text>

Want to see an example? https://snack.expo.io/@abranhe/bold-example

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

export default () => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text style={{ fontWeight: 'bold' }}>Bold Text</Text>
  </View>
);

By the way, you are also missing React from your imports, and it is required.

the issue was solved by changing my mobile's system font. I have changed my system font once. that was not accepting Bold. that was the issue.