react-native-custom-styled-text v1.0.4

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, ...]}.

License

MIT License