merryjs / photo-viewer Goto Github PK

Should hide status bar when a photo is opening and show it back when its dismissed

Hi,

I have a large list of images of about 100. This library will works well with 100+ photos?

How to set a 'original thumbnail' position, to trigger from and dismiss to, like the animated gif example on https://github.com/NYTimes/NYTPhotoViewer

how to let the photo-viewer has a effects that pops / trigger from a thumbnail

and when swipe-up-dismiss, it will 'shrink / roll back' to the the 'original' size (the thumbnail)?

thanks

Hi @BANG88 ,

Thanks for the library, I'm liking it a lot!

When I try it in my project, I observed a weird behavior that the viewer instance is opening 2 instances of itself. Because when I dismiss it using swipe gesture, there's another one in the background showing the same picture. And it then disappear because of the onDismiss function. If I remove the onDismiss function, I'll have to swipe twice to dismiss it.

My code looks roughly like this, I also checked that I only have one in the project:

{/** Pics */ }
<View style={{ flexGrow: 1, marginLeft: 5 + 49 + 5, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', width: 85 * 2 + 5 }}>
  <PhotoView
    visible={this.state.visible}
    data={this.state.photos}
    hideStatusBar={true}
    initial={this.state.initial}
    onDismiss={e => {
      //this.setState({ photos: [], visible: false });
    }}
  />
  {rowData.pics ? rowData.pics.map((pic, idx) => {
    return <TouchableOpacity key={rowID + idx} onPress={() => this.setState({ visible: true, initial: idx, photos: rowData.pics.map(image => { return { source: { uri: image } } }) })}>
        <View style={{ backgroundColor: '#f4f4f4', alignSelf: 'flex-start', marginTop: 10, width: 85, height: 85 }}>
          <CachedImage key={rowData.id} style={{ width: 85, height: 85 }} source={{ uri: pic}} />
        </View>
    </TouchableOpacity>
  }) : null}
</View>

If you could help me with this, it'll be more than appreciated!

How to hide header counter?

Handle image download on didNavigateToPhoto

• attributedCaptionTitle && color
• attributedCaptionSummary && color
• attributedCaptionCredit
• hideStatusBar

IOS only , maybe in the future

• placeholderImage

Android only

• backgroundColor
• swipeToDismiss
• zooming
• shareText

Hi,

Can this be used just for Android Studio? I'm trying to figure out how to use but the examples is not exactly clear... I'm stuck at understanding how to use MerryPhotoData's variable ReadableMap.

Greatly appreciated any help rendered. Thanks!

The app crashes when I try to save an image.

Steps to reproduce: Click the icon on the right hand corner -> save image -> crashes.

Other actions (e.g. Mail, Copy) seem to work fine.

Btw, this is the best photo-viewer for RN so far!

Hi,

Recently, react-native-maps, as well as a number of packages have updated to android SDK version 26 and Gradle version 3. It seems like this package will not be compatible with them in Android without an upgrade. Could you work on it when you have time?

Thanks for the awesome package!

In a chat app, if I send an image message, the receiver need a remote image, but I just need a local image.

不知道现在是不是RN版本的原因,按照步骤根本没法用,IOS一堆错误,好不容解决,一点图片app就奔溃,全部是拷贝的例子.安卓也是,根本接入不进去,好烦躁

Xcode: 9.2
Cocoapods: 1.4.0

Using cocoapods I'll get framework not found for NYTPhotoViewer architecture x86_64 using this pod file:

platform :ios, '9.0'

target 'brandoo' do
  #use_frameworks! (causes issues with react-native-firebase)

  # firebase
  pod 'Firebase/Core'
  pod 'Firebase/Analytics'
  pod 'Firebase/Database'
  pod 'Firebase/Messaging'
  pod 'Firebase/Auth'
  pod 'Firebase/Storage'
  
  #image
  pod 'RSKImageCropper'
  pod 'QBImagePickerController'
  
  # gallery
  #pod 'NYTPhotoViewer' # (tried this one as well)
  pod 'NYTPhotoViewer',:git => 'https://github.com/merryjs/NYTPhotoViewer.git', :branch => 'master'

end

Trying to manually link those frameworks as described gives me ld: framework not found NYTPhotoViewer :

version: 2.0.0

Version
-"@merryjs/photo-viewer": "^2.0.0"
-"react-native": "0.44.0"

Steps to reproduce
-Archive and upload to app store

if you use

include ':merryjs-photo-viewer'
project(':merryjs-photo-viewer').projectDir = new File(rootProject.projectDir, 	'../node_modules/@merryjs/photo-viewer/android')

and

    compile project(':merryjs-photo-viewer')

It will work in gradle 2.2.3.

Thanks for writing this library!

hideShareButton={true} is not working on android

https://github.com/NYTimes/NYTPhotoViewer

See https://github.com/merryjs/photo-viewer/blob/next/README.md#usage

Hi there,

I'm newbie in RN and I found your library very helpful. But some time I want to have some functionality in bottom of overlay photo view ex: comment, download buttons also only one double tab zoom level...

If you can open some input for overlay view example: header, footer (RN component input as well) of each picture. So I can modify anything in there with your onChange event.

Thank you!

I show call show() with hideStatusBar: true，I hope to showStatusBar after dismiss.

on android if I use many images, it creates many modals.

Well, it seems too many libraries on android but we should choose a simple and powerful one. we do not need add various image dependencies.

Here list some of them:

• https://github.com/chrisbanes/PhotoView
• https://github.com/Piasy/BigImageViewer
• https://github.com/davemorrissey/subsampling-scale-image-view
• https://github.com/ongakuer/PhotoDraweeView
• https://github.com/stfalcon-studio/FrescoImageViewer

But i think PhotoView or BigImageViewer will be the candidate

Hello, I am unable to build APK when this package included the project.

• Gradle version: 2.3.3
• distributionUrl: gradle-3.3-all

Error:

    ...\node_modules\@merryjs\photo-viewer\android\src\main\java\com\stfalcon\frescoimageviewer\MultiTouchViewPager.java:37: 
Error: This class should be public (com.stfalcon.frescoimageviewer.MultiTouchViewPager) [Instantiatable]
                                                                                                                                                                               public MultiTouchViewPager (Context context, AttributeSet attrs) {
       Explanation for issues of type "Instantiatable":
       Activities, services, broadcast receivers etc. registered in the manifest
       file (or for custom views, in a layout file) must be "instantiatable" by
       the system, which means that the class must be public, it must have an
       empty public constructor, and if it's an inner class, it must be a static
       inner class.
    
    1 errors, 0 warnings
    :app:lintVitalRelease FAILED

Thank you.

framework not found FLAnimatedImage.

Can I ask for a help with this. I follow the documentation but I got the error.

I have an experimental photo app which has hundreds of photos, its not possible for me to bring all of them in first render.

Can we add support for adding more photos dynamically, I see that onNavigateToPhoto was added but has been commented out, any specific reason for this?

Love your library, thanks.

• IOS
• Android blocked by stfalcon-studio/FrescoImageViewer#57 have to fork it then fixes this issue

• react-native v0.51.0

• xcode v9.2

• iOS

Run in my iPhone with release mode, crash

Run in Simulator with release mode, it is ok

I want to use ActivityIndicator

I'm not able to see a close button on android device

is there a way to track a slide change (i.e. onChange)? Like e.g. onDismiss gives the option to catch when viewer has been dismissed.

https://github.com/DylanVann/react-native-fast-image

Wanna integrate FastImage into this module.

https://github.com/rs/SDWebImage

Referring to the document ( https://merryjs.github.io/photo-viewer/interfaces/merryphotoviewporps.html ), both hideShareButton and hideCloseButton are not working on Android.

Moreover, if the source paths are local, the Share function on Android doesn't work like expected, it will be sharing just the file:// path, which is not accessible from outside the app.

[Wishlist] Is it possible to add a "Save" button? 😄

import photoViewer from '@merryjs/photo-viewer'

const photos = [
  {
    url: "https://c1.staticflickr.com/8/7625/16631849053_db25684173_k.jpg",
    title: "Flash End-of-Life",
    summary:
      "Adobe announced its roadmap to stop supporting Flash at the end of 2020. ",
    // must be valid hex color or android will crashes
    titleColor: "#f90000",
    summaryColor: "green"
  },
  {
    url: "https://c1.staticflickr.com/6/5598/14934282524_577a904d2b_k.jpg"
  },
  {
    url: "https://c1.staticflickr.com/8/7596/17021131801_fbd8f2b71a_k.jpg"
  },
  {
    url:
      "https://images.pexels.com/photos/45170/kittens-cat-cat-puppy-rush-45170.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"
  },
  {
    url:
      "https://images.pexels.com/photos/142615/pexels-photo-142615.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"
  },
  {
    url:
      "https://images.pexels.com/photos/82072/cat-82072.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"
  },
  {
    url:
      "https://images.pexels.com/photos/248261/pexels-photo-248261.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"
  },
    {
      url:'https://media.giphy.com/media/xT39CSUZtc1T1iKgc8/giphy.gif'
    },
    {
      url:'https://media.giphy.com/media/3o6vXWzHtGfMR3XoXu/giphy.gif'
    }
];

// when I click a image, I call
photoViewer.show({
    hideStatusBar: true,
    swipeToDismiss: true,
    zooming: true,
    data: photos,
    initial: 0,
  })

the result is below:

• ios

Thanks for your library. I like this module with best performance. But as the title, this library can open for customize more as header & footer area with other features.

this looks great, but is it possible to do it without native dependencies? Could see it being useful as part of an Expo app.

<activity
        android:name="com.merryjs.PhotoViewer.PhotoViewer.MerryPhotoViewActivity"
        android:theme="@style/Theme.Transparent" />

where is MerryPhotoViewActivity? so that compile is not work

I just want to use dismiss by swipe, so I hope to hide the close button.

The module is now have enough functionality, but it seems having a leak of customization supporting. It should be excellent if we can customize pagination , tab bar or nav bar for the photo viewer.

I followed the documentation but I got the error :

Showing Recent Issues
: Directory not found for option '-L/Users/ys/Library/Developer/Xcode/DerivedData/teacher-fzdubxxrijpadnasgarldwyntpzz/Build/Products/Release-iphonesimulator/React'

framework not found FLAnimatedImage.

Showing Recent Issues
: Linker command failed with exit code 1 (use -v to see invocation)

Can I ask for a help with this. @MerryIS

Build is ok, however it shows the below error message when do Gradle sync:
Error:Unable to find module with Gradle path ':@merryjs/photo-viewer' (needed by module 'app'.)

I tried to remove the "@" but it still couldn't sync.