From c7ba86bc466170ac7b26f469b43dc68b6e56663b Mon Sep 17 00:00:00 2001
From: Li Zheng <flyskywhy@gmail.com>
Date: Wed, 21 Dec 2022 16:46:39 +0800
Subject: [PATCH] react -> react-native: babylonjs `Drag and drop` component
 works on Android

---
 package.json     |  2 +-
 src/dragNdrop.js | 13 +++++--------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index b2defc9..f6700d6 100644
--- a/package.json
+++ b/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",
diff --git a/src/dragNdrop.js b/src/dragNdrop.js
index 46e49e8..4bd2062 100644
--- a/src/dragNdrop.js
+++ b/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>
   );
 }