How we can bold some words in TextInput component React Native?

Question

I want something feature in textInput like if we write hello then hello should be bold in the textinput and remaining words will be normal. Can someone help me out with it?

It's something different from Text Component, which mentioned in below link.

https://stackoverflow.com/questions/35718143/react-native-add-bold-or-italics-to-single-words-in-text-field

Does this answer your question? [React Native add bold or italics to single words in field](https://stackoverflow.com/questions/35718143/react-native-add-bold-or-italics-to-single-words-in-text-field) — Hassan Kandil, Jan 31 '22 at 13:10
No, it's for Text Component and I am talking about TextInput — Muhammad Rafeh Atique, Jan 31 '22 at 13:49

Hassan Kandil · Accepted Answer · 2022-02-06T09:57:30.767

You will have to make custom textInput component, something like this:

const [txt,setTxt] = useState("");
        <Pressable>
            <TextInput placeholder="Type Something..." onChangeText={(value)=>setTxt(value)}/>
                <View style={{flexDirection: 'row'}}>
                    {txt.split(" ").map((text)=><Text style={{fontWeight:text == "bold"?'bold':null}}>{text+" "}</Text>)}
                </View>
        </Pressable>

Replace text == "bold" with any value that you want to make bold.

Edit: if you want to make more than one word bold, group them in an array and update your condition like this:

const anArrayOfBoldStrings = ["bold","hello","stackoverflow"];

            <Pressable>
                <TextInput placeholder="Type Something..." onChangeText={(value)=>setTxt(value)}/>
                    <View style={{flexDirection: 'row'}}>
                        {txt.split(" ").map((text)=><Text style={{fontWeight:text == anArrayOfBoldStrings.includes(text?'bold':null}}>{text+" "}</Text>)}
                    </View>
            </Pressable>

How we can bold some words in TextInput component React Native?

1 Answers1