Giter VIP home page Giter VIP logo

react-native-zip-archive's Introduction

React Native Zip Archive npm npm

Zip archive utility for react-native

Installation

npm install react-native-zip-archive --save

Linking

Automatically (Recommend)

react-native link react-native-zip-archive

Manually

iOS

refer to the official guide

Android

  • Edit android/settings.gradle to look like this (without the +):

    rootProject.name = 'MyApp'
    
    include ':app'
    
    + include ':react-native-zip-archive'
    + project(':react-native-zip-archive').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-zip-archive/android')
  • Edit android/app/build.gradle (note: app folder) to look like this:

    apply plugin: 'com.android.application'
    
    android {
      ...
    }
    
    dependencies {
      compile fileTree(dir: 'libs', include: ['*.jar'])
      compile 'com.android.support:appcompat-v7:23.0.0'
      compile 'com.facebook.react:react-native:0.16.+'
    + compile project(':react-native-zip-archive')
    }
  • For react-native blew 0.19.0

    • Edit your MainActivity.java (deep in android/app/src/main/java/...) to look like this (note two places to edit):
    + import import com.rnziparchive.RNZipArchivePackage;
    
    ....
    
      @Override
      protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactRootView = new ReactRootView(this);
    
        mReactInstanceManager = ReactInstanceManager.builder()
          .setApplication(getApplication())
          .setBundleAssetName("index.android.bundle")
          .setJSMainModuleName("index.android")
          .addPackage(new MainReactPackage())
    +     .addPackage(new RNZipArchivePackage())
          .setUseDeveloperSupport(BuildConfig.DEBUG)
          .setInitialLifecycleState(LifecycleState.RESUMED)
          .build();
    
        mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);
    
        setContentView(mReactRootView);
      }
  • react-native 0.19.0 and higher

    • Edit your MainActivity.java (deep in android/app/src/main/java/...) to look like this (note two places to edit):
    package com.myapp;
    
    + import com.rnziparchive.RNZipArchivePackage;
    
    ....
    
      @Override
      protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
    +     new RNZipArchivePackage()
        );
      }
    
    }
  • For react-native 0.29.0 and higher ( in MainApplication.java )

    • Edit your MainApplication.java (deep in android/app/src/main/java/...) to look like this (note three places to edit):
    + import com.rnziparchive.RNZipArchivePackage;
    
    public class MainApplication extends Application implements ReactApplication {
      ...
        @Override
        protected List<ReactPackage> getPackages() {
          return Arrays.<ReactPackage>asList(
    -       new MainReactPackage()
    +       new MainReactPackage(),
    +       new RNZipArchivePackage()
          );
        }

Usage

import it into your code

import { zip, unzip, unzipAssets, subscribe } from 'react-native-zip-archive'

you may also want to use something like react-native-fs to access the file system (check its repo for more information)

import { MainBundlePath, DocumentDirectoryPath } from 'react-native-fs'

API

zip(source: string, target: string): Promise

zip source to target

Example

const targetPath = `${DocumentDirectoryPath}/myFile.zip`
const sourcePath = DocumentDirectoryPath

zip(sourcePath, targetPath)
.then((path) => {
  console.log(`zip completed at ${path}`)
})
.catch((error) => {
  console.log(error)
})

unzip(source: string, target: string): Promise

unzip from source to target

Example

const sourcePath = `${DocumentDirectoryPath}/myFile.zip`
const targetPath = DocumentDirectoryPath

unzip(sourcePath, targetPath)
.then((path) => {
  console.log(`unzip completed at ${path}`)
})
.catch((error) => {
  console.log(error)
})

unzipAssets(assetPath: string, target: string): Promise

unzip file from Android assets folder to target path

Note: Android only.

assetPath is the relative path to the file inside the pre-bundled assets folder, e.g. folder/myFile.zip. Do not pass an absolute directory.

const assetPath = `${DocumentDirectoryPath}/myFile.zip`
const targetPath = DocumentDirectoryPath

unzipAssets(assetPath, targetPath)
.then(() => {
  console.log('unzip completed!')
})
.catch((error) => {
  console.log(error)
})

subscribe(callback: ({ progress: number, filePath: string })): EmitterSubscription

Subscribe to the progress callbacks. Useful for displaying a progress bar on your UI during the process.

Your callback will be passed an object with the following fields:

  • progress (number) a value from 0 to 1 representing the progress of the unzip method. 1 is completed.
  • filePath (string) the zip file path of zipped or unzipped file.

Note: Remember to check the filename while processing progress, to be sure that the unzipped or zipped file is the right one, because the event is global.

Note: Remember to unsubscribe! Run .remove() on the object returned by this method.

componentDidMount() {
  this.zipProgress = subscribe(({ progress, filePath }) => {
    this.setState({ zipProgress: e.progress })
  })
}

componentWillUnmount() {
  // Important: Unsubscribe from the progress events
  this.zipProgress.remove()
}

Related Projects

react-native-zip-archive's People

Contributors

almostintuitive avatar andrew-stupchuk avatar benvium avatar buthrakaur avatar chirag04 avatar deividy avatar itinance avatar javache avatar light-of-king avatar lmvco avatar macrozone avatar mopx avatar plrthink avatar prometee avatar rbnquintero avatar zimo888 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.