react-native-custom-styled-text

React Native component to use a variety of custom styles within a text. This is a port of react-native-custom-styled-text.

Installation

With npm:

npm i react-native-custom-styled-text

With yarn:

yarn add react-native-custom-styled-text

Usage

To use it, wrap up the texts you want to apply styles with '[' ']' You can apply to 1 or more styles to the text.

import CustomStyledText from 'react-native-custom-styled-text';

<CustomStyledText
  text="[Hello] Fancy [text]"
  style={styles.fontStyle}
  highlightStyle={[styles.firstCustomStyle, styles.secondCustomStyle]}
/>

const styles = StyleSheet.create({
  fontStyle: {
    fontSize: 30,
    fontWeight: 'bold',
  },
  firstCustomStyle: {
    color: 'red',
  },
  secondCustomStyle: {
    color: 'blue',
  },
});

And the CustomStyledText component will highlight all occurrences of terms wrapped within '[' ']'

Props

You can pass down all the Text props to the CustomStyledText Component.

highlightStyle props types can be TextStyle or TextStyle[].

If you want to apply 1 custom style, you can pass like highlightStyle={styles.customStyle}.

If you want to apply more than 2 custom styles, you can use like highlightStyle={[styles.firstCustomStyle, styles.SecondCustomStyle, ...]}.

Property	Type	Required?	Description
text	String	✓	text
style	TextStyle		Text's style
highlightStyle	TextStyle, TextStyle[]		1 or more custom style
...otherProps	any		react-native Text component props

License

MIT License