How close Lightbox by click backgound Scene?

[Q8hma]

Version

Tell us which versions you are using:

• react-native-router-flux v4.?.? (v3 is not supported)
  yes
• react-native v0.?.?
  0.52

i used Lightbox to show the image from small to large

but how can i close Lightbox if i click the backgound Scene?

thnx

[evianzhow]

Just some snippet from my code base.

First try to wrap the BaseLightbox into TouchableWithoutFeedback. Then customized the _panResponder to handle the correct touch event so that if user clicked inside the lightbox, it won't got disappeared.

render() {
  const { clickBackgroundToDismiss = true } = this.props;

  return (
    <TouchableWithoutFeedback disabled={!clickBackgroundToDismiss} onPress={this.closeModal}>
      <Animated.View style={[styles.container, { opacity: this.state.opacity }]}>
        {this._renderLightBox()}
      </Animated.View>
    </TouchableWithoutFeedback>
  );
}

constructor(props: Props) {
  super(props);

  this.state = {
    opacity: new Animated.Value(0),
    _panResponder: PanResponder.create({
      onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
    }),
  };
}

_handleStartShouldSetPanResponder = (e: Object, gestureState: Object): boolean => {
  return true;
}

And insider _renderLightBox, inject {...this.state._panResponder.panHandlers} props into the most upper component.

[Q8hma]

hello
first thnx for ur help but i got error

Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(SyntaxError in /Users/HMD/Desktop/Mobile-Project/q8hb/src/BaseLightbox.js: /Users/HMD/Desktop/Mobile-Project/q8hb/src/BaseLightbox.js: Invalid left-hand side in arrow function parameters (44:21) (null))

__38-[RCTCxxBridge loadSource:onProgress:]_block_invoke.242
    RCTCxxBridge.mm:419
___ZL36attemptAsynchronousLoadOfBundleAtURLP5NSURLU13block_pointerFvP18RCTLoadingProgressEU13block_pointerFvP7NSErrorP9RCTSourceE_block_invoke.118
__80-[RCTMultipartDataTask URLSession:streamTask:didBecomeInputStream:outputStream:]_block_invoke
-[RCTMultipartStreamReader emitChunk:headers:callback:done:]
-[RCTMultipartStreamReader readAllPartsWithCompletionCallback:progressCallback:]
-[RCTMultipartDataTask URLSession:streamTask:didBecomeInputStream:outputStream:]
__88-[NSURLSession delegate_streamTask:didBecomeInputStream:outputStream:completionHandler:]_block_invoke
__NSBLOCKOPERATION_IS_CALLING_OUT_TO_A_BLOCK__
-[NSBlockOperation main]
-[__NSOperationInternal _start:]
_dispatch_client_callout
_dispatch_block_invoke_direct
_dispatch_client_callout
_dispatch_block_invoke_direct
dispatch_block_perform
__NSOQSchedule_f
_dispatch_client_callout
_dispatch_continuation_pop
_dispatch_async_redirect_invoke
_dispatch_root_queue_drain
_dispatch_worker_thread3
_pthread_wqthread
start_wqthread

this is my code

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View, StyleSheet, Animated, Dimensions, Button,TouchableWithoutFeedback } from 'react-native';
import { Actions } from 'react-native-router-flux';
import { strings } from '../locales/I18n';

const { height: deviceHeight, width: deviceWidth } = Dimensions.get('window');

export default class BaseLightbox extends Component {
  static propTypes = {
    children: PropTypes.any,
    horizontalPercent: PropTypes.number,
    verticalPercent: PropTypes.number,
  }

constructor(props: Props) {
  super(props);

  this.state = {
    opacity: new Animated.Value(0),
    _panResponder: PanResponder.create({
      onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
    }),
  };
}

_handleStartShouldSetPanResponder = (e: Object, gestureState: Object): boolean => {
  return true;
}
  componentDidMount() {
    Animated.timing(this.state.opacity, {
      duration: 100,
      toValue: 1,
    }).start();
  }

  closeModal = () => {
    Animated.timing(this.state.opacity, {
      duration: 100,
      toValue: 0,
    }).start(Actions.pop);
  }

  _renderLightBox = (this.state._panResponder.panHandlers) => {
    const { children, horizontalPercent = 1, verticalPercent = 1 } = this.props;
    const height = verticalPercent ? deviceHeight * verticalPercent : deviceHeight;
    const width = horizontalPercent ? deviceWidth * horizontalPercent : deviceWidth;
    return (
      <View
        style={{
          width,
          height,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'white',
        }}
      >
        {children}
        <Button title={strings('text.close')} onPress={this.closeModal} />
      </View>
    );
  }

