library is not working resizeMode cover correctly

[brunowbbs]

An image when loaded is compressed. It looks like there was a resize mode stretch

const {width, height} = Dimensions.get('screen');
<ImageCrop
     style={{ borderRadius: 20 }}
     image={ImageSourceviewarray[0]}
     cropHeight={height * 0.35}
     cropWidth={width * 0.85}
     zoom={0}
     quality={100}
     maxZoom={180}
     minZoom={10}
     panToMove={false}
     pinchToZoom={true}
 />

Hello Every one, I am using the following code to crop my image:

import * as React from 'react';

import { Text, View, StyleSheet } from 'react-native';
import {ImageCrop} from 'react-native-image-cropper'
import { Surface } from 'gl-react-expo';
import ImageFilters from 'react-native-gl-image-filters';

export default class App extends React.Component {
  state={
    height:200,
    width:200,
    image:''
  };

  capture=()=>{
    console.log("hello")
};


  render(){
    return (
   <View>
    <Surface style={{ width:300, height: 300}} ref={ref => (this.image = ref)}>
     <ImageCrop 
      cropHeight={this.state.height}
      cropWidth={this.state.width}
      zoom={1}
      maxZoom={80}
      minZoom={20}
      panToMove={true}
      pinchToZoom={true}
    >
    {{uri: 'https://demo.plugins360.com/wp-content/uploads/2017/12/demo.png'}}
    </ImageCrop>
   </Surface>
    <Text onPress={()=>this.capture()}>Capture()</Text>
  </View>
  );
}
}

But this doesnot work, throws this error:
GL.Node elements can only be used as children of GL.Surface / GL.Node and should not be rendered

my package.json is:

{
"dependencies": {
"react-native-paper": "3.6.0",
"expo-image-cropper-gl-react": "1.1.1",
"gl-react": "^4.0.1",
"gl-react-dom": "4.0.1",
"gl-react-expo": "^4.0.1",
"gl-react-native": "^4.0.1",
"react-native-gl-image-filters": "0.2.2",
"rect-clamp": "^0.0.0",
"react-native-image-cropper": "0.4.5"
}
}