react-native-custom-styled-text
v1.0.4
Published
reactnative custom styled text
Downloads
28
Maintainers
Readme
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 '[' ']'
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 |