Right now the StatusBarIOS throws an error, but when removed the animations don't show up on screen.

0.5.1 introduced calls to the StatusBar API here and here which was introduced into RN with 0.20.0, effectively raising the minimum version required to run this module from 0.11.0 to 0.20.0.

This is a breaking change, and will break anyone using this module who is running RN < 0.20.0 and used the default npm install --save react-native-lightbox, as npm will install 0.5.1 automatically on the next install (e.g. on a CI machine) with the ^0.5.0 semvar check.

Please either increment your major number or minor number (following RN versioning schemes) instead of the patch number when you introduce breaking changes. Alternatively, you could wrap those StatusBar calls in RN version checks to make sure you have access to the API.

Hi, I am using this code to show lightbox but I have error.

(no)

Anyone gotten this to work with react-native-router-flux or similar?

the code is below

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Navigator,
  ScrollView,
  Image,
  View,
  Text,
  Dimensions,
  TouchableOpacity,
} = React;

var Lightbox = require('react-native-lightbox');

var WINDOW_WIDTH = Dimensions.get('window').width;
var BASE_PADDING = 10;

var LightboxView = React.createClass({
  render: function() {
    return (
      <ScrollView style={styles.container}>
        <Lightbox
          navigator={this.props.navigator}
          renderHeader={close => (
            <TouchableOpacity onPress={close}>
              <Text style={styles.closeButton}>Close</Text>
            </TouchableOpacity>
          )}>
          <View style={styles.customHeaderBox}>
            <Text>I have a custom header</Text>
          </View>
        </Lightbox>

        <TouchableOpacity onPress={() => ????????????}>
          <Text>change</Text>
        </TouchableOpacity>
      </ScrollView>
    );
  },
});

var LightboxView1 = React.createClass({

  render: function() {
    return (
      <ScrollView style={styles.container}>
        <View style={styles.text}><Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </Text></View>
        <Lightbox underlayColor="white" navigator={this.props.navigator}>
          <Image
            style={styles.contain}
            resizeMode="contain"
            source={{ uri: 'http://www.yayomg.com/wp-content/uploads/2014/04/yayomg-pig-wearing-party-hat.jpg' }}
          />
        </Lightbox>
        <TouchableOpacity onPress={() => ????????????}>
          <Text>change</Text>
        </TouchableOpacity>
      </ScrollView>
    );
  },
});

var Example = React.createClass({
  renderScene: function(route, navigator) {
    var Component = route.component;
    return (
      <Component navigator={navigator} route={route} {...route.passProps} />
    );

    ????????????????
  },

  render: function() {
    return (
      <Navigator
        ref="navigator"
        style={styles.navigator}
        renderScene={this.renderScene}
        initialRoute={{
          component: LightboxView1,
        }}
      />
    );
  }
});

var styles = StyleSheet.create({
  navigator: {
    flex: 1,
  },
  container: {
    paddingHorizontal: BASE_PADDING,
  },
  closeButton: {
    color: 'white',
    borderWidth: 1,
    borderColor: 'white',
    padding: 8,
    borderRadius: 3,
    textAlign: 'center',
    margin: 10,
    alignSelf: 'flex-end',
  },
  customHeaderBox: {
    height: 150,
    backgroundColor: '#6C7A89',
    justifyContent: 'center',
    alignItems: 'center',
  },
  row: {
    flexDirection: 'row',
    marginLeft: -BASE_PADDING,
    marginRight: -BASE_PADDING,
  },
  col: {
    flex: 1,
  },
  square: {
    width: WINDOW_WIDTH/2,
    height: WINDOW_WIDTH/2,
    justifyContent: 'center',
    alignSelf: 'center',
  },
  squareFirst: {
    backgroundColor: '#C0392B',
  },
  squareSecond: {
    backgroundColor: '#019875',
  },
  squareText: {
    textAlign: 'center',
    color: 'white',
  },
  contain: {
    flex: 1,
    height: 150,
  },
  text: {
    marginVertical: BASE_PADDING*2,
  },
});

AppRegistry.registerComponent('Example', () => Example);

how can i change scene between LightboxView1 and LightboxView?
thx

Great module! It really makes it easy to add functionality to apps quickly. However, I was having one issue. I'm giving my image inside the lightbox a height and width of 200 and I want the image to take up the entire square, so I give it a resizeMode of 'cover'. But when you click on the image and the lightbox appears, I want the image to be as large as it can be without being cut off, so I used activeProps={{resizeMode: 'contain'}} so when the lightbox appears, you will see the entire image. It technically works; however, it's choppy. Basically, when you click on the image, the resizeMode changes right away, so the picture shrinks quickly before the lightbox appears. Then, when you close the lightbox, the image will shrink back down to it's original size, and then resizeMode will change after the animation, causing the same jumpy behavior. Is there any way to get around this / make the experience smoother.

