Skip to content

WebView can't get correct mobile detection from Drupal website #15180

Closed
@kodatech

Description

  1. react-native-cli: 2.0.1
    react-native: 0.45.1
  2. node -v: v8.1.2
  3. npm -v:5.0.3

Target Platform: Android (using a Vodafone with Android 6.0 connected via USB)

Development Operating System: macOS Sierra

Steps to Reproduce

  1. Reaching site page with this code: render () { return ( <View style={styles.container}> <View style={styles.topbar}> <TouchableOpacity disabled={!this.state.canGoBack} onPress={this.onBack.bind(this)} > <Text style={this.state.canGoBack ? styles.topbarText : styles.topbarTextDisabled}>Go Back</Text> </TouchableOpacity> </View> <WebView ref={WEBVIEW_REF} style={{flex: 1}} source={{uri: ADDRESS}} // source={{uri: 'http://www.anzor.co.nz/'}} renderLoading={this.renderLoading} // onShouldStartLoadWithRequest={this.openExternalLink} onNavigationStateChange={this.onNavigationStateChange.bind(this)} startInLoadingState // userAgent='Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3' // javaScriptEnabled /> <View style={styles.bottombar}> <TouchableOpacity // disabled={!this.state.canGoBack} onPress={this.onReturn.bind(this)} > <View style={{flexDirection: 'row'}}> <Icon style={{fontSize: 30, paddingRight: 30, color: '#FFFFFF'}} name='md-barcode' /> <Text style={{color: '#FFFFFF', textAlignVertical: 'center', fontSize: 20}}>Return to Scanner</Text> </View> </TouchableOpacity> </View> </View> ) } }

  2. This scene was called from a different scene: return ( <Root> <Provider store={createStore(reducers, {conn}, applyMiddleware(ReduxThunk))}> <Router> <Scene key='welcomeScene' animation='fade' component={WelcomeScene} title='Welcome Scene' hideNavBar /> <Scene key='loginScene' animation='fade' component={LoginScene} title='Login Scene' hideNavBar /> <Scene key='listScene' animation='fade' type={ActionConst.REPLACE} component={ListScene} title='List Scene' hideNavBar /> <Scene key='scanScene' animation='fade' component={ScanScene} title='Scan Scene' hideNavBar /> <Scene key='homeScene' animation='fade' component={HomeScene} title='Home Scene' hideNavBar /> <Scene key='cartScene' animation='fade' component={CartScene} title='Cart Scene' hideNavBar /> </Router> </Provider> </Root> )

  3. I can reach the website page but I can't see it with mobile configuration.

  4. If I open the page from the same mobile device directly with chrome detection works as I want

  5. I have created a clean react native project from the scratch and just added a webview pointing to the page and works as it is expected, the same as point 4.

  6. I have enabled javaScriptEnabled, even it is true as default. No results

  7. I have added userAgent with same result as 7.

  8. I'm using react-native-router-flux and redux

Expected Behavior

Open page with webview and get configuraiton for mobile devices

Thanks in advance for your help!

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions