Setting the Image Source Using RNFetchBlob

[GenericJam]

I don't know if this is an issue with React Native or with RNFetchBlob.
I'm taking a picture and I want to show it to the user so they can verify they want that image to upload to the server.

The file is accessible by RNFetchBlob and I can verify it is there using fs.exists, so RNFetchBlob recognizes it. Then when I try to put it into an <Image> either by source={require(imageSource)} or source={{uri: imageSource}}, it fails.

If I use require it fails with the error: Unknown named module: '/data/user/0/com.myapp/files/photo.jpg'.

To save the file:

var imageLocation = urljoin(RNFetchBlob.fs.dirs.DocumentDir,  'photo.jpg');

RNFetchBlob.fs.writeFile(imageLocation, RNFetchBlob.base64.encode(data), 'base64')
.then(() => {
     console.log('Picture saved to ' + imageLocation);
     this.setState({pictureLocation: imageLocation});
});

To show it later:

<Image source={require(this.state.pictureLocation)} style={{width:200, height:200}} />`

I've tried it with and without 'file://' at the beginning of the image path as well as RNFetchBlob.wrap().

This is on Android.

I've gone over this many times backward and forward and I can't figure it out. Any ideas what I'm doing wrong?

[GenericJam]

Isn't require one of the standard ways to define the Image source?
React Native Image

[lll000111]

Okay, so it's not the CommonJS one. Got it.

[GenericJam]

I've got it working now.... I don't really know what I actually did differently. I'm not even sure what I was doing wrong.... I must have just been missing the solution each time. For anyone with a similar problem in the future make sure you have your image set to a specific size you know you can see and if the screen is blank just wait about 30 seconds to confirm it isn't just slow due to debug mode. That's the only thing I can think of.