How to render .obj file when using react-three-fiber expo-three etc in an expo managed project?

Ok so i was following this tutorial

Now the app is working fine but the issue is arising whn i tried to display it inside the View component.

Here is the code that returns the ShoeModel

import { Canvas, useLoader } from '@react-three/fiber/native';
import { Suspense, useLayoutEffect, useRef } from 'react';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
import { TextureLoader } from 'expo-three';


function Shoe(props) {
  const [base, normal, rough] = useAsset(() => [
    require('../../../assets/Airmax/textures/BaseColor.jpg'),
    require('../../../assets/Airmax/textures/Normal.jpg'),
    require('../../../assets/Airmax/textures/Roughness.png'),
  ]);

  const material = useAsset(() => MTLLoader.loadAsync(require('../../../assets/Airmax/shoe.mtl')));

  const obj = useLoader(
    OBJLoader,
    require('../../../assets/Airmax/shoe.obj'),
    (loader) => {
      material.preload();
      loader.setMaterials(material);
    }
  );

  const mesh = useRef();

  useLayoutEffect(() => {
    obj.traverse((child) => {
      if (child instanceof THREE.Mesh) {
        child.material.map = base;
        child.material.normalMap = normal;
        child.material.roughnessMap = rough;
      }
    });
  }, [obj]);

  return (
    <mesh ref={mesh} rotation={[0.7, 0, 0]}>
      <primitive object={obj} scale={10} />
    </mesh>
  );
}

export default function ShoeModel() {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />

      <Suspense fallback={null}>
        <Shoe />
      </Suspense>

    </Canvas>
  );
}

and here is the block where i'm calling it

import ShoeModel from './components/039/ShoePreview';
export default class ShoeScreen extends React.Component{
    render () {
        return (
          <View>
            
                <ShoeModel />
            

          </View>

        );
    }
}

Now my reading on this is that Canvas is not working in the View component when loading the 3d object. Because I checked my self and it is working fine without View component. I am unable to find the solution to this problem.

If i'm wrong somwhere than please correct me. And also provide a solution for me if there exists.

Note: My packages are fine and it is working all ok when not wrapped inside the component.

Well my bad it was just that i needed to give

style={{ flex: 1 }}

like this

<View style={{ flex: 1 }}>
    <Canvas style={{ flex: 1 }}>
         ..... anycode ....
     </Canvas>
</View>