0

I want to a notification to pop up on the screen if someone tries to view my webpage on a mobile browser, telling them that it should not be possible. I initially tried to hard code this into the App.js class, but decided to use a component. However, when I try to see if going to mobile (via Edge's emulation available from right click + inspect element), no notification shows.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { render } from 'react-dom'
import { Provider as AlertProvider } from 'react-alert'
import AlertTemplate from 'react-alert-template-basic'
import { useAlert } from 'react-alert'
import { isMobile } from 'react-device-detect';
import { Alert } from 'reactstrap';
import { UncontrolledAlert } from 'reactstrap';

class Disclaimer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      visible: true
    };

    this.onDismiss = this.onDismiss.bind(this);
  }

  onDismiss() {
    this.setState({ visible: false });
  }

  render(){
      return(
        <Alert color="danger" isOpen={this.state.visible} toggle={this.onDismiss}>
          This webpage is not optimized for mobile.
        </Alert>
      );


    }
  }
}

export default Disclaimer;

I ultimately call this component to be returned in App.js, but I can't see it. However, when I look at 'elements,' I do see it in the hierarchy, and there is a place on the screen it gives an outline, but nothing visible in terms of what the alert should do. I do have a .css file for the alert, but its just font-family and text-align.

UPDATE: I also have tried doing this in the App.js render() method:

<MobileView>
<button
  onLoad={() => {
    if(isMobile){
      alert.show('This page is not optimized for mobile!')
    }
  }}
>
  Show Alert
</button>
</MobileView>

I changed it from button to alert, and can't see anything. That being said, when I use a browser, simulate mobile, and then inspect element, where I go to elements and styles, I can uncheck the box that has "opacity 0" or edit the value. How can I do that in the code, assuming I change button to Alert???

user11039951
  • 141
  • 9
  • 2
    Are there any errors in the console? – apokryfos Feb 14 '19 at 14:28
  • 1
    I am pretty sure the `else` case is executed here. – Chris Feb 14 '19 at 14:29
  • when I uncomment the first return statement in the if case and comment out the attempt at alert, it DOES execute when I change the screen to mobile @Chris. There are no errors in the condole – user11039951 Feb 14 '19 at 14:31
  • Does this have anything to do with your [previous question](https://stackoverflow.com/q/54677536/1813169)? – MTCoster Feb 14 '19 at 15:16
  • Since you’re already using `react-device-detect`, why not use the wrapper element `` instead of a conditional? – MTCoster Feb 14 '19 at 15:19
  • 1
    Looking into the documentation of `isMobile`, it seems it uses User Agent to detect device type. However, User Agent does not have to change when you only simulate it through browser. I would recommend to use window size instead. Also, since the detection uses constants, you also need to reload your page after changes. – Sulthan Feb 14 '19 at 15:20
  • @MTCoster I've tried putting a ` – user11039951 Feb 14 '19 at 15:44
  • OK now I can see where it should be when exploring elements but still nothing actually visible to a user. – user11039951 Feb 14 '19 at 16:15
  • @MTCoster any answer? – user11039951 Feb 15 '19 at 14:15
  • Did you try viewing the page on an actual mobile device? – MTCoster Feb 15 '19 at 14:18
  • @MTCoster there is no way to do it when I'm developing the code on VS Code and running it from there – user11039951 Feb 15 '19 at 14:33
  • 1
    Sure there is - [access it using your computer’s IP address](https://stackoverflow.com/q/19482164/1813169) on a mobile device connected to the same network. So if you normally use `http://localhost:4000/myPage`, you’d use `http://xxx.xxx.xxx.xxx:4000/myPage` – MTCoster Feb 15 '19 at 14:35
  • I mean I can get a button to show up, but I want an alert. When I replace button with alert in the UPDATE, nothing shows @MTCoster – user11039951 Feb 15 '19 at 14:43
  • If a button works but an alert doesn’t, the problem isn’t with the code you’ve posted here - it’s in your `Alert` class – MTCoster Feb 15 '19 at 14:44
  • @MTCoster that being said, on an actual mobile device, there is invisible text with what I want, but I only see nit bc I highlight it, copy, and paste elsewhere. – user11039951 Feb 15 '19 at 14:47
  • @MTCoster I've found out some more, please see my recent update – user11039951 Feb 15 '19 at 15:07
  • Not sure if it’ll fix the problem, but there’s no need to use `if (isMobile)` *inside* `` – MTCoster Feb 15 '19 at 15:08
  • @MTCoster still nothing visible without "inspect element" on a browser – user11039951 Feb 15 '19 at 15:16

0 Answers0