react-native-spannable-string
v1.0.0
Published
The simple Text builder for multiple styling in single Text component
Downloads
60
Readme
react-native-spannable-string
The simple Text builder for multiple styling in single Text component
How do you make this?
Verbose way 😓
<Text style={{ fontSize: 24 }}>
Using <Text style={{ fontWeight: 'bold', fontSize: 24 }}>Bold</Text>{' '}
in Text
</Text>
SpannableBuilder way 🔥
SpannableBuilder.getInstance({ fontSize: 24 })
.append('Using ')
.appendBold('Bold')
.append(' in Text')
.build()
Contents 🏆
Install 💠
npm i react-native-spannable-string
or
yarn add react-native-spannable-string
Usage 📌
- Create
SpannableBuilder
instance
Instantiate SpannableBuiler
instance with static getInstance
function.
getInstance
receive TextStyle
parameter for base style used by SpannableBuilder
SpannableBuilder.getInstance({ fontSize: 24 })
We can also instantate it with Text
component with getInstanceWithComponent
like this.
SpannableBuilder.getInstanceWithComponent(Text)
// or custom Text component
type Props = { fontFamily: string } & TextProps;
function MyText({fontFamily = 'NotoSansKR-Bold', ...rest}: React.PropsWithChildren<Props>) {
const { style, children, ...withOutStyle } = rest;
return (
<Text style={[style, { fontFamily: fontFamily }]} {...withOutStyle}>
{children}
</Text>
);
}
SpannableBuilder.getInstanceWithComponent(MyText)
- Append your texts with spannable free
<View style={{ marginVertical: 64 }}>
{SpannableBuilder.getInstance({ fontSize: 24 })
.append('Using ')
.appendBold('Bold')
.append(' in Text')
.build()}
{SpannableBuilder.getInstance({ fontSize: 24 })
.append('Using ')
.appendItalic('Italic')
.append(' in Text')
.build()}
{SpannableBuilder.getInstance({ fontSize: 24 })
.append('Using ')
.appendColored('Color', 'red')
.append(' in Text')
.build()}
{SpannableBuilder.getInstance({ fontSize: 24 })
.append('Using ')
.appendCustom('Custom Style', {
textShadowColor: 'blue',
textShadowRadius: 8,
})
.append(' in Text')
.build()}
</View>
// Sample Title
SpannableBuilder.getInstance({ fontSize: 44 })
.appendColored('S', 'red')
.appendItalic('p')
.appendCustom('a', {
fontSize: 30,
textShadowColor: 'blue',
textShadowRadius: 12,
})
.appendColored('n', 'orange')
.appendCustom('n', {
fontSize: 22,
textDecorationLine: 'underline',
})
.appendColored('a', 'skyblue')
.appendCustom('b', {
backgroundColor: 'black',
color: 'white',
fontSize: 22,
})
.appendCustom('l', { fontSize: 18, color: 'red' })
.appendBold('e ')
.build(),
Change Logs 🔧
- 1.0.0
- First Release 🔥