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
and then
no need for quotation marks
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.
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