add topRightView to TopBar for customizing right button on TopBar and zooming photo

[ksti]

add topRightView to TopBar for customizing right button on TopBar
onTopRight is the handler for onPress event

zooming photo used this lib "react-native-transformable-image", but this has a few of conflict on pan gesture when scrolling, because it's implemented by scroll view too! And I made some PR like react-native-view-pager and react-native-gallery for resolving these problems.

[ksti]

used this lib "react-native-transformable-image", but this has a few of conflict on pan gesture when scrolling, because it's implemented by scroll view too!

[ksti]

Using Gallery.js forked from ldn0x7dc/react-native-gallery which support costuming item for renderPage.

[7kfpun]

Hi @ksti,

I did tried to use it in my project, but I see the following error. Could I assume that your PR is compatible with the original example?

       <PhotoBrowser
          onBack={() => this.backHandler()}
          mediaList={this.props.images}
          initialIndex={this.props.initialIndex}
          displayNavArrows={true}
          displaySelectionButtons={false}
          displayActionButton={true}
          startOnGrid={false}
          enableGrid={true}
          onActionButton={(media, index) => this.onShare(media, index)}
          itemPerRow={Device.isTablet ? 8 : 4}
        />

https://github.com/7kfpun/PhotosReactNative/blob/master/app/photo-browser.js#L97-L108

[ksti]

@7kfpun thanks for letting me know this. Now you can 'npm update' for the latest commit.
And you will like to zooming photo by adding props 'useGallery={true}' to 'PhotoBrowser' witch should look like:

<PhotoBrowser
        onBack={navigator.pop}
        mediaList={media}
        initialIndex={initialIndex}
        displayNavArrows={displayNavArrows}
        displaySelectionButtons={displaySelectionButtons}
        displayActionButton={displayActionButton}
        startOnGrid={startOnGrid}
        enableGrid={enableGrid}
        useCircleProgress
        useGallery={true}
        onSelectionChanged={this._onSelectionChanged}
        onActionButton={this._onActionButton}
        onTopRight={() => console.log('on top right click')}
        topRightView={this._renderTopRightView()}
        topRightStyle={{overflow: 'hidden'}}
      />

you can have a look at the usage:https://github.com/ksti/react-native-photo-browser
Thanks again:)Good luck:)

[7kfpun]

Ok! it works, on Android and iOS. Thanks @ksti !
Could refer to my example as well and will be published in both stores soon.
https://github.com/7kfpun/PhotosReactNative

[florianbepunkt]

@ksti I would like to try your PR. but whenever I tap one of the examples in the list I get no component found fir view with name "ARTSurfaceView

Can you help? Haven't found any additional dependencies in your example's package.json

EDIT: Never mind… it has to do with the progress indicator. Maybe you can add a hint in your docs. Also in your example the urls need to be https for iOS or you get an unsecure connection error on current iOS. Impressive work btw 👍

EDIT EDIT: Noticed some sort of bug. When you specify a thumb, then no image is shown at all (using your example project). removing the thumb and it works again.

[ksti]

@florianbepunkt Ok, thanks, I will check it soon.

[ksti]

@florianbepunkt fixed some bugs on rn0.39 and updated the example, wish you like it :)

[richardgirges]

Eagerly awaiting this merge! :)

[halilb]

Hey @ksti ! Thanks a lot for your time and contributions.

I was busy for maintaining this repo for a while and couldn't review your PRs before. So sorry about that. I think this PR has gotten really huge due to my fault. I'm going to checkout your fork and we can discuss if we could merge your fork over this one.

[XadillaX]

I am looking forward to this PR.

[ngandhy]

any update on this?

[spacegraym3]

Bump

[niocncn]

any updates?

[haimyyy]

+1 for this PR

[ducpt2]

+1 for zoom photo.

[jothikannan]

Is this #PR merged or not? It's almost year.

[halilb]

The diff between the project and this PR have gone huge due to my inability to respond this PR in time. I'm sorry about that.

I just created a separate issue for building zoom support: #89. I think we should use some other library for zooming, and https://github.com/ascoders/react-native-image-viewer looks like a good candidate. Contributions are greatly appreciated.