React Native: Is it possible to have custom subviews in TextInput component?

Question

I'm trying to create a TextInput component that has a custom view when typing someone's name. For example, if the name is John, it will search for that string and add a view that contains John's profile image and his name inline with the text. Currently, when I make the view a child component of the TextInput component, nothing is displayed. That is, only the text component's children do appear.

I tried rendering various types of containers and elements in the TextInput component, but all of the above are not showing up in the render.

Answer 1

TextInput can only contain text. I would try wrapping the Image component and TextInput component in a line aligned view.

<View style={{flexDirection: "row", width: "100%", borderWidth: 1}}>
    <Image style={{height: 30, width: 30}} source={require("./your/image.path")}/>
    <TextInput style={{width: "75%"}}/>
</View>