Skip to content
Work in progress
JavaScript
Branch: master
Clone or download
Latest commit be3a952 Aug 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea initial version Mar 11, 2019
img better readme Mar 11, 2019
src sdk 34 imports compatibility Aug 12, 2019
.babelrc Initial commit Mar 1, 2019
.eslintrc.json Initial commit Mar 1, 2019
.gitignore Initial commit Mar 1, 2019
.travis.yml fix script Aug 12, 2019
README.md fix docs to sdk 34 Aug 12, 2019
jest.config.js Initial commit Mar 1, 2019
package.json 2.1.2 Aug 12, 2019
yarn.lock

README.md

Expo Image Deep Zoom

Use MapView to zoom big images

Zoom image

Installation

yarn add expo-image-deep-zoom

Usage

import React from 'react'
import { InteractionManager, ActivityIndicator } from 'react-native'
import * as FileSystem from 'expo-file-system'

import DeepZoom from 'expo-image-deep-zoom'

export default class Planta extends React.Component {
  static navigationOptions = { title: 'Planta' }
  state = { uri: null, cacheDirectory: null }

  componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      const uri = `${FileSystem.documentDirectory}my-image.jpg`
      const cacheDirectory = `${FileSystem.documentDirectory}my-image`
      this.setState({ cacheDirectory, uri })
    })
  }

  render() {
    const { uri } = this.state

    if (!uri) return <ActivityIndicator size='large' style={{ flex: 1 }}/>
    return <DeepZoom
      imageUri={this.state.uri}
      cacheDirectory={this.state.cacheDirectory}
      maxZoom={6}
    />
  }
}

Author

Daniel Fernando Lourusso

You can’t perform that action at this time.