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

$3

For simple styling StyledText supports some predefined styles:

- b: bold
- i: _italic_
- u: underline

Example:

``javascript
import { StyleSheet } from 'react-native';
import StyledText from 'react-native-styled-text';

...
style={styles.header}
>
{"Happy Styling!"}

...

const styles = StyleSheet.create({
header: {
fontSize: 24,
color: 'orange',
textAlign: 'center',
padding: 30,
},
});

`

Renders as

$3

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:

`javascript
import { StyleSheet } from 'react-native';
import StyledText from 'react-native-styled-text';

...
style={styles.welcome}
textStyles={textStyles}
>
{"Welcome to React Native Styled Text demo!"}

...

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:

`javascript
{'Happy Styling!'}
`

would be transformed to:

`javascript

Happy{' '}
Styling!

`

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 |

$3

Bjørn Egil Hansen (@bjornegil)

$3

Fram X - a cross platform app company from Norway.