Editor/App.js

import React from 'react';
import {  StyleSheet, Text, TextInput, View } from 'react-native';
import GUI from './Systems/Gui';
import './App.css';

export default class App extends React.Component {
  
  constructor(props){
    super(props)
    this.playgroundRef = React.createRef();
    this.toolboxRef = React.createRef();
    this.GUI = null;
    this.state = {
        zoom:1,
        scrollPos:0
      }
    this.addScrollEvent();
    this.GUI = new GUI();
    this.GUI.onUpdate( () => this.forceUpdate())
  }
  componentDidMount(){
    this.GUI = new GUI(this.playgroundRef.current,this.toolboxRef.current);
    this.GUI.onUpdate( () => this.forceUpdate())
    
  }

  addScrollEvent(){
    window.addEventListener('wheel', (e) =>{
      if(e.deltaY < 0){
        this.zoomIn();
      }
      else if(e.deltaY > 0){
        this.zoomOut();
      }
    });
  } 
  
  zoomOut(){
    let z = this.state.zoom;
    z = z + 0.2;
    this.setState({zoom:z});
  }

  zoomIn(){
    let z = this.state.zoom;
    z = z - 0.2;
    this.setState({zoom:z});
    
  }
  dragPage(e){
    //!!!!!Import document.getElementById isnt working on react native
    //' let playground = document.getElementById("phone");
    /*playground.addEventListener("mousedown",() => {
      console.log("mouse down")

      playground.onmousemove = function(e){
        console.log("moving now while down")
      }
     })*/
  }
  render(){
    console.log("re render")
    let customStyle = {
      zoom: this.state.zoom
    };  
    return (
      <div className="main" id="some">
       
        <div className="mainbar">
          {this.GUI.renderMainBar()}
        </div>
        <div className="horizontal_bars">
          <div ref={this.toolboxRef} className="toolbox">
            <div className="tool_icon_bar">{this.GUI.renderToolBox()}</div>
            <div className="moduleBar">{this.GUI.renderModuleBar()}</div>
          </div> 
          <div className="sidebar">
            {this.GUI.renderSideBar()}
          </div>
        </div>

       
        {/*This is a comment*/}
        <div ref={this.playgroundRef} onClick={(e) => this.dragPage(e)} className="playground" style={{zoom:this.state.zoom}}>
          <div className="phone">
            {this.GUI.mobileRender()}
          </div>
        </div>      
      </div>
    );
  }
}


/*


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row'
  },
  toolbarView: {
    justifyContent: 'space-around',
    alignItems: 'center',

    width: 64,
    borderWidth: 1,
    borderColor: 'red',
    padding: 16
  },
  mainView: {
    backgroundColor: '#065b69',
    alignSelf:'stretch',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },

  mobileView: {
    backgroundColor: 'white',
    borderWidth: 4,
    borderColor: 'orange',

    // iphone X
    width:1125/3,
    height: 2436/3 

  },





});*/