Nanoscale Parts Manufacturing

    react-native-styled-text

    2.0.0 • Public • Published

    Styled Text for React Native

    Introduction

    The purpose of this library is to support easy rendering of mixed text styles.

    The library implements a StyledText component taking an HTML-like string in the children property and an optional text styles property.

    Try it out

    Online demo on expo.io

    Installation

    To install the library into your project, run yarn or npm:

    yarn add react-native-styled-text

    or

    npm i react-native-styled-text

    Examples

    Using default styles

    For simple styling StyledText supports some predefined styles:

    • b: bold
    • i: italic
    • u: underline

    Example:

    import { StyleSheet } from 'react-native';
    import StyledText from 'react-native-styled-text';
    
    ...
      <StyledText
        style={styles.header}
      >
        {"Ha<i>pp</i>y <b>Styling</b>!"}
      </StyledText>
    ...
    
    const styles = StyleSheet.create({
      header: {
        fontSize: 24,
        color: 'orange',
        textAlign: 'center',
        padding: 30,
      },
    });

    Renders as

    Using custom styles

    For richer styling, you set the textStyles property of StyledText to an object (e.g. StyleSheet) containing your custom text styles and apply these styles in the text property.

    Example:

    import { StyleSheet } from 'react-native';
    import StyledText from 'react-native-styled-text';
    
    ...
      <StyledText
        style={styles.welcome}
        textStyles={textStyles}
      >
        {"Welcome to <b><u>React Native</u> <demo><i>Styled</i> Text</demo></b> demo!"}
      </StyledText>
    ...
    
    const styles = StyleSheet.create({
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        padding: 30,
      },
    });
    
    const textStyles = StyleSheet.create({
      demo: {
        textShadowOffset: { width: 2, height: 2 },
        textShadowColor: '#555555',
        textShadowRadius: 6,
        fontSize: 24,
        color: '#22AA44',
      },
    });

    Renders as

    How it works

    Internally, the render function of StyledText parses the value of the children property, which must be a string, and returns a nested structure of React Native Text components.

    From the example above:

    <StyledText style={styles.header}>{'Ha<i>pp</i>y <b>Styling</b>!'}</StyledText>

    would be transformed to:

    <Text style={styles.header}>
      Ha<Text style={defaultStyles.i}>pp</Text>y{' '}
      <Text style={defaultStyles.b}>Styling</Text>!
    </Text>

    So StyledText just provides a more compact, readable and flexible coding of nested Text components.

    API

    In addition to the React Native Text properties, StyledText supports the following properties, with a restriction on the children proerty:

    Name Description
    children String with style tags for mixed styling of the text. Each style tag must match one of the styles provided in textStyles or one of the default styles, see below. (Optional)
    textStyles Object (e.g. StyleSheet) containing definition of the styles used in the provided text. (Optional)

    The following default styles are defined:

    Name Description
    b bold
    i italic
    u underline

    Contributors

    Bjørn Egil Hansen (@bjornegil)

    Sponsors

    Fram X - a cross platform app company from Norway.

    Install

    npm i react-native-styled-text

    DownloadsWeekly Downloads

    944

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    26.9 kB

    Total Files

    14

    Last publish

    Collaborators

    • bjorn_egil