I have some text to show the user and I want to change style for some indiviual part of string.If the text is between "**" must have bold style.For example
{
title: 'Food inside a Bowl', url: 'https://www.myvarco.com/varco-images/screen-3.png',
description: "Lorem Ipsum is **simply dummy** text of the printing and **typesetting industry**.",
id: 2
},
How I can achieve this in react native
You can use a custom component like below I've added the check for start ** you can change the condition in anyway you want.
const CustomText = (props) => {
const arr = props.text.split(' ');
const reducer = (acc, cur, index) => {
let previousVal = acc[acc.length - 1];
if (
previousVal &&
previousVal.startsWith('**') &&
!previousVal.endsWith('**')
) {
acc[acc.length - 1] = previousVal + ' ' + cur;
} else {
acc.push(cur);
}
return acc;
};
const text = arr.reduce(reducer, []);
return (
<Text>
{text.map((text) => {
if (text.startsWith('**')) {
return (
<Text style={{ fontWeight: 'bold' }}>
{text.replaceAll('**', '')}{' '}
</Text>
);
}
return `${text} `;
})}
</Text>
);
};
export default function App() {
return (
<View style={styles.container}>
<CustomText text="Lorem Ipsum is **simply dummy** text of the printing and **typesetting industry**."/>
</View>
);
}
You can use a nested Text tag for different styles like below.
<Text style={{ fontWeight: '500' }}>Lorem Ipsum is<Text style={{fontWeight: '1000' }}>My Inner Text</Text></Text>
If you have a dynamic text you can use this module and define your pattern in regular expression
https://github.com/taskrabbit/react-native-parsed-text
or you can use source code only without installation.
https://github.com/taskrabbit/react-native-parsed-text/blob/master/src/ParsedText.js