👀 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
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-v2Note: 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>
);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>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,
}}
/>
);| 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 }. |
Check full example in the Example folder.
MIT License. © Joel Arvidsson
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent