Skip to content

eXist-FraGGer/react-native-image-size

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

64 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-image-size (iOS + Android)


Friends, sorry, but I can't now support this project as too busy and I am not working with react-native projects already few years....

If someone believes that he can support the project - let me know and I can add you to the Collaborators ([email protected])


NPM version

Android 4.0 (API level 14) introduced the ability to get original image size.

iOS uses Image.getSize https://facebook.github.io/react-native/docs/image#getsize

Installation

Download via NPM

npm i -S react-native-image-size

Download via Yarn

yarn add react-native-image-size

Afterward make sure to rebuild app, not just refresh bundler.

Linking (for React Native <= 0.59 only, React Native >= 0.60 skip this as auto-linking should work)

-- Automaticaly --

Link, either via react-native link or manually

react-native link react-native-image-size

-- Manually --

android/settings.gradle

+include ':react-native-image-size'
+project(':react-native-image-size').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-size/android')

android/app/build.gradle

dependencies {
  ...
+  implementation project(':react-native-image-size')
  ...
}

android/app/src/main/java/.../MainApplication.java

+import com.existfragger.rnimagesize.RNImageSizePackage;
...
@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<~>asList(
-    new MainReactPackage()
+    new MainReactPackage(),
+    new RNImageSizePackage()
  );
}

How to use

import ImageSize from 'react-native-image-size'
...
ImageSize.getSize(uri).then(size => {
    // size.height
    // size.width
})

You can also use async/await, if you would prefer.

import ImageSize from 'react-native-image-size'
...
foo = async () => {
  const { width, height } = await ImageSize.getSize(uri);
  // do stuff with width and height
}