Also, maybe even instead of that, would there be a way to make the lightbox simply fade away when closed instead shrinking back to it's original size. I did find the place in your code to make the change so the thumbnail won't disappear when the lightbox appears. And then, maybe if you swipe the lighbox down, the lightbox could just slide away (that's how the twitter app works now, at least on iOS). And if you click the close button, maybe the lightbox could just fade away without resizing?

Is it possible to use lightbox with parallaxview ?
https://github.com/oblador/react-native-parallax/

I don't get why its not working

Edit : Apparently its because of this style in parallax view :

  backgroundImage: {
    position: 'absolute',
    backgroundColor: 'transparent',
    overflow: 'hidden',
    top: 0
  },

If I delete "position: 'absolute'," lightbox is working fine but parallax is broken.

So Lightbox is not working if we have position: 'absolute' on the component, why?

I have this code:

    <Lightbox
                        navigator={this.props.navigator}
                        activeProps={
                            {
                                style: {
                                    width: Dimensions.get('window').width,
                                    height: Dimensions.get('window').height
                                },
                                resizeMode: 'contain'
                            }
                        }
                    >
                    <Image
                        source={require('../Resources/centro.png')}
              resizeMode= {Image.resizeMode.cover}
              style={{height: 120, flex: 1}}
                    />
          </Lightbox>

The problem is the effect when image dismiss.
The effect run perfect but i have diferent "resize mode" in full screen and in normal mode.
How can i disable the effect? The effect image istn similar in size and position that the real image in resizeMode 'contain'.

Edit: I like more the effect image than the real image on "Image" item. How can i reproduce it?

Some screens for explain better:
Image during effect (overlay navBar) :

Final Image on cover mode:

Hi @oblador i tried to manually close modal box but it appears it does not close always.
i tried this one _this.refs._animation.onClose();

Is it the right way? why it does not close always. also modal box have the hightest z index. how can i show my screen on the top of modal box. will you please guide me?

Thanks for sharing this package. Please how do I display a thumbnail or smaller version of the image and show the full size with the Lightbox? Is that possible?

in practice, it would be likely to override the close button but add other views like toolbar or topbar

How can I use lightbox inside webview?

In webview I include like this

const injectScript = (html, bgColor) => "" + script
+ ''
+ '<Image style="height: 200px; width: 200px" '
+ 'resizeMode="contain" '
+ 'src="https://www.yayomg.com/wp-content/uploads/2014/04/yayomg-pig-wearing-party-hat.jpg" '
+ '/> '
+ '' + "";

render() {
const {html, style, bgColor, ...otherProps} = this.props;

    // if (!BODY_TAG_PATTERN.test(html)) {
    //     throw new Error("Cannot find </body> from: " + html);
    // }
    // 
    // console.log(bgColor);

    return (
        <WebView
            {...otherProps}
            source={{html: injectScript(html, bgColor)}}
            scrollEnabled={false}
            style={[style, {height: this.state.documentHeight}]}
            onNavigationStateChange={this.handleNavigationChange}
        />
    );
}

But it doesn't work

Hey, it's me again!

I'm tweaking this component quite a bit to fit one of my need, but I can't find a way to animate the image height on open/close:
Using onOpen & onClose cause a "glitch" (which is - in fact - the expected behavior) : resizing height with this.state.height onOpen and onClose does not animate the element but instead cause an abrubt resizing (which, in the case of onClose happen after the element closed, and not while closing).
Is there a clean way to achieve this? If you need more info, I can put up a gist you can look at!

(Also, there is a couple a feature that could be easily added and would be pretty cool, like a position property to define if the element should be centered or at the top/bottom of the overlay. Should I open other issues to display them?)

Cheers!

I have to specify height and width in style of Image inside lightbox component, otherwise Image doesn't occur. I want my image to take same height and width as my parent which is lightbox, so I am passing flex:1 to my Image style.

I'm experiencing an issue that appears to be a z-index issue when a custom NavigationBar is present.
If a NavigationBar is present, its buttons respond to clicks and the Lightbox header's buttons do not.

I forked and altered this repo's example to demonstrate:
https://github.com/jholton/react-native-lightbox/blob/master/Example/index.js

When I run the example now, the first photo never loads for me.

Click any photo.
I added a Left and a Right button in the Navigation bar.
In the lightbox, click where you would expect the Left or Right button to be, and they will trigger. The lightbox buttons will not trigger. Then, the Navigator transitions back to the view and the image is gone!

Is this a bug, or am I doing something wrong?

Thanks.

I want remore or increas the speed of the animation when a lightbox is pressed, is there a way to do that?

Why don't Lightbox.js
passProps: this.getOverlayProps()
update
props: this.getOverlayProps()

components We need to define your own props is not inside

The picture after clicking disappeared

Hey guys,

I am try to fix an issue when switch the device orientation. I have tried to use the activeProps but it only change the size of the image while is necessary to change the LightboxOvelay also.

Any idea how to fix this?

I'm loving the quick opening and closing of photos like the WhatsApp and Twitter app. But I have a bar with social interactions (like, reply, etc) on the bottom of the View I load. On top of that it's using the ScrollView with pinch-to-zoom for photos.

All those things don't work with swipeToDismiss enabled (buttons, pinch-to-zoom, etc). Any way to not overwrite these interactions inside the modal?

I understand this all happens in PanResponder, but I'm not sure what to change there..

Howdy, thanks for creating this library! I'm having a problem with choppy animation opening a carousel, and haven't had success passing down my navigator. Is there a simple way to disable the opening animation?

navigator-refactor not works well on ios, if navigator without navigatorBar, and after app just lanch, click image, the lightbox show, but without background, if navigator push any other sence and pop back, that works well

Assume we have a button inside the content, when the lightbox opens I can't press the button beneath. But when I disable swipeToDismiss it works as expected.

I think it's about pan responders.

Any ideas or workarounds ?

I'm using react-native-router-flux and it uses NavigationExperimental, any chance to support it?

Thanks!

Hello,

I've just tried using this module with my app. I'm using RN v0.19

When I wrapped my <Image /> with <Lightbox> I got a white space instead of the photo and nothing happen when i tap on it.

I just copied the example from the read me file.
Does it work with 0.19?

Hi!

When trying to apply a (Blurview)[https://github.com/Kureev/react-native-blur#installation] to an Image component inside a lightbox, I get the following error :

Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `Layout`

Any idea on why I can't apply blur on a Lightbox Image?

Cheers

EDIT: can we delete this? It appears that I was just using BlurView wrong: my bad!

A month ago when I used haven't happened this warning, yesterday I review my pic list component, this warning alert, again and again, no matter I try to catch the warning, not work.

warning as follow

02-13 00:20:08.724 2102-31244/com.electromechanicalfamily W/ReactNativeJS: Warning: Failed prop type: Required prop `onRequestClose` was not specified in `Modal`.
                                                                               in Modal (created by LightboxOverlay)
                                                                               in LightboxOverlay (created by Lightbox)
                                                                               in RCTView (created by View)
                                                                               in View (created by Lightbox)
                                                                               in Lightbox (created by StaticRenderer)
                                                                               in RCTView (created by View)
                                                                               in View (created by StaticRenderer)
                                                                               in StaticRenderer (created by ListView)
                                                                               in RCTView (created by View)
                                                                               in View (created by ScrollView)
                                                                               in RCTScrollView (created by ScrollView)
                                                                               in ScrollView (created by ListView)
                                                                               in ListView (created by StaticRenderer)
                                                                               in RCTView (created by View)
                                                                               in View (created by StaticRenderer)
                                                                               in RCTView (created by View)
                                                                               in View (created by StaticRenderer)
                                                                               in StaticRenderer (created by ListView)
                                                                               in RCTView (created by View)
                                                                               in View (created by ScrollView)
                                                                               in RCTScrollView (created by ScrollView)
                                                                               in ScrollView (created by ListView)
                                                                               in ListView (created by ListView)
                                                                               in ListView (created by Test)
                                                                               in Test (created by BottomTap)
                                                                               in TabNavigatorItem (created by BottomTap)
                                                                               in StaticContainer (created by SceneContainer)
                                                                               in RCTView (created by View)
                                                                               in View (created by SceneContainer)
                                                                               in SceneContainer (created by TabNavigator)
                                                                               in RCTView (created by View)
                                                                               in View (created by TabNavigator)
                                                                               in TabNavigator (created by BottomTap)
                                                                               in RCTView (created by View)
                                                                               in View (created by DrawerLayoutAndroid)
                                                                               in AndroidDrawerLayout (created by DrawerLayoutAndroid)
                                                                               in DrawerLayoutAndroid (created by BottomTap)
                                                                               in BottomTap (created by Navigator)
                                                                               in RCTView (created by View)
                                                                               in View (created by Navigator)
                                                                               in RCTView (created by View)
                                                                               in View (created by Navigator)
                                                                               in RCTView (created by View)
                                                                               in View (created by Navigator)
                                                                               in Navigator (created by ElectromechanicalFamily)
                                                                               in ElectromechanicalFamily (created by Root(ElectromechanicalFamily))
                                                                               in StaticContainer (created by Root(ElectromechanicalFamily))
                                                                               in RCTView (created by View)
                                                                               in View (created by Root(ElectromechanicalFamily))
                                                                               in Root(ElectromechanicalFamily)
                                                                               in RCTView (created by View)
                                                                               in View (created by AppContainer)
                                                                               in RCTView (created by View)
                                                                               in View (created by AppContainer)
                                                                               in AppContainer

my code

export default class LittleGround extends Component{
    renderScene(route, navigator) {
        var Component = route.component;

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

    render() {
        return (
            <Navigator
                ref="navigator"
                style={{ flex: 1 }}
                renderScene={this.renderScene.bind(this)}
                initialRoute={{
                    component: Test,
                }}
            />
        );
    }
}

.....

 picList(rowData, sectionID, rowID){
        var picUri = BASEURL+'/message/'+rowData;
        try{
            if(rowData!==null){
                return (
                    <View>
                        <Lightbox style={styles.itemContainer} springConfig={{tension: 50, friction: 5}} renderContent={this.renderCarousel.bind(this,picUri)}>
                            <Image
                                style={styles.imageItem}
                                source={{uri:picUri}}
                                resizeMode={'cover'}
                            />
                        </Lightbox>
                    </View>
                );
            }
        }catch(e){
            console.log(e);
        }
        return null
    }

    renderCarousel(uri) {
        return (
            <Carousel style={{ width: device.width, height: device.height }}>
                <Image
                    style={{flex: 1}}
                    resizeMode="contain"
                    source={{ uri: uri }}
                />
            </Carousel>
        );
    }

Everything goes well, but the warning can't ne solved.

My code looks like :

<View style={styles.cardImageBackground}>
     <Lightbox navigator={this.props.navigator}>
         <Image resizeMode="cover"
                  style={[styles.cardImage, {height: 300}]}
                  source={{uri: this.state.image}}>
          </Image>
      </Lightbox>
</View>

Image shows fine and when I click on it instead of opening lightbox, it shows this error.
I am using react-native version 0.21.0

I have tested it with modules's latest version 0.6.0 as well as 0.5.1

I mean if i have few image on the page and i click on one of them, can i swipe with the hand to the next image?

How can i set image to full width on open. I tried using activeProps but couldn't get that to work, I also tried to use callback for open but the effect was not disable as it just popped to width of device at end of animation.

https://dl.dropboxusercontent.com/u/2175584/Lightbox.mov

Great plugin, I just have a performance problem (on iPhone 6 & iPhone 5) when closing a lightbox (cover or not). The animation become super laggy and can also make the app crash if closed too fast.

Any idea?

Cheers

I am facing an issue with navigator. I see that to get the current route light box have used
var routes = this.props.navigator.getCurrentRoutes();

but i see that this.props.navigato.navigationContext having CurrentRoute, am I missing something here
I am using NavigatorIOS and passing this.props.navigator

I have a thumbnail image in a list of items:

<Lightbox activeProps={{width: 300, height: 300}}>
    <Image style={{ width: 40, height: 40, marginRight: 5 }} source={{uri: this.props.image}}/>
</Lightbox>

When I click on the image, it just places the 40x40 image on a black background. My understanding was that setting a new width and height on activeProps should scale the image up.

I'm using RN 0.22.2, and RN Lightbox 0.6.0

How can we make lightbox with image slider like facebook? is there any way to do that?

I am using react-native 0.27.2 and just used example specified

@oblador thanks a lot man. What a great plugin.
One thing I realized is when you close the lightbox, it takes a second or two to update the previous props of image. Is there anything we can do to improve that?

Thanks a lot.

--EDIT--
Managed it by putting setState outside Animated.spring. Seems animated takes a delay in there. Any tips?

always shows an error as Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
Check the render method of 'LightboxView'.

Would it be possible to pass the popup lightbox an array of images, which could be scrolled through in fullscreen view?

In ios the application is closed when you open the component lightbox

Hey, first of all great work!

I tried using it in my project but when I open an image/text in the lightbox view the second time it acts funny. Basically, the second time onwards, the image/text will open in the fullscreen mode at the position where it was closed the first time.

So then I installed 0.3.0 version and it works as it should. Looks like something changed from 0.3.0 to 0.4.0

When I close an open lightbox image, it zooms out into its original position, but then displays a white screen for 2-3 seconds before rending the rest of the page, any ideas?

Hello,

NavigatorIOS has not getCurrentRoute(). so error when navigator={this.props.navigator}

Very nice update using the animated library! It really is smoother and lighter!

Do you think it would be possible - just like facebook lightbox - to enable a pinch to zoom?

Have a great day

onRequestClose Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func

can you fix it?

I've got to be missing something basic, but for the life of me I don't know what it is.

Copy/Paste example from readme, yes I have navigator in props.

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

💥 BOOM:

https://github.com/oblador/react-native-lightbox/blob/master/LightboxOverlay.js#L187

React Native 0.22 - https://github.com/infinitered/react_native_base/tree/light-box

i can't use renderContent