react native string replace with image

Question

I am currently working on a app where user can mention their friends. If user inputs something with @user1 I will get user1's image and display on the message.

Lets say if user types Hey @user1, whats up ? then in place of @user1, his thumbnail should be displayed.

User's thumbnail is in its username path somewhere like user1.jpg

function getTextWithThumb(str) { 
        var withThumb =  str.replace(userCheckRegex, `<Image source=require("../" + ${$&} + ".jpg") />`) 
        return withThumb
}

Here I am stucked at returning Image Component along with text dynamically out of react component.

<Text>{getTextWithThumb("Hey @user1, whats up ?")}</Text>

Which should give something like,

<Text> Hey <Image source="some_source" />, whats up ? </Text>

Is there any way I can achieve this ? Really need help here.

Thank you

you're returning a string literal, you should be returning a whole component. You should prepare your string first, and then pass it to the require call on the source property and return the entire <Image /> component, not a string literal wrapped in back ticks — Robbie Milejczak
– Robbie Milejczak, Commented Apr 27, 2018 at 18:58
Then the context you're doing this in is wrong. Where is getTextWithThumb is it a component method? If so what component is it on? Can you post the code? — Robbie Milejczak
– Robbie Milejczak, Commented Apr 27, 2018 at 19:11
No, its not component method. I want to replace a word in string with image returning a string that contains image — Green Eagle
– Green Eagle, Commented Apr 27, 2018 at 19:14
But strings can't contain images. See Colins answer, that is exactly what I described in my comment. You need to pass that Image component to some render function — Robbie Milejczak
– Robbie Milejczak, Commented Apr 27, 2018 at 19:33

Colin Burke · Accepted Answer · 2018-04-27 19:40:33Z

1

I think you want something like:

function getTextWithThumb(str) { 
  const imageSource = str.replace(userCheckRegex, `require(../${$&}.jpg)`);
  return <Image source=`${imageSource}`/>  
}

Then later:

<Text>{`Hey, ${getTextWithThumb("@user1")}, what's up?`}</Text>

As @Robbie mentioned, you might have to have your <Image /> within a <View> tag.

edited Apr 27, 2018 at 19:40

answered Apr 27, 2018 at 19:27

Colin Burke

17.3k13 gold badges57 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Green Eagle Over a year ago

I have updated the question for what I am looking for. str.replace replaces the characters, words in string. I want a image in text.

Colin Burke Over a year ago

I know, this function does that.

Robbie Milejczak Over a year ago

Deleted my answer since they are identical. I'm not sure if <Image /> is a valid child of <Text>

Robbie Milejczak Over a year ago

You could also try wrapping it all in a view tag <Text>Hey,</Text>{getTextWithThumb("@user1")}<Text>what's up?</Text> wrapped in a <View /> with flex direction set to row but that will take a bit of styling to get it to look nice

Green Eagle Over a year ago

@RobbieMilejczak it is valid child of Text

Collectives™ on Stack Overflow

react native string replace with image

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related