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:
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 |
Bjørn Egil Hansen (@bjornegil)
Fram X - a cross platform app company from Norway.