5

A React Native component to individually style texts inside a text

 3 years ago
source link: https://reactnativeexample.com/a-react-native-component-to-individually-style-texts-inside-a-text/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

React Native Highlighted Text

A React Native component to individually style texts inside a text.

Getting Started

yarn add react-native-highlighted-text

npm install react-native-highlighted-text

Usage

With normal styles

normal-styles-example

Place the text you want to style in square brackets as shown in the example below.
[[Write your text here]]
Place all the styles you want into an array in the component's highlightedTextStyles attribute.
The bracketed text will be styled in the same order as the array styles.

import { HighlightedText } from  'react-native-highlighted-text'

<HighlightedText
  style={styles.text}
  highlightedTextStyles={[
    {
      fontSize:  16,
      fontWeight:  'bold',
      fontStyle:  'italic',
    },
    {
      fontSize:  22,
      color:  'red',
      textTransform:  'uppercase',
    },
  ]}
>
  Open up [[App.tsx]] to start working on your [[app!]]
</HighlightedText>
React TSX

With named styles

named-styles-example

Place all the styles you want inside an object in the component's highlightedTextStyles attribute.
In brackets, place the keys of the styling object you want, separated by a comma. Then add a = and then the text you want to style, as shown in the following example:
[[bold,red=Write your text here]]

import { HighlightedText } from  'react-native-highlighted-text'

<HighlightedText
  style={styles.text}
  highlightedTextStyles={{
    bold: {
      fontWeight:  'bold',
    },
    red: {
      color:  'red',
    },
    lg: {
      fontSize:  22,
    },
  }}
>
  Lorem, ipsum [[bold=dolor]] sit amet consectetur adipisicing
  [[red=elit]]. Quaerat ducimus dicta cum [lg=expedita]] consectetur quod
  tempore voluptatum autem aspernatur. [[bold,red,lg=Aliquid]].
</HighlightedText>
React TSX

GitHub

A React Native component to individually style texts inside a text — Read More

Latest commit to the main branch on 1-20-2021
Download as zip

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK