cbbfcd / react-native-lightbox

Images etc in Full Screen Lightbox Popovers for React Native

react-native-lightbox-v2

👀 0.9.0 is coming!

Fork this project to do some updates, because the original library seems to be out of maintenance！ Thanks Joel Arvidsson

Installation

I changed the name in order to publish to npm, it is not actually a new version, it just fixed some problems based on the original！

yarn add react-native-lightbox-v2

Usage

Note: react-native-lightbox-v2 will no longer support navigator after version 0.9.0.

navigator property is optional but recommended on iOS, see next section for Navigator configuration.

import Lightbox from 'react-native-lightbox-v2';

const LightboxView = ({ navigator }) => (
  <Lightbox navigator={navigator}>
    <Image
      style={{ height: 300 }}
      source={{ uri: 'http://knittingisawesome.com/wp-content/uploads/2012/12/cat-wearing-a-reindeer-hat1.jpg' }}
    />
  </Lightbox>
);

can long press to save image?

longPressCallback can resolve it!

const uri = 'http://knittingisawesome.com/wp-content/uploads/2012/12/cat-wearing-a-reindeer-hat1.jpg'
const longPress = (uri) => {
  CameraRoll.saveToCameraRoll(uri)
}
<Lightbox longPressCallback={() => longPress(uri)}>
    <Image
      style={{ height: 300 }}
      source={{ uri }}
    />
  </Lightbox>

Navigator setup/Android support

Note: react-native-lightbox-v2 will no longer support navigator after version 0.9.0.

For android support you must pass a reference to a Navigator since it does not yet have the Modal component and is not on the official todo list. See the Example project for a complete example.

const renderScene = (route, navigator) => {
  const Component = route.component;

  return (
    <Component navigator={navigator} route={route} {...route.passProps} />
  );
};

const MyApp = () => (
  <Navigator
    ref="navigator"
    style={{ flex: 1 }}
    renderScene={renderScene}
    initialRoute={{
      component: LightboxView,
    }}
  />
);

Properties

Prop	Type	Description
activeProps	object	Optional set of props applied to the content component when in lightbox mode. Usable for applying custom styles or higher resolution image source.
renderHeader(close)	function	Custom header instead of default with X button
renderContent	function	Custom lightbox content instead of default child content
renderItem(open)	function	Custom content instead of default child content
willClose	function	Triggered before lightbox is closed
onClose	function	Triggered when lightbox is closed
onOpen	function	Triggered when lightbox is opened
didOpen	function	Triggered after lightbox is opened
onLongPress	function	Triggered after lightbox is long pressed
onLayout	function	Triggered after lightbox layout complete
doubleTapCallback	function	Triggered after double taped
doubleTapZoomEnabled	boolean	Enable double-tap to zoom , defaults to true
doubleTapGapTimer	number	Determine the time interval of double-tap, defaults 500ms
longPressGapTimer	number	Determine the time interval of long-press, defaults 2000ms
longPressCallback	function	Triggered after the content is long pressed
doubleTapZoomToCenter	boolean	Zoom to center when double-tap trigger
doubleTapMaxZoom	number	Maximum magnification factor, defaults to 2
doubleTapZoomStep	number	The zoom ratio of each double-tap, defaults to 0.5
underlayColor	string	Color of touchable background, defaults to black
backgroundColor	string	Color of lightbox background, defaults to black
swipeToDismiss	bool	Enables gestures to dismiss the fullscreen mode by swiping up or down, defaults to true.
disabled	bool	disable the lightbox. defaults to false.
style	object	lightbox view wrapper's style.
dragDismissThreshold	number	threshold distance for sliding exit. defaults to 150.
modalProps	object	any other modal props you need. defaults to {}.
useNativeDriver	bool	wether use native driver. defaults to false.
springConfig	object	Animated.spring configuration, defaults to { tension: 30, friction: 7 }.

Demo

Example

Check full example in the Example folder.

Changelog

Changelog

License

