Pointer Events Not Working on Ios React Native

I have map-view on the background and a bottom sheet above it with different icon and on swipe up i disable the map-view by making pointer-event value 'none'. Below is the code its working fine on android but map view not taking any event until i remove the pointer-event. i tried giving none or auto directly but its not working

Code Starts Here


toggleBackground = (status) => {
        this.setState({
            enableBackground: status
        })

}
// this is the render method 
// here i am using bottom sheet and map view 
return (

            <View style={{
                flex: 1,
                backgroundColor: '#2c2c2f'//added background color, because bottom sheet doesn't appear on android otherwise
            }}>

                <BottomSheetBehavior

                    // snapPoints={[300, BOTTOM_SHEET_MAX_HEIGHT]}
                    snapPoints={this.state.sheetSnapPoints}
                    ref={this.bottomSheetRef}
                    renderContent={this.renderInner}
                    // renderHeader={this.renderHeader}
                    initialSnap={0}
                    callbackNode={this.fall}
                    enabledInnerScrolling={true}
                    // enabledInnerScrolling={false}
                    enabledGestureInteraction={true}
                    // enabledBottomClamp={true}//for locking snapping in bottom 
                    // enabledContentGestureInteraction={false}

                    // enabledGestureInteraction={this.state.enableTapping}//using this to lock manual swiping of bottomsheet

                    enabledContentTapInteraction={false}//because clicks on TouchableOpcaity were not working in android
                    onOpenStart={() => {
                        this.toggleBackground(false)
                    }}
                    onCloseEnd={() => {
                        this.toggleBackground(true)
                    }}
                />

                <Animated.View
                    style={{
                        alignItems: 'center',
                        opacity: Animated.add(0.1, Animated.multiply(this.fall, 0.9))

                    }} >

                    <View
                        style={{
                            width: width,
                            // height: height, 
                            height: Platform.OS == 'ios' ? height :
                                (StatusBar.currentHeight > 24 ? height + StatusBar.currentHeight : height),
                        }}>

                        <MapView
                            // customMapStyle={MAP_STYLE}
                            style={{ flex: 1, }}
                            provider={PROVIDER_GOOGLE}
                            followsUserLocation={true}
                            showsCompass={false}
                            mapType={this.state.selectedMapType}
                            showsMyLocationButton={false}
                            ref={component => this._map = component}
                            onRegionChangeComplete={(region) => { this.onRegionChangeComplete(region) }}
                            // initialRegion={{
                            //     latitude: this.props.navigation.getParam('lat', 25.198535),
                            //     longitude: this.props.navigation.getParam('lng', 55.277923),
                            //     latitudeDelta: 0.0030, longitudeDelta: 0.0030
                            // }}
                            pointerEvents={this.state.enableBackground ? 'auto' : 'none'}

                            initialCamera={{
                                center: {
                                    latitude: this.props.navigation.getParam('lat', 25.198535),
                                    longitude: this.props.navigation.getParam('lng', 55.277923),

                                },
                                zoom: 18,
                                pitch: 0,
                                heading: 0,
                                altitude: 0,
                            }}
                            showsUserLocation={true} />


                        {
                            !this.state.enableBackground &&



                            <TouchableWithoutFeedback

                                onPress={() => {
                                    this.bottomSheetRef.current.snapTo(0)
                                }}
                            ><View

                                style={{
                                    flex: 1,
                                    position: "absolute",
                                    top: 0,
                                    left: 0,
                                    right: 0,
                                    bottom: 0,
                                    elevation: 14

                                }}></View></TouchableWithoutFeedback>



                        }





                       </View>

                </Animated.View>

            </View>
        );