React Native component used to a variety of custom styles within a text. This is a port of react-native-custom-styled-text.
With npm:
npm i react-native-custom-styled-text
With yarn:
yarn add react-native-custom-styled-text
To use it, wrap up the texts which want to apply style with '[' ']' You can 1 or more style 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 which wrap up with '[' ']'
You can pass all Text style props like highlightStyle
to the Text component that is used as a wrapper '[' ']'.
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 |