1

I am trying to make a different button position for both portrait and landscape versions of the React application I’m working on. I tried learning about event listeners and referred to these two posts, and inspected the console for a message while trying to rotate using an iPhoneX view on Google Chrome. However, I don’t seem to see a message of 'changed orientation'. Does anyone know the problem with my code? Feel free to ask for more clarification.

Welcome.js

import React, { Component} from "react";
import { Link } from "react-router-dom";
import "../style/App.css";
import { Typography, Button, Card, Grid } from "@material-ui/core";
import homepage2 from "../images/homepage2.png";


export default class WelcomeComponent extends Component {

  onOrientationChange = (event) => {
    console.log('changed orientation');
  }

  render() {
    return (
      <div onOrientationChange={this.onOrientationChange}
        style={{
          minHeight: "100vh",
          backgroundImage: `url(${homepage2})`,
          backgroundPosition: "center",
          backgroundSize: "cover"
        }}
      >
        <div
          style={{
            textAlign: "center",
            verticalAlign: "bottom",
            bottom: "0px"
          }}
        >
          <Link to="/Language">
            <Button
              variant="contained"
              color="secondary"
              size="large"
              style={{
                position: "absolute",
                top: "50%",
                left: "50%",
                transform: "translate(-50%,-50%)"
              }}
            >
              CONTINUE
            </Button>
          </Link>
        </div>
      </div>
    );
  }
}
Prashin Jeevaganth
  • 1,223
  • 1
  • 18
  • 42
  • 1
    let me know if it worked for yout https://codesandbox.io/s/59533290-so-s61ij – Learner Dec 30 '19 at 16:20
  • The sandbox works but I have no idea how to adapt it to my code – Prashin Jeevaganth Dec 30 '19 at 16:36
  • as mentioned in codesandbox you can adapt the same way and achieve for onOrientationChange, basically on componentDidMount you need to add that one. let me know if you need any further clarifications. So after that i will update with sample code as answer – Learner Dec 31 '19 at 08:03

0 Answers0