React-native-image-viewer: Landscape Orientation

[andreecosta]

Will this library have Landscape Orientation support? Is it still maintained?

[ascoders]

Sorry, this library is not support Landscape Orientation yet, but welcome pr!
You can building this project by this command:

yarn
npm start

[andreecosta]

I would develop Landscape support if I knew :( i can't seem to find any library with landscape support

[tugorez]

@itswaze you could give a chance to https://github.com/ldn0x7dc/react-native-transformable-image

[nosshar]

I used:
...
"react-native-orientation": "3.1.0"
...
in my project and trigger this component redraw on orientation change.
Mostly because I have a lot of dependencies and can't migrate easily from ReactNative 0.42 (later versions have orientation change support in Dimensions class).
But of course it would be nice to have this feature implemented by awesome guys.

Thanks for this component!

[andrewmarmion]

Really love this component, so I thought I would add my two cents here if people are confused about implementing this.

I used a similar method to @nosshar by using react-native-orientation to manage the orientation changes in my application.

I first lock the orientation to portrait in the componentDidMount of my root app component.
To display the image I created a modal overlay that is hooked into redux. By calling a specific redux action I can pass an image uri to the modal overlay and tell it to become visible.

In the ImageModal I use ImageView to display the image that is passed to it. In the ImageModal

• componentWillReceiveProps: I check to see if the modal has been told to become visible if it has I unlock the orientations and I add a listener to orientation updates, Orientation.addOrientationListener. This allows me to set the state of the key on orientation changes.
• ImageView: I pass the key as a prop to the ImageView, by changing the key on each orientation change it forces the ImageView to re-render. (there is probably a better way to do this)
• closeModal: This method is called when the modal is closed. It tells the ImageModal to close, it removes any listeners that I have set up, and locks the orientation back to portrait.

[vvavepacket]

@andrewmarmion

Which key are you changing to trigger re rendering?

[andrewmarmion]

@vvavepacket as simply as this

<ImageViewer 
  key={this.state.render}
  ...
/>

So in my orientationDidChange, I set the state of render with a random number, that way it will always force a render. It may not be the best way of doing it but it is working quite nicely.

[bradsolves]

Please see my PR for this issue: https://github.com/ascoders/react-native-image-viewer/pull/178

[nbastoWM]

Supposedly this PR was merged into master but when I open the image viewer it shows only in portrait. Was this fixed or is still in development?
Thanks.

Edit:
Actually it works in real devices, it just doesn't work in the emulator.

[ialisyed]

<Modal supportedOrientations={['landscape', 'portrait']} visible={imageVisible}>
        <ImageViewer
        saveToLocalByLongPress={false}
          onSwipeDown={() => setIsImageVisible(false)}
          onCancel={() => setIsImageVisible(false)}
          enableSwipeDown
          imageUrls={[
            {
              url: '',
              props: {
                // Or you can set source directory.
                source: IMAGE.DUMMY_QUESTION,
              },
            },
          ]}
        />
 </Modal>