CODEWITHSUNDEEP
react-nativetextrenderreact-props
mss
mss

Reputation: 177

How do I set some text to bold in React-Native?

I know that how set some text bold like below.

<Text>I am<Text style={{fontWeight:bold}}>a developer</Text></Text>

But I need how use from props.

Example, 

  <FlatList
          data={[{
            title: 'I am<Text style={styles.bold}>a developer</Text>',
            key: 'item1',
            id: 1
          }]}
          extraData={this.state}
          renderItem={this._renderItem}
        />

Title in FlatList is used in _renderItem.

<Text>this.props.title</Text>

But it's displayed on screen of device like below.

I am<Text style={styles.bold}>a developer</Text>

The title in props is rendered just String.

Upvotes: 0

Views: 4610

Answers (1)

Dyo
Dyo

Reputation: 4464

I suppose you should pass a jsx to title prop :

title: {<Text>I am <Text style={{fontWeight:bold}}>a developer</Text></Text>}

Edit: If this is not working you can separate your title in 2 props :

<FlatList
    data={[{
      title: 'I am',
      titleBold: 'a developer'
      key: 'item1',
      id: 1
    }]}
    extraData={this.state}
    renderItem={this._renderItem}
 />

Then display it like this in _renderItem :

<Text>{this.props.title}<Text style={styles.bold}>{this.props.titleBold}</Text></Text>

Upvotes: 1

Related Questions