Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with source, no view loaded. #38

Closed
RZulfikri opened this issue Mar 1, 2017 · 27 comments
Closed

Problem with source, no view loaded. #38

RZulfikri opened this issue Mar 1, 2017 · 27 comments

Comments

@RZulfikri
Copy link

RZulfikri commented Mar 1, 2017

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

@RZulfikri RZulfikri changed the title How to add source by uri ? Problem with source, no view loaded. Mar 1, 2017
@shahen94
Copy link
Owner

shahen94 commented Mar 1, 2017

@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
Copy link
Owner

shahen94 commented Mar 1, 2017

88ce49b

@shahen94 shahen94 closed this as completed Mar 1, 2017
@RZulfikri
Copy link
Author

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

simulator screen shot mar 2 2017 7 00 17 am

and my code :
screen shot 2017-03-02 at 7 02 21 am

did i miss something ?

@shahen94 shahen94 reopened this Mar 2, 2017
@shahen94
Copy link
Owner

shahen94 commented Mar 2, 2017

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
Copy link
Author

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
Copy link
Owner

shahen94 commented Mar 2, 2017

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

@flybayer
Copy link
Contributor

flybayer commented Mar 2, 2017

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

@RZulfikri
Copy link
Author

@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
Copy link
Author

@shahen94 when i try on android it work

This the view when i try in ios and android.

Android IOS
screenshot_2017-03-03-09-53-32-851_id veedy mobile simulator screen shot mar 3 2017 9 53 39 am

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
Copy link
Owner

shahen94 commented Mar 3, 2017

@RZulfikri you are using reacts natives images picker right ?

@RZulfikri
Copy link
Author

@shahen94 yup..

@shahen94
Copy link
Owner

shahen94 commented Mar 3, 2017

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

@RZulfikri
Copy link
Author

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
Copy link
Owner

shahen94 commented Mar 3, 2017

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

@RZulfikri
Copy link
Author

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

@shahen94
Copy link
Owner

shahen94 commented Mar 3, 2017

@RZulfikri not only, i used it on simulator

@shahen94
Copy link
Owner

shahen94 commented Mar 3, 2017

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

@RZulfikri
Copy link
Author

@shahen94 what should i do then ?

@shahen94
Copy link
Owner

shahen94 commented Mar 4, 2017

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

@RZulfikri
Copy link
Author

@shahen94 ok thank you, i will try..

@RZulfikri
Copy link
Author

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

screen shot 2017-03-05 at 5 20 57 pm

@RZulfikri
Copy link
Author

@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
Copy link
Author

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

@shahen94
Copy link
Owner

@RZulfikri do you still have this issue ?

@RZulfikri
Copy link
Author

@shahen94 For IOS ? yes..

@shahen94
Copy link
Owner

shahen94 commented Mar 26, 2017

Well, let's try to link android manually.

  1. for the first unlink library
$ react-native unlink react-native-video-processing

after that

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

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

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

  4. 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')
  1. Insert the following lines inside the dependencies block in android/app/build.gradle:
    compile project(':react-native-video-processing')
  1. And then link iOS version again as demonstrated in the video.

#48

@RZulfikri
Copy link
Author

@shahen94 thanks

@shahen94 shahen94 closed this as completed Apr 4, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants