1

For the past couple of weeks i'm trying to figure out how to include an external web app that does 3d modelling(Through THREE.js) into a viro react app. I tried webview and that works, but i need the model to be imported into my Viro App. I tried the WebViewBridge module (which in theory could send the .obj file as a string to my app from the webview so i can show it in AR) But it doesn't seem to work on the Native react version that Viro uses. 

            <View >
                <WebViewBridge                      
                    ref="webviewbridge"                 
                    source={{uri: 'http://www.google.com'}}>
                </WebViewBridge>
            </View>

When i change the "webviewbridge" for "webview" it works, it shows google in a new view if i press a button. My aim is to have the web app shown, and on a button click i can get the presented 3D model and show it in augmented reality (a feature of viro-react).

Technical info:

robertjuh
  • 311
  • 1
  • 2
  • 14
  • updating my react native and javascript code is probably not an option, it could create mismatches in version with my Viro-React module/framework. But i'm not sure about this, i broke my app a couple times by messing around with versions – robertjuh Mar 05 '18 at 09:07
  • the module importing seems to work fine, but the webview it presents just a black screen, and if i change it to a normal webview it will show a page with google. – robertjuh Mar 05 '18 at 09:18

1 Answers1

0

My bad, it uses "injectedJavaScript" prop now.

let jsCode = " document.querySelector('#myContent').style.backgroundColor = 'green';";

    return(
            <View style={localStyles.viroContainer}> //this just sets flex to 1


                <WebView
                    source={{ html: "<h1 id='myContent'>Hello</h1>" }}
                    style={{ flex: 1 }} 
                    ref={ webview => { this.webview = webview; }}
                    injectedJavaScript={jsCode}
                    javaScriptEnabled={true}>
                </WebView>

                <TouchableHighlight style={localStyles.overlayButton} 
                    onPress={this.sendMessageToWebView2} underlayColor='transparent'>
                        <Text>Send message to WebView</Text>
                </TouchableHighlight>

            </View>


        );
    }

I managed to get an alert with a string in my webview now on the buttonclick (sendmessagetowebview2), But i havent managed to change the injectedJavaScript yet.

robertjuh
  • 311
  • 1
  • 2
  • 14