Necessarily Precedes Mischief

    @dooboo-ui/pinch-zoom-slider-modal
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published

    PinchZoomSliderModal

    [PinchZoomSliderModal] is a image swiper with pinch zoom functionality.

    pinchzoom

    Props

    necessary types default
    containerStyle ViewStyle
    visible boolean true
    renderCloseElement () => ReactElement null
    renderIndicator () => ReactElement null
    onClose () => void
    onPageChanged (page: number) => void
    images ImageSourcePropType[] []
    defaultImageSource ImageURISource null

    Installation

    yarn add @dooboo-ui/core

    Getting started

    Note that this ui element does not exist in @dooboo-ui/core itself. Please install below package.

    yarn add @dooboo-ui/pinch-zoom-slider-modal
    • Import

      import PinchZoomSliderModal from '@dooboo-ui/pinch-zoom-slider-modal';
    • Example

      import React, { ReactElement, useState } from 'react';
      import { Text, TouchableOpacity, View } from 'react-native';
       
      import { ContainerDeco } from '../decorators';
      import PinchZoomSliderModal from '../../lib/package/PinchZoomSliderModal';
      import { storiesOf } from '@storybook/react-native';
      import styled from 'styled-components/native';
       
      storiesOf('PinchZoomSliderModal', module)
        .addDecorator(ContainerDeco)
        .add('default', () => (
          <>
            <Default />
          </>
        ));
       
      const Container = styled.View`
        flex: 1;
        background-color: transparent;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      `;
       
      const images = [
        // IC_LOGO,
        { uri: 'https://images.unsplash.com/photo-1519335337423-a3357c2cd12e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2168&q=80' },
        { uri: 'https://www.housingwire.com/wp-content/uploads/2019/09/Purple-technology-data-internet-3.jpg' },
        { uri: 'https://images.unsplash.com/photo-1543007354-0bc99b7d096b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80' },
        { uri: 'https://p.bigstockphoto.com/eIdTXLbqQilMs9xbjvcs_bigstock-Aerial-View-Of-Sandy-Beach-Wit-256330393.jpg' },
        { uri: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460' },
      ];
       
      function Default(): ReactElement {
        const [visible, setVisible] = useState<boolean>(false);
        const [pageNum, setPageNum] = useState<number>(0);
       
        return (
          <Container>
            <TouchableOpacity
              onPress={(): void => setVisible(true)}
            >
              <Text
                style={{
                  fontSize: 24,
                  color: 'blue',
                }}
              >Open PinchZoomSliderModal!</Text>
            </TouchableOpacity>
            <PinchZoomSliderModal
              renderCloseElement={
                (): ReactElement =>
                  <Text
                    style={{
                      fontSize: 24,
                      color: 'blue',
                    }}
                  >Close</Text>
              }
              images={images}
              visible={visible}
              onClose={(): void => setVisible(false)}
              onPageChanged={(page: number): void => setPageNum(page)}
              renderIndicator={(): ReactElement => <View style={[
                {
                  position: 'absolute',
                  bottom: 80,
                },
              ]}>
                <Text>{pageNum + 1} / {images.length}</Text>
              </View>}
            />
          </Container>
        );
      }

    Install

    npm i @dooboo-ui/pinch-zoom-slider-modal

    DownloadsWeekly Downloads

    1

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    504 kB

    Total Files

    8

    Last publish

    Collaborators

    • jongtaek
    • yujonglee
    • do02reen24
    • dooboolab