react-native-image-resizer: Cannot read file with React Native FS

Not sure what’s going on here: Here’s a sample app I am working on and am debugging.

'use strict';
import React, { Component } from 'react';
import {
  AppRegistry,
  Dimensions,
  StyleSheet,
  Text,
  TouchableHighlight,
  View
} from 'react-native';
import Camera from 'react-native-camera';

import ImageResizer from 'react-native-image-resizer';

var cv = require('./computervision');
global.Buffer = global.Buffer || require('buffer').Buffer;
import RNFS from 'react-native-fs';

class testcase2 extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Camera
          ref={(cam) => {
            this.camera = cam;
          }}
          style={styles.preview}
          aspect={Camera.constants.Aspect.fill}>
          <Text style={styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]</Text>
        </Camera>
      </View>
    );
  }

  takePicture() {
    this.camera.capture()
      .then((data) => {
        console.log(data);
        ImageResizer.createResizedImage(data.path, 736, 500, 'JPEG', 25, 0)
        .then((cv_image) => {
          var img = 'file:///' + (cv_image.replace('file:/', ''));

          setTimeout(() => {

            RNFS.readFile(img, 'UTF8')
            .then((file) => {
              console.log(file);
              file = new Buffer(file);
              console.log("Running CV App");
              cv(file);
            })

          }, 2500);

        })
        .catch((err) => {
          if (err) throw err;
        });
      })
      .catch(err => console.error(err));
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
    height: Dimensions.get('window').height,
    width: Dimensions.get('window').width
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    color: '#000',
    padding: 10,
    margin: 40
  }
});

AppRegistry.registerComponent('testcase2', () => testcase2);

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 19 (7 by maintainers)

Commits related to this issue

Most upvoted comments

yes but react-native-fs only has a problem with the path returned from the image-resizer on android on iOS this works without a problem but that path has no file: prefix.

In our Project we need to remove the file: prefix to make this work on Android. Why are you adding this here? https://github.com/bamlab/react-native-image-resizer/blob/master/android/src/main/java/fr/bamlab/rnimageresizer/ImageResizerModule.java#L55

This is reaaally weird. I have been debugging for like 2 hours and being frustrated to why my Image from RNFS.downloadFile wont render on Android but it will on iOS.

If i add file:// before the path returned by .downloadFile it works on ANDROID and on iOS I just insert the path directly (without file://) is this how it should work??

@cooperka Sounds good to me, a comment in the README (maybe with a nice ⚠️ emoji 😃) could help and do not create a breaking change. Also we could explain that the image can be used as the source of an Image.

@4ian it’s tough to know what’s better! Maybe like you said, since it’s already there, for the sake of backward compatibility we should leave it and instead update the README to explain the need to remove file: on Android before using the path with something like fs.

@Okipa you shouldn’t be removing that slash, just file:.

Using originalPath.replace('file:', ''); fixes it for me.

@4ian would you like me to submit a PR removing the prefix on Android? I’d be happy to, but as you mention it will mean that the path can’t be directly used for <Image> sources on Android (the file:// scheme must be appended manually). That seems like a problem with <Image> itself, and not something you should be adding a workaround for in this library.