0

I am moving a web app into React-native. My first time with the React universe, so it's a steep learning curve for an all around beginner.

I have my javascript running fine. The upshot is that my main function returns a string which, in javascript, I use to dynamically insert images into the DOM. I want to do the same in React-native but having trouble.

The result I get from the javascript is in this form:

    `<Image source={require("./images/pad.png")} style={{ width: 40, height: 318, flexDirection: "row" }} /><Image source={require("./images/banana1.png")} style={{ width: 20, height: 318, flexDirection: "row" }} /><Image source={require("./images/banana2.png")} style={{ width: 20, height: 318, flexDirection: "row" }} /><Image source={require("./images/banana3.png")} style={{ width: 20, height: 318, flexDirection: "row" }} />`

So it has the tags with the correct path and styles. But, when I try to insert this into a View I get a 

 "Invariant Violation: Text strings must be rendered within a <Text> component."

Not looking specifically for a written out solution, just hoping for someone to point me in the right direction. I am inserting the template literal into the Constructor and that all works fine. 

  <View>{this.state.bananasStr}</View>

I can access it from there, or from the javascript function as a variable.

Kelvin Aitken
  • 433
  • 6
  • 18
  • Instead of return a template, you should be returning a component. – Ace Jun 21 '19 at 05:03
  • Possible duplicate of https://stackoverflow.com/questions/51108640/how-to-convert-string-to-jsx-in-react-native – zilijonas Jun 21 '19 at 07:15
  • My issue stems from the fact that my string is a component, or at least a component in string form. If I paste in the string (without the backticks) it works fine. The solutions I found here are all about creating Text components using a string, where my string is a number of Image components, but react won't read it as such. – Kelvin Aitken Jun 21 '19 at 16:28

0 Answers0