react-native-custom-styled-text
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    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 '[' ']'

    screen shot 2015-12-19 at 8 23 43 am

    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

    Install

    npm i react-native-custom-styled-text

    DownloadsWeekly Downloads

    20

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    15.1 kB

    Total Files

    10

    Last publish

    Collaborators

    • bini0823