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.

Online demo on expo.io

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

yarn add react-native-styled-text

or

npm i react-native-styled-text

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

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

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.

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

The following default styles are defined:

Bjørn Egil Hansen (@bjornegil)

Fram X - a cross platform app company from Norway.