Android Modal Problem about react-native-image-viewing HOT 15 CLOSED

@alimert801 yes, I have tested pinch-zoom not working only tap to zoom works...
once I find a fix i'll post it here.

from react-native-image-viewing.

I have also encountered the same issue, in which my navigation bar wasn't hiding...
Modal.android.js is buggy ... easy fix just replace code with react-native default model which handles everything.

@Willt123 @alimert801 @methineeinkan @antonKalinin @maksimko @globchastyy
try this ...
before:

after:

from react-native-image-viewing.

+1

from react-native-image-viewing.

Hey this look like an issue with the Modal.android.js file.

As a patch you could try removing this line:
top: StatusBar.currentHeight

If I have time I'll try and create a PR.

from react-native-image-viewing.

As a patch you could try removing this line:
top: StatusBar.currentHeight
Not work!

from react-native-image-viewing.

@methineeinkan

Hey if your issue is the same as the one here it could be that your are rendering the
<ImageView>
Component at a higher level.

I had to make sure I was rendering it outside my Baselayout in order to get it to properly fill the screen over the top of the Bottom tab navigator.

from react-native-image-viewing.

@AlishahSolanki Thank you for your solution, this fixed my problem. But, When I do that solution, I can't pinch to zoom. It doesn't work.

from react-native-image-viewing.

@AlishahSolanki Thanks for taking a look into this, looking forward to a solution. Hope we can get a PR through

from react-native-image-viewing.

It is like this inside stack in android:

But it is normal in ios

  return (
    <>
      <ImageViewer
        images={files.map((f) => ({uri: f.path}))}
        imageIndex={viewingIndex}
        visible={ImageViwerIsVisible}
        onRequestClose={() => showImageViwer(false)}
      />
      <View
        style={{
          flexDirection: 'row',
          flex: 1,
          padding: 10,
          alignItems: 'center',
        }}>
               ....
        </View>
     </>
)```

from react-native-image-viewing.

I had the same issue when i used the modal. I cannot pinch-zoom. Any solution?

from react-native-image-viewing.

It is like this inside stack in android:

But it is normal in ios

  return (
    <>
      <ImageViewer
        images={files.map((f) => ({uri: f.path}))}
        imageIndex={viewingIndex}
        visible={ImageViwerIsVisible}
        onRequestClose={() => showImageViwer(false)}
      />
      <View
        style={{
          flexDirection: 'row',
          flex: 1,
          padding: 10,
          alignItems: 'center',
        }}>
               ....
        </View>
     </>
)```

Try this . This worked for me .

• Set the height for main view wrapper of the component's render method() to 100 %

• keep ImageView as the first view component in the component's render() method

• Set presentationStyle = {"overFullScreen"} - This is the recommended settings for Android.

Example:

 render() {

**Set the height for main view wrapper of the component render method() to 100 %**
  <View style={{backgroundColor:'white',height:'100%'}}>

        **keep image viewer as the first view component in the component's render() method**
        <ImageView
            images={[
              {
                 uri : (this.state.pickedImage)?this.state.pickedImage.uri:[],
              },
            ]}
            imageIndex={0}
            swipeToCloseEnabled={false}
            presentationStyle = {"overFullScreen"}
            visible={this.state.isProfilePicImageViewVisible}
            onRequestClose={() => this.pickProfilePicImageCloseHandler()}
            />

        // Other view components
        // Other view components

   </View>

 }

from react-native-image-viewing.

I had the same issue when i used the modal. I cannot pinch-zoom. Any solution?

Try setting swipeToCloseEnabled to false

swipeToCloseEnabled={false}

Pinch Zoom is working for me after that .

I think if "swipeToCloseEnabled is true", it is confused between swipe gesture and pinch zoom gesture. Pinch zoom was not working in that scenario

from react-native-image-viewing.

@AlishahSolanki Thank you for your solution, this fixed my problem. But, When I do that solution, I can't pinch to zoom. It doesn't work.

Try setting swipeToCloseEnabled to false

swipeToCloseEnabled={false}

Pinch Zoom is working for me after that .

I think if "swipeToCloseEnabled is true", it is confused between swipe gesture and pinch zoom gesture. Pinch zoom was not working in that scenario

from react-native-image-viewing.

@anandhakumarpalanisamy I tried your solution but for my app, pinch zoom still doesn't work.

from react-native-image-viewing.

We have replaced custom modal implementation with RN Modal component, please check v0.2.0. Going to close this issue, feel free to reopen if problems still occur.

from react-native-image-viewing.