skip to Main Content

I have some react native code available in a string variable:

let customCode='<View><Text style={{fontSize:20}}>Hello World!</Text></View>'

How can I use this in my react native application and display the ‘View’ to the user.

Here’s my code –

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default const SimpleComponent = () => {
  let customCode='<View><Text style={{fontSize:20}}>Hello World!</Text></View>'

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World</Text>
      <View>{customCode}</View>
    </View>
  );
};

I used the customCode variable in my return part like this

return (
    <View style={styles.container}>
      <Text style={styles.text}>How are you</Text>
      <View>{customCode}</View>
    </View>
  );

but it just treats the customCode variable as a string instead of actual react native code.

3

Answers


  1. let customCode=<View><Text style={{fontSize:20}}>Hello World!</Text></View>
    

    and then

     <View>{customCode}</View>
    

    no need for quotation marks

    Login or Signup to reply.
  2. In React Native, you cannot directly render a string containing JSX code like you would in a web application.

    Just make your customCode a component.

    Login or Signup to reply.
  3. You may want to update your original question to clarify that you’re receiving the HTML as a string from an external source as the current code example is slightly misleading. However, I think I may know what you’re looking for.

    React Native docs suggest that you use WebView for cases like this.

    https://github.com/react-native-webview/react-native-webview

    See this answer for a bit more detail: https://stackoverflow.com/a/29365213/9407119

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search