'uri.match' is undefined trying to require audio file into video source

Question

Here is my code around this <Video /> element

class Menu extends Component {
    ...
    audioFile = null
    componentWillMount(){
        this.audioFile = require('../../assets/audio/subtle.mp3');
    }
}

<Video source={{uri: this.audioFile}}   // Can be a URL or a local file.
  ref={(ref) => {
    this.player = ref
  }}
  onError={this.audioError} 
  audioOnly
  style={styles.backgroundVideo}
  playInBackground
  playWhenInactive
  ignoreSilentSwitch={"ignore"}  
/>

The specific error I get is...

TypeError: uri.match is not a function. (In 'uri.match(/^\//)', 'uri.match' is undefined)

Here are the versions

expo: 30.0.0

expokit: 1.7.1

react: 16.3.1

react-native: https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz

react-native-video: 3.2.1

I'm trying to load an audio asset from the local package here, but I can't seem to get it to work, if I remove the audio file from that folder it throws an error that it can't find it so it's definitely finding the file.

Would love some help with this

Have you found any solution ? – Kishan Bharda May 24 '19 at 06:15 — Kishan Bharda, May 24 '19 at 06:15
@KishanBharda yes, see my answer – Jordan May 28 '19 at 20:23 — Jordan, May 28 '19 at 20:23

score 1 · Accepted Answer · answered May 28 '19 at 20:23

1

This is what made it work in my use case

<Video source={require('../../assets/audio/file.mp3')} ... />

answered May 28 '19 at 20:23

Jordan

2,393
4
30
60

Ok. This is nice one. Can you tell me how can I display video when I have uri like `photos://23E23...`? – Kishan Bharda May 29 '19 at 03:00
If the photo is on your device I believe you just use the URI bit. I haven't attempted to display a photo in this way before. I know that you can display base64 images with `{uri: 'data:...'}` so if you can get the base64 image data which I believe you can from a local photo lookup you could display it that way. – Jordan May 30 '19 at 13:36

score 0 · Answer 2 · answered May 24 '19 at 06:22

I found the solution. The variable audioFile itself contains the uri key.

So instead of

<Video source={{uri: this.audioFile}}   // Can be a URL or a local file.
  ...
  ...
/>

try this :

<Video source={this.audioFile}   // Can be a URL or a local file.
  ...
  ...
/>

Please notice that I have directly passed the this.audioFile to the source.

And more important thing is that, to display video you must have to pass height and width.

'uri.match' is undefined trying to require audio file into video source

2 Answers2