@rn-org/react-native-annotated-text

Style parts of text to improve readability, increase positive user experience, and encourage greater creativity through use of colors and fonts. Inspired from Jetpack Compose.

Fully compatible with TypeScript & Turbomodules.

Required React Native Version >=0.72.0

Supported platforms

Platform	Support
iOS	✅
Android	✅
Web	❌
Windows	❌
macOS	❌

Installation

npm install @rn-org/react-native-annotated-text @react-native-masked-view/masked-view react-native-linear-gradient

or

yarn add @rn-org/react-native-annotated-text @react-native-masked-view/masked-view react-native-linear-gradient

Style Text

Change text color

import { AnnotatedText } from '@rn-org/react-native-annotated-text';

<AnnotatedText
  annotatedString={(append, withStyle) => {
    withStyle({ color: "blue" }, () => append('Hello World'));
  }}
/>

Change text size

import { AnnotatedText } from '@rn-org/react-native-annotated-text';

<AnnotatedText
  annotatedString={(append, withStyle) => {
    withStyle({ fontSize: 20 }, () => append('Hello World'));
  }}
/>

Make text italic

Use the fontStyle parameter to italicize text.

import { AnnotatedText } from '@rn-org/react-native-annotated-text';

<AnnotatedText
  annotatedString={(append, withStyle) => {
    withStyle({ fontStyle: "italic" }, () => append('Hello World'));
  }}
/>

Make text bold

Use the fontWeight parameter to bold text (or set another FontWeight).

import { AnnotatedText } from '@rn-org/react-native-annotated-text';

<AnnotatedText
  annotatedString={(append, withStyle) => {
    withStyle({ fontWeight: "bold" }, () => append('Hello World'));
  }}
/>

Add multiple styles in text

import { AnnotatedText } from '@rn-org/react-native-annotated-text';

<AnnotatedText
  annotatedString={(append, withStyle) => {
    withStyle({ color: "blue" }, () => append('H'));
    append("ello ")
    withStyle({ color: "red" }, () => append('W'));
    append("orld")
  }}
/>

Gradient text

import { AnnotatedText } from '@rn-org/react-native-annotated-text';

<AnnotatedText
  annotatedString={(append, withStyle) => {
    withStyle(
      {},
      () => append('Hello World'),
      ['#FF0000', '#0000FF']
    );
  }}
/>

Normal + Gradient text

import { AnnotatedText } from '@rn-org/react-native-annotated-text';

<AnnotatedText
  annotatedString={(append, withStyle) => {
    withStyle({ fontSize: 24 }, () => append('Hello '));
    withStyle(
      { fontWeight: 'bold', fontSize: 24 },
      () => append('Gradient'),
      ['#FF0000', '#0000FF']
    );
    withStyle({ fontSize: 24 }, () => append(' World!'));
  }}
/>

How To Run Example App ?

To run example app, follow the below steps

1. Clone the repository
2. Do yarn install
3. For androidyarn example android
4. For iOS cd ios and do bundle exec pod install and run the iOS app from XCode