• Stars
    star
    2,818
  • Rank 16,155 (Top 0.4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 9 years ago
  • Updated about 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Images etc in Full Screen Lightbox Popovers for React Native

react-native-lightbox

Installation

yarn add react-native-lightbox

Usage

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

import Lightbox from 'react-native-lightbox';

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>
);

Navigator setup/Android support

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
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
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.
springConfig object Animated.spring configuration, defaults to { tension: 30, friction: 7 }.

Demo

Demo

Example

Check full example in the Example folder.

License

MIT License. © Joel Arvidsson

More Repositories

1

react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.
JavaScript
17,427
star
2

react-native-animatable

Standard set of easy to use animations and declarative transitions for React Native
JavaScript
9,838
star
3

react-native-progress

Progress indicators and spinners for React Native
JavaScript
3,628
star
4

hush

🤫 Noiseless Browsing – Content Blocker for Safari
JavaScript
3,264
star
5

react-native-keychain

🔑 Keychain Access for React Native
Kotlin
3,194
star
6

react-native-collapsible

Animated collapsible component for React Native, good for accordions, toggles etc
JavaScript
2,450
star
7

loki

👁 Visual Regression Testing for Storybook
JavaScript
1,778
star
8

react-native-image-progress

Progress indicator for networked images in React Native
JavaScript
1,723
star
9

angular-scroll

Scrollspy, animated scrollTo and scroll events for angular.js
JavaScript
1,482
star
10

react-native-performance

📐 Monitor and measure React Native performance
TypeScript
929
star
11

react-native-store-review

Rate on App/Play Store directly in your React Native app
Java
751
star
12

react-native-shimmer

Simple shimmering effect for any view in React Native
Java
700
star
13

react-native-esbuild

Fast bundler and dev server for react-native using esbuild
JavaScript
595
star
14

react-native-parallax

Parallax effects for React Native using Animated API
JavaScript
585
star
15

react-native-vector-image

iOS/Android native vector assets generated from SVG
JavaScript
310
star
16

react-native-pinchable

Instagram like pinch to zoom for React Native
Java
225
star
17

angular-parallax

Lightweight & performant parallax scrolling for angular.js.
JavaScript
203
star
18

angular-lazytube

Lightweight, responsive, lazy loaded YouTube videos that degrades gracefully.
JavaScript
45
star
19

diglett

Keep your JS project lean by detecting duplicate dependencies
JavaScript
44
star
20

esbuild-server

Fast, lightweight and powerful development server for esbuild
TypeScript
38
star
21

react-native-oxc

10x your react-native builds with OXC
TypeScript
28
star
22

oblador.github.io

Landing page for my GitHub projects
HTML
10
star
23

oblador

5
star
24

node-cloud-imager

Powerful yet simple way to apply filters/crop/resize images and upload to cloud providers (Amazon S3, Rackspace, Azure).
JavaScript
3
star
25

node-ups-sdk

JavaScript
3
star
26

sovra

🤏 Rust-based Test Decider for JavaScript using Oxc
Rust
2
star
27

expo-requestidlecallback-issue

TypeScript
1
star
28

react-native-android-autolinking-bug-repro

TypeScript
1
star
29

.github

1
star
30

react-native-fabric-image-unicode-issue

TypeScript
1
star