A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/oblador/react-native-lightbox below:

oblador/react-native-lightbox: Images etc in Full Screen Lightbox Popovers for React Native

yarn add react-native-lightbox

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,
    }}
  />
);
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 }.

Check full example in the Example folder.

MIT License. © Joel Arvidsson


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4