React native portrait landscape view

import { useEffect, useState } from "react";
import { StyleSheet, View } from "react-native";
import Orientation from "react-native-orientation-locker";
import LandscapeMobileView from "./LandscapeMobileView";
import PortraitMobileView from "./PortraitMobileView";
const Video=()=>{

    const [status, setStatus]=useState({
        layout: "portrait",      
    });


    useEffect(()=>{
        Orientation.addOrientationListener(handleOrientation);
        return ()=>{
            Orientation.removeOrientationListener(handleOrientation);
      }
    },[]);

    function handleOrientation(orientation) {
        console.log(orientation);    
        orientation === 'LANDSCAPE-LEFT'
        || orientation === 'LANDSCAPE-RIGHT'
        || orientation === 'UNKNOWN'
          ?
            setStatus( prevStatus=>({
                ...prevStatus,              
                layout:"landscape"
          }) )
          :
          setStatus( prevStatus=>({
            ...prevStatus,          
            layout:"portrait"
      })
        )
      }

    const handleFullScreen=()=>{
        status.layout === "portrait"
        ? ( Orientation.lockToLandscapeLeft(),
        setStatus( prevStatus=>({
            ...prevStatus,
            layout:'landscape'
      }) )
      )
        :
        ( Orientation.lockToPortrait(),
        setStatus( prevStatus=>({
            ...prevStatus,
            layout:'portrait'
      }) )
      )
    }

    return(

        <>
            <View>
              {
                status.layout == "portrait"
                ?
                <PortraitMobileView
                handleFullScreen={handleFullScreen}
                layout={status.layout}
                />
                :
                <LandscapeMobileView
                handleFullScreen={handleFullScreen}
                layout={status.layout}
                />
                }
            </View>
        </>
  )
}
export default Video;

 

import { Button, Text, View } from "react-native";
const LandscapeMobileView=({ handleFullScreen, layout })=>{
    return(
        <>
            <View>
                <Text>This is LandscapeMobileView</Text>
                <Button
                title={layout==="portrait" ? 'FullScreeb' : 'Reduce'}
                onPress={ handleFullScreen }
                />
            </View>
        </>
  )
}
export default LandscapeMobileView;

 

import { Button, Text, View } from "react-native";
let PortraitMobileView=({ handleFullScreen, layout })=>{
  return(
      <>
          <View>
              <Text>This is PortraitMobileView</Text>
              <Button
              title={layout==="portrait" ? 'FullScreeb' : 'Reduce'}
              onPress={ handleFullScreen }
              />
          </View>        
      </>
  )
}
export default PortraitMobileView;
© 2016 - 2022, All Rights are Reserved.