Local filesystem images don't display on Android

[ppetrick]

I'm uploading an image via Expo's ImagePicker, then manipulating it via Expo's ImageManipulator, and then assigning the resultant url to a state variable for display. I can't seem to get the resultant URI to work with your library. I've verified that the regular react-native Image display works, so I'm fairly certain it's the library.

Here is an example of the path that ImageManipulator is spitting out: file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540username%252Fappname/ImageManipulator/cef89f3f-6dce-4bec-a992-5813077e199e.jpg

I have version 4.1.0 installed. IOS works fine, as does Android with remote URIs. This only seems to be a problem on Android, and only with local filesystem (my guess it's something to do with accessing the local cache?). Here is a relevant code snippet:

class EditProfileScreen extends Component {
  state = { uploadURL: null };

  pickImage = async () => {
    // Camera permission code here
    const pickerResult = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
    });
    if (!pickerResult.cancelled) {
      const manipResult = await ImageManipulator.manipulateAsync(
        pickerResult.uri,
        [{ resize: { height: 100 } }],
        { format: 'jpeg', compress: 0.5 },
      );
      this.setState({ uploadURL: manipResult.uri });
    }
  }

  render() {
    return(
        <Image
          style={styles.avatar}
          uri={this.state.uploadURL}
        />
    );
  }
}

I realize that caching a temporary local file is a bit stupid on my part, but there's quite a bit more complexity built into the real use case, so it would be great if this library handled everything.

Thanks for making this library!

[Kerenby74]

no more? really!?

[Kerenby74]

I'm uploading an image via Expo's ImagePicker, then manipulating it via Expo's ImageManipulator, and then assigning the resultant url to a state variable for display. I can't seem to get the resultant URI to work with your library. I've verified that the regular react-native Image display works, so I'm fairly certain it's the library.

Here is an example of the path that ImageManipulator is spitting out: file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540username%252Fappname/ImageManipulator/cef89f3f-6dce-4bec-a992-5813077e199e.jpg

I have version 4.1.0 installed. IOS works fine, as does Android with remote URIs. This only seems to be a problem on Android, and only with local filesystem (my guess it's something to do with accessing the local cache?). Here is a relevant code snippet:

class EditProfileScreen extends Component {
  state = { uploadURL: null };

  pickImage = async () => {
    // Camera permission code here
    const pickerResult = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
    });
    if (!pickerResult.cancelled) {
      const manipResult = await ImageManipulator.manipulateAsync(
        pickerResult.uri,
        [{ resize: { height: 100 } }],
        { format: 'jpeg', compress: 0.5 },
      );
      this.setState({ uploadURL: manipResult.uri });
    }
  }

  render() {
    return(
        <Image
          style={styles.avatar}
          uri={this.state.uploadURL}
        />
    );
  }
}

I realize that caching a temporary local file is a bit stupid on my part, but there's quite a bit more complexity built into the real use case, so it would be great if this library handled everything.

Thanks for making this library!

I managed to figure out the problem of caching, because the same if () with double negation worked differently for ios and for android, the problem was that I erased the global cache in redux and could not get the path to retrieve the cache, maybe you have the same problem

[mmb12345]

I am facing this problem atm, what did you end up doing to fix it?

[d4v3d4vE]

Facing the same issue atm