  render() {
    const { clickBackgroundToDismiss = true } = this.props;
    return (
    <TouchableWithoutFeedback disabled={!clickBackgroundToDismiss} onPress={this.closeModal}>
      <Animated.View style={[styles.container, { opacity: this.state.opacity }]}>
        {this._renderLightBox()}
      </Animated.View >
    </TouchableWithoutFeedback>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'rgba(52,52,52,0.5)',
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

[Q8hma]

Any help guys ?

Thanks and best regards

[evianzhow]

I thought I've made it clear.

PanHandlers should works like this:

_renderLightBox = () => {
    return (
      <View
        {this.state._panResponder.panHandlers}>
        {children}
        <Button title={strings('text.close')} onPress={this.closeModal} />
      </View>
    );
  }

[Q8hma]

thanks for your reply and im very sorry because im new in RN im sorry but i got this error

`Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(SyntaxError in /Users/HMD/Desktop/Mobile-Project/q8hb/src/BaseLightbox.js: /Users/HMD/Desktop/Mobile-Project/q8hb/src/BaseLightbox.js: Unexpected token, expected ... (49:13) (null))

__38-[RCTCxxBridge loadSource:onProgress:]_block_invoke.242
RCTCxxBridge.mm:419
___ZL36attemptAsynchronousLoadOfBundleAtURLP5NSURLU13block_pointerFvP18RCTLoadingProgressEU13block_pointerFvP7NSErrorP9RCTSourceE_block_invoke.118
__80-[RCTMultipartDataTask URLSession:streamTask:didBecomeInputStream:outputStream:]_block_invoke
-[RCTMultipartStreamReader emitChunk:headers:callback:done:]
-[RCTMultipartStreamReader readAllPartsWithCompletionCallback:progressCallback:]
-[RCTMultipartDataTask URLSession:streamTask:didBecomeInputStream:outputStream:]
__88-[NSURLSession delegate_streamTask:didBecomeInputStream:outputStream:completionHandler:]_block_invoke
NSBLOCKOPERATION_IS_CALLING_OUT_TO_A_BLOCK
-[NSBlockOperation main]
-[__NSOperationInternal _start:]
_dispatch_client_callout
_dispatch_block_invoke_direct
_dispatch_client_callout
_dispatch_block_invoke_direct
dispatch_block_perform
__NSOQSchedule_f
_dispatch_client_callout
_dispatch_continuation_pop
_dispatch_async_redirect_invoke
_dispatch_root_queue_drain
_dispatch_worker_thread3
_pthread_wqthread
start_wqthread
`

this is the code
`import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View, StyleSheet, Animated, Dimensions, Button } from 'react-native';
import { Actions } from 'react-native-router-flux';
import { strings } from '../locales/I18n';

const { height: deviceHeight, width: deviceWidth } = Dimensions.get('window');

export default class BaseLightbox extends Component {
static propTypes = {
children: PropTypes.any,
horizontalPercent: PropTypes.number,
verticalPercent: PropTypes.number,
}
constructor(props: Props) {
super(props);

this.state = {
opacity: new Animated.Value(0),
_panResponder: PanResponder.create({
onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
}),
};
}

_handleStartShouldSetPanResponder = (e: Object, gestureState: Object): boolean => {
return true;
}

componentDidMount() {
Animated.timing(this.state.opacity, {
duration: 100,
toValue: 1,
}).start();
}

closeModal = () => {
Animated.timing(this.state.opacity, {
duration: 100,
toValue: 0,
}).start(Actions.pop);
}

_renderLightBox = () => {
const { children, horizontalPercent = 1, verticalPercent = 1 } = this.props;
const height = verticalPercent ? deviceHeight * verticalPercent : deviceHeight;
const width = horizontalPercent ? deviceWidth * horizontalPercent : deviceWidth;
return (
<View {this.state._panResponder.panHandlers}
style={{
width,
height,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
}} >
{children}
<Button title={strings('text.close')} onPress={this.closeModal} />

);
}
render() {
const { clickBackgroundToDismiss = true } = this.props;
return (

<Animated.View style={[styles.container, { opacity: this.state.opacity }]}>
{this._renderLightBox()}
</Animated.View>

);
}
}

const styles = StyleSheet.create({
container: {
backgroundColor: 'rgba(52,52,52,0.5)',
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
justifyContent: 'center',
alignItems: 'center',
},
});
`

thanks and im so sorry

[Blapi]

<View {...this.state._panResponder.panHandlers}
  style={{
    width,
    height,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  }}>

[Q8hma]

thnx it work after i forgot to add "panResponder" :)

[b1acKr0se]

@evianzhow The scrolling inside the Lightbox is disabled following this approach. Do you know how to make it work?