HomeOur TeamContact

Light Box

By Utkarsh Lubal
Published in UI
June 16, 2022
1 min read
Light Box

Table Of Contents

01
Introduction
02
Installation
03
App.js
04
Properties
05
Tutorial

Introduction

Lightbox is Shoutem’s fork of react-native-lightbox component. All content within Lightbox is transformable, meaning it can be pinched to zoom, panned (translated), etc.

Installation

 npm install --save react-native-lightbox

App.js

import React, { Component } from 'react';

import { StyleSheet, ScrollView, Text, Image, View } from 'react-native';

import Lightbox from 'react-native-lightbox';

export default class App extends Component {

  render() {
    return (

      <ScrollView style={styles.container} >

          <View style={styles.text}>
            <Text>Hello Guys, Welcome to ReactNativeCode.com, Today we are going to learn about Lightbox in React Native. </Text>
          </View>

          <Lightbox underlayColor="white">
            <Image
              style={styles.contain}
              resizeMode="contain"
              source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2017/06/sample_image.png' }}
            />
          </Lightbox>

        </ScrollView>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 20,
  },
  contain: {
    flex: 1,
    height: 200,
  },
  text: {
    marginVertical: 20,
    textAlign: 'center'
  },
});

Properties

PropTypeDescription
activePropsobjectOptional set of props applied to the content component when in lightbox mode. Usable for applying custom styles or higher resolution image source.
renderHeader(close)functionCustom header instead of default with X button
renderContentfunctionCustom lightbox content instead of default child content
willClosefunctionTriggered before lightbox is closed
onClosefunctionTriggered when lightbox is closed
onOpenfunctionTriggered when lightbox is opened
didOpenfunctionTriggered after lightbox is opened
underlayColorstringColor of touchable background, defaults to black
backgroundColorstringColor of lightbox background, defaults to black
swipeToDismissboolEnables gestures to dismiss the fullscreen mode by swiping up or down, defaults to true.
springConfigobjectAnimated.spring configuration, defaults to { tension: 30, friction: 7 }.

Tutorial


Previous Article
Popup Menu
Next Article
HTML to PDF
Utkarsh Lubal

Utkarsh Lubal

Full Stack Developer

Related Posts

Vertical Step indicator
Vertical Step indicator
May 06, 2023
1 min

Quick Links

Advertise with usAbout UsContact Us

Social Media