react -> react-native: babylonjs Drag and drop component works on A…

…ndroid

package.json

@@ -27,7 +27,7 @@
     "@babylonjs/core": "5.1.0",
     "@babylonjs/gui": "5.1.0",
     "@babylonjs/loaders": "5.1.0",
-    "@flyskywhy/react-native-gcanvas": "5.0.0",
+    "@flyskywhy/react-native-gcanvas": "5.0.1",
     "@githubprimer/octicons-react": "^8.5.0",
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/native-stack": "6.6.2",

src/dragNdrop.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Engine, Scene } from 'react-babylonjs';
+import { View } from 'react-native';
+import { Engine, Scene } from 'react-native-babylonjs';
 import { Vector3, Color3 } from '@babylonjs/core';
 
 // start copy from https://www.babylonjs.com/demos/dragndrop/dragdrop.js
@@ -8,11 +9,9 @@ const validateDrag = (targetPosition) => {
   return Math.max(Math.abs(targetPosition.x), Math.abs(targetPosition.z)) <= (GROUND_SIZE / 2) - 10; // should be -15 for torus
 }
 
-function dragNdrop() {  
+function dragNdrop() {
   return (
-    <div>
-      <div className="row">
-        <div className="col-xs-12 col-md-12">
+    <View style={{flex: 1}}>
           <Engine antialias={true} engineOptions={{preserveDrawingBuffer:true, stencil:true}} canvasId="sample-canvas">
             <Scene clearColor={new Color3(0, 0, 0)}>
             <pointLight name='omni' position={new Vector3(0, 50, 0)} />
@@ -45,9 +44,7 @@ function dragNdrop() {
             </torus>
             </Scene>
           </Engine>
-        </div>
-      </div>
-    </div>
+    </View>
   );
 }