search

abolger / surveyjs-inside-react-native-webview

An exmaple React Native app project to show the necessary changes and working JS library dependencies necessary to nest a webview containing a SurveyJS survey INSIDE a React Native app. Turtles all the way down!
12 stars 6 forks source link

show blank screen on android apk release #4

Open AmandaDEn32 opened 5 years ago

AmandaDEn32 commented 5 years ago

<WebViewBridge ref="webviewbridge" style={{flex: 1, height: 500, justifyContent: 'center'}} source={{uri:"file:///android_asset/file_name.html"}} scalesPageToFit={false} scrollEnabled javaScriptEnabled onLoad={this.onLoad} onBridgeMessage={this.onBridgeMessage} />

it displays only html code and not the js files 

<html>
<head>
  <title>ReactNative WebViews iOS: Part 1</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, height=device-height">
  <link type="text/css" rel="stylesheet" href="jquery-ui.1.12.1.smoothness.css">
  <link type="text/css" rel="stylesheet" href="bootstrap.min.3.3.7.css">
  <link type="text/css" rel="stylesheet" href="w3.v4.css">
  <link type="text/css" rel="stylesheet" href="w3-theme-blue.v4.css">
</head>
<body>
  <div id="message"></div>
  <div id="surveyElement"></div>
  <div><p>test</p></div>//displays ony this part
  <script    src="jquery.3.2.1.min.js"></script>
  <script    src="jquery-ui.1.12.1.min.js"></script>
  <script    src="babel.min.from-babel-standalone-6.25.0.js"></script>
  <script    src="react.production.min.16.0.0-alpha.12.js"></script>
  <script    src="react-dom.min.from-react-native-0.46.1.js"></script>
  <script    src="survey.react.min.0.12.23.js"></script>
  <script    type="text/babel" src="mycustomsurvey.js"></script>
</body>
</html>
jdvvaghelaoffice commented 5 years ago

Please help to resolve this issue, I'm also getting the same issue in release app.

jdvvaghelaoffice commented 5 years ago

<WebViewBridge ref="webviewbridge" style={{flex: 1, height: 500, justifyContent: 'center'}} source={{uri:"file:///android_asset/file_name.html"}} scalesPageToFit={false} scrollEnabled javaScriptEnabled onLoad={this.onLoad} onBridgeMessage={this.onBridgeMessage} />

it displays only html code and not the js files

<html>
<head>
  <title>ReactNative WebViews iOS: Part 1</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, height=device-height">
  <link type="text/css" rel="stylesheet" href="jquery-ui.1.12.1.smoothness.css">
  <link type="text/css" rel="stylesheet" href="bootstrap.min.3.3.7.css">
  <link type="text/css" rel="stylesheet" href="w3.v4.css">
  <link type="text/css" rel="stylesheet" href="w3-theme-blue.v4.css">
</head>
<body>
  <div id="message"></div>
  <div id="surveyElement"></div>
  <div><p>test</p></div>//displays ony this part
  <script    src="jquery.3.2.1.min.js"></script>
  <script    src="jquery-ui.1.12.1.min.js"></script>
  <script    src="babel.min.from-babel-standalone-6.25.0.js"></script>
  <script    src="react.production.min.16.0.0-alpha.12.js"></script>
  <script    src="react-dom.min.from-react-native-0.46.1.js"></script>
  <script    src="survey.react.min.0.12.23.js"></script>
  <script    type="text/babel" src="mycustomsurvey.js"></script>
</body>
</html>

Use this code, this resolves my issues in release app. I've added allowFileAccessFromFileURLs={true} props to allow files in webview. Currently I don't know about iOS as I'm not aware of iOS coding.

<WebViewBridge ref="webviewbridge" style={{ flex: 1, height: 500, justifyContent: 'center' }} allowFileAccessFromFileURLs={true} source={{ uri: Platform.OS === 'android' ? 'file:///android_asset/Survey/survey.html' : 'file:///android_asset/Survey/survey.html' }} scalesPageToFit={false} scrollEnabled javaScriptEnabled onLoad={this.onLoad} onBridgeMessage={this.onBridgeMessage} />