MIT License. © Joel Arvidsson

react-native-lightbox's Issues

Missing `children` in `Lightbox` type

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Problem

The exported Lightbox type is not supporting React children

Diff

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-lightbox-v2/dist/Lightbox.d.ts b/node_modules/react-native-lightbox-v2/dist/Lightbox.d.ts
index 984e8ae..38a52f2 100644
--- a/node_modules/react-native-lightbox-v2/dist/Lightbox.d.ts
+++ b/node_modules/react-native-lightbox-v2/dist/Lightbox.d.ts
@@ -12,7 +12,7 @@ export interface ISpringConfig {
     tension: number;
     friction: number;
 }
-export interface LightboxProps<T = any> extends IGestureProps {
+export interface LightboxProps<T = any> extends React.PropsWithChildren<IGestureProps> {
     activeProps?: Record<string, T>;
     renderContent?: Func<T, JSX.Element>;
     renderHeader?: Func<T, JSX.Element>;

This issue body was partially generated by patch-package.

pinch to zoom?

Any plans to add pinch to zoom feature?

features for v1.0.0

Inherit the original author's intention and continue to improve：

Must have

• Support for custom Image component (ImageProgress, FastImage etc)
• Support for lo-res thumbnail -> hi-res transition
• Set up CI to run tests and release
• Andorid hardware back button support
• Gesture to close by swiping down/up
• No dependency on navigation lib
• No dependency on Modal
• Improved peformance with native animation driver
• Feature parity between Android and iOS

Really nice to have

• Support for aspect-ratio change from thumbnail -> hi-res
• Pinch to zoom
• Double-tap to zoom
• Support for gallery mode
• Configurable Touchable component
• Configurable transition properties
• Configurable status bar transitioning
• Configurable/custom header/footer

Nice to have

• Pure JavaScript implementation
• Integration library with react-navigation (et al)
• Integration library with redux
• Support Image->Video transition
• Some form of lifecycle support (will/did open/close)

On the fence

• Orientaion change support
• Programmatic way of opening/closing lightbox

Not doing

• Generic shared element transition

support multi imageviewing

Hi, this is best library i have found, can u support multi image viewing. THanks u so much

image not full size in viewing mode

hi, please help my problem:

here is my code:

//chatscreen
 const renderImageView = (props) => {
        if(props.currentMessage.image){
            return <ChatImage {...props}/>
        }
        return null
    }

export function ChatImage(props) {
    console.log(props.currentMessage.image)
    return (
        <LightBox navigator={null}>
            <Image
                style={{
                    width: 180,
                    height: 180,
                    borderRadius: 8
                }}
                resizeMode='cover'
                source={{ uri: props.currentMessage.image }}
            />
        </LightBox>
    )
}

Image quality low until re-opened

Hi,

Everywhere I am using this Lightbox component in my app I am facing the same issue:

The first time I click on the image to have the lightbox displayed, it is slightly blurred / low quality looking.
Then I close the lightbox, and re-tap on the image: this time the quality is perfect as expected.

And if I close the view in which this image + lightbox is rendered, I have to do the same again: a first open / close, then reopening to see the good quality image.

This seems to happen only with FastImage.

Using v0.8.8

Code as below:

<Lightbox activeProps={{ style: { flex: 1, resizeMode: 'contain', width: null } }}>
          <FastImage
            style={{ width: 100, height: 100 }}
            source={{ uri: photo }}
            resizeMode={FastImage.resizeMode.contain}
          />
        </Lightbox>
        

Any idea why this would happen?

Drag Dismiss Stuck

When drag to dismiss, if I let go before threshold is met I can no longer drag to dismiss. But close with "X" works!

React Native Web Support

This issue is intended for anybody else who is looking for Web support. Current version do not support it. For some strange reason in version 0.8.8 there are missing "const" when declaring getContent. Adding those make the library works on web.

However this is already fixed in latest version 0.8.9-beta.0.

yarn add [email protected]

This issue can be closed once a new stable version is released.