Skip to content

vinny-hyeon/react-native-custom-styled-text

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-custom-styled-text

React Native component used to 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 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 '[' ']'

screen shot 2015-12-19 at 8 23 43 am

Props

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

License

MIT License

About

reactnative custom styled text

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published