Problem with source, no view loaded.

[RZulfikri]

I'm trying the usage example from readme, i use

<VideoPlayer
....
source={{ uri: this.props.uri }}
....
/>

and also for Trimmer

<Trimmer
....
source={{ uri: this.props.uri }}
....
/>

but, i got warning 'Failed prop type: Invalid prop source supplied to VideoPlayer' and no view loaded, also same for Trimmer . i got this in ios and android. did i miss something ?

then i'm trying using source={require('./video.mp4')} no error and no view loaded.

if you don't mind, would you add an example ?

thx

[shahen94]

@RZulfikri just add source string https://github.com/shahen94/react-native-video-processing/blob/master/lib/VideoPlayer/VideoPlayer.ios.js#L10

<VideoPlayer
....
source={this.props.uri}
....
/>

[shahen94]

https://github.com/shahen94/react-native-video-processing/commit/88ce49ba01f43c3d5cb5af76da38b73554a1761b

[RZulfikri]

already try that solution, but i got nothing in my view, it only litle red in left corner..

and my code :

did i miss something ?

[shahen94]

Can you please copy and past your source URI here, also please give me more details on which platform did you checked it, on which rn version do you use

[RZulfikri]

actually i use file from camera roll/device. I use image picker component, so the URI may look like "/Users/lembah8/Library/Developer/CoreSimulator/Devices/B187BB61-5580-423A-98BC-1E1D0F3D5FA2/data/Containers/Data/Application/D82AA33C-E5B0-467A-B4BD-B2F57E7EDBA4/tmp/trim.72D3B914-8A93-473D-8158-4046026A7C34.MOV"

i try it on IOS, using react-native 4.0

[shahen94]

seems like you linked library not correctly, check How to setup section

[flybayer]

I think when the path is like yours, @RZulfikri, you need to prepend file:// to the path.

[RZulfikri]

@shahen94 already try setup xcodeproj by following video tutorial for twice, but still got same problem.. @flybayer already try but still same..

can you add some example project ?

thanks.

[RZulfikri]

@shahen94 when i try on android it work

This the view when i try in ios and android.

Android	IOS

i guess i missing something when setup IOS but i dont know what. For information, my project didnt have "ProjectName-Bridging-Header.h" so i create one and add some code from your video. Did the problem because of that ?

[shahen94]

@RZulfikri you are using reacts natives images picker right ?

[RZulfikri]

@shahen94 yup..

[shahen94]

Well, as result it gives you object right, pass origUrl to source

[RZulfikri]

still same, i got uri like this "file:///Users/lembah8/Library/Developer/CoreSimulator/Devices/B187BB61-5580-423A-98BC-1E1D0F3D5FA2/data/Containers/Data/Application/5020CE67-D857-4C72-9166-C13D7060452E/tmp/trim.0B0D6057-ED5D-40EA-A8D0-FEDCE281F0CA.MOV"

[shahen94]

@RZulfikri origUrl gives you url from assets library, it should start with assets-library? .

[RZulfikri]

@shahen94 so i should try that on device ? because assets-library only for devices ?

[shahen94]

@RZulfikri not only, i used it on simulator

[shahen94]

@RZulfikri Definitely you're linked the library not correctly. React-native shows red border around unrecognized view.

[RZulfikri]

@shahen94 what should i do then ?

[shahen94]

@RZulfikri check chrome console, there should but an error, remove library from project and follow the video, and do all what it shows

[RZulfikri]

@shahen94 ok thank you, i will try..

[RZulfikri]

yeah you right. Already remove library and re-add library but still got this issue..

[RZulfikri]

@shahen94 i guess it because failed import method.. based on tutorial video, i must import RVVideoProcessing like #import "RNVideoProcessing.h" and it look same at "RNVideoProcessing.h" #import "RNTrimmerView.h" and i'm trying to add file directory before file name, but still got that error.. And thanks for your response

[RZulfikri]

@shahen94 i already follow step from readme and step from video, but still error..

[shahen94]

@RZulfikri do you still have this issue ?

[RZulfikri]

@shahen94 For IOS ? yes..

[shahen94]

Well, let's try to link android manually.

1. for the first unlink library

$ react-native unlink react-native-video-processing

after that

2. Open up android/app/src/main/java/[...]/MainApplication.java

3. Add import com.shahenlibrary.RNVideoProcessingPackage; to the imports at the top of the file

4. Add new new RNVideoProcessingPackage() to the list returned by the getPackages() method

5. Append the following lines to android/settings.gradle:

   include ':react-native-video-processing'
   project(':react-native-video-processing').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video-processing/android')

6. Insert the following lines inside the dependencies block in android/app/build.gradle:

   compile project(':react-native-video-processing')

7. And then link iOS version again as demonstrated in the video.

https://github.com/shahen94/react-native-video-processing/issues/48

[RZulfikri]

@shahen94 thanks