React Native Rendering html got error =>Error opening URL: , [Error: Unable to open URL ~

Question

Im using RN, EXPO and 'react-native-render-html' library to render HTML source.

I think I got raw html perfetcly, but when I pass it to HTML tag like this

<HTML html={this.state.html}

I got error like this

Error opening URL: , [Error: Unable to open URL: file:///Users/wook/Library/Developer/CoreSimulator/Devices/ 1C8EB2FA-E386-4A53-B136-564DD66A9F86/data/Containers/Bundle/Application/7B6CBBAD-1F30-48BD-86BB-E536E572854D/Exponent-2.15.3.tar.app/hiddenForm.jsp]

I actually did many things in similar questions on stackoverflow but I cant debug it

any one can help me please?

under is my code

import React from 'react';
import { StyleSheet, Text, View, Button, TextInput, ScrollView, Dimensions } from 'react-native';
import { createAppContainer, ThemeColors } from "react-navigation";
import { createStackNavigator } from 'react-navigation-stack';
import axios from "axios";
import HTML from 'react-native-render-html';

class Educlass extends React.Component {
  state = {
    'html':''
  }
  componentDidMount() {
      const { navigation } = this.props;
      const edu_html = navigation.getParam('html');
      var myPromise = Promise.resolve(edu_html);
      myPromise.then((value) => { this.setState({'html': value} )})
  } 

  render() {

    return (
      <ScrollView style={styles.container}>
        <HTML html={this.state.html} imagesMaxWidth={Dimensions.get('window').width} />
        {/* <Text> {this.state.html} </Text> */}
        <Text>ad</Text>
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
})

export default Educlass;

and this is App.js

import React from 'react';
import { StyleSheet, Text, View, Button, TextInput, ScrollView, Dimensions } from 'react-native';
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from 'react-navigation-stack';
import DetailsScreen from "./DetailScreen";
import Educlass from "./Educlass";
import axios from "axios";
import HTML from 'react-native-render-html';

class HomeScreen extends React.Component {
  constructor() {
    super()
    this.state = {
      ID: '',
      PW: '',
      // html : ''
    }
  }

  Login = async (ID, PW) => {
    // _clear_Cookie();
    const RCTNetworking = require('react-native/Libraries/Network/RCTNetworking');
    RCTNetworking.clearCookies((result) => { console.log(result) }); //true if clear

    const params = {
      '_enpass_login_': 'submit',
      'langKnd': '',
      'returnUrl': '',
      'loginType': 'normal',
      'ssoId': ID,
      'password': PW,
    }

    try {
      var res1 = await axios({
        url: 'https://portal.uos.ac.kr/user/loginProcess.face',
        method: 'POST',
        params: params,
      }, { withCredentials: true })
      if (res1.status === 200) {
        var res2 = await axios({
          url: 'http://psso.uos.ac.kr/enpass/login?gateway=client&service=http://club.uos.ac.kr/service/sso/sso_login.jsp',
          method: 'GET',
        }, { withCredentials: true })
        if (res2.status === 200) {
          var res3 = await axios({
            url: "http://club.uos.ac.kr/service/index.jsp",
            method: "POST"
          }, { withCredentials: true },{ responseType: 'text' }).then((response) => response.data)
        }
      }
    } catch (error) {
      console.log(error);
    }
    return (res3)
  };

  // _clear_Cookie() {
  //   const RCTNetworking = require('react-native/Libraries/Network/RCTNetworking');
  //   RCTNetworking.clearCookies((result) => { console.log(result) }); //true if clear
  // };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.IDtext}>ID</Text>
        <TextInput
          style={styles.IDinput}
          placeholder="ID"
          autoCapitalize='none'
          onChangeText={(ID) => this.setState({ 'ID': ID })}
        />
        <Text> {this.state.ID} </Text>

        <Text style={styles.PWtext}>Password</Text>
        <TextInput
          style={styles.PWinput}
          // secureTextEntry={true}
          placeholder="PW"
          autoCapitalize='none'
          onChangeText={(PW) => this.setState({ 'PW': PW })}
        />
        <Text> {this.state.PW} </Text>

        <Button title="Log In" onPress={() => {
          // _html = this.Login(this.state.ID, this.state.PW);
          // this.setState({ 'html': _html })
          this.props.navigation.navigate("Edu", {
            'html': this.Login(this.state.ID, this.state.PW)
          });
        }} />

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  IDtext: {},
  IDinput: {
    borderWidth: 1,
    borderColor: '#777',
    padding: 8,
    margin: 10,
    width: 200
  },
  PWtext: {},
  PWinput: {
    borderWidth: 1,
    borderColor: '#777',
    padding: 8,
    margin: 10,
    width: 200
  }
})

const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Edu: { screen: Educlass },
    Detail: { screen: DetailsScreen }
  },
  {
    initialRouteName: "Home"
  }
)


export default createAppContainer(AppNavigator);

I think there are many problems in my code because Im new to RN but thanks to solve my problem(rendering html)

please update the title for this question, as to get better results quickly — Draconar
– Draconar, Commented Apr 20, 2020 at 13:33

checklist · Accepted Answer · 2023-01-23 09:22:47Z

2

Use WebView instead of html renderer if you want to render from an external uri

npm install --save react-native-webview
import { WebView } from 'react-native-webview';
<WebView source={{html: '<p>Here I am</p>'}} />
<WebView
    source={{ uri: 'https://emir.drh' }}
  />

firstone for handling the internal htmls,second one for the uris i wish it helps

edited Jan 23, 2023 at 9:22

checklist

13.1k16 gold badges65 silver badges109 bronze badges

answered Apr 20, 2020 at 8:46

Amir Doreh

1,4261 gold badge16 silver badges27 bronze badges

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

1 Comment

공경욱 Over a year ago

Hey Thanks for your comment I tried it already but it also failed :(

Collectives™ on Stack Overflow

React Native Rendering html got error =>Error opening URL: , [Error: Unable to open URL ~

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related