Search code examples
reactjsreact-nativereact-360

Responsive flat panel in react-360

I would like to make responsive flat panel - on a mobile device should be in full screen like there https://tour.croptrust.org/ image

Is there a possibility to achieve that in react-360.

Here is my example https://gstuczynski.com/tour/plaszow/ - try to hit loupe -> on the desktop looks good but how to make it responsive? Here is my code https://github.com/gstuczynski/plaszow-cc-virtual-tour

Solution

  • If you're looking to set your surface size based on whether user is on mobile or desktop, I'd approach this by building a NativeModule to check if the device is mobile on componentDidMount() and using the built in resize() function to adjust your surface sizes.

    First add a module in client.js

        function init(bundle, parent, options = {}) {
      const r360 = new ReactInstance(bundle, parent, {
        nativeModules: [
       //new module added here
       ctx => new SurfaceModule(ctx),
      ],
        fullScreen: true,
        ...options,
      });
    }

    In your case you already have vars for the surfaces - but remove const to expose them to your NativeModule: 

    infoPanel = new Surface(1440, 850, Surface.SurfaceShape.Flat);
mapPanel = new Surface(850, 800, Surface.SurfaceShape.Flat);
cylinderSurface = new Surface(4096, 720, Surface.SurfaceShape.Cylinder);

    Next, create your class SurfaceModule and include a function to check for mobile and include a ref for the surface namecheckMobile(surfaceName)

            import {Module} from 'react-360-web';

        export default class SurfaceModule extends Module {
          constructor(ctx) {
            super('SurfaceModule');
            this._ctx = ctx;
          }

          checkMobile(surfaceName, id) {
              if (navigator.userAgent.match('add your match criteria here')) 
              {
                  let swidth = screen.width
                  let sheight = screen.height
                  surfaceName.resize(swidth, sheight);
                  this._ctx.invokeCallback(
                  id, 
                  [swidth, sheight] 
                 );
              }
          }

        }

    Finally in index.js run the function to check and adjust surface sizes.

    With this setup you'll need to call the function for each Surface you want to check or you could rework to send multiple refs and perform an if/switch

    You could also move the call out of componentDidMount() into another func

    import {
  NativeModules
} from 'react-360';

const SurfaceModule = NativeModules.SurfaceModule;
  componentDidMount() {
     SurfaceModule.checkMobile((swidth, sheight) => {
     console.log(swidth);
     console.log(sheight);
     });
  }

    EDIT: Updated checkMobile() func & index.js to include callback