ClojureScript + React-Native - Embed Videos

Question

I am new to ClojureScript. I would like to embed video (Youtube) to the hybrid mobile app using ClojureScript and React Native. I have tried to implement react-native-video and react-native-youtube plugins in ClojureScript for achieving this. But, both of these end with a crash. I don't know whether there is something wrong with referring to the library or not.

Using react-native-video:

(def Video (js/require "react-native-video"))
(def video-view (r/adapt-react-class Video))

The component reference is:

[video-view {:style {:position "absolute"
                            :top 0
                            :bottom 0
                            :left 0
                            :right 0}
                      :source {:uri "https://www.youtube.com/watch?v=M8Fn8SfXw3M"}}]

Using react-native-youtube:

(def YouTube (js/require "react-native-youtube"))
(def video-view (r/adapt-react-class YouTube))

The component reference:

[video-view {:style {:flex 1
                              :margin-bottom 60
                              :padding-top 10
                              :padding-bottom 10}
                      :video-id "M8Fn8SfXw3M"
                      :play true
                      :fullscreen true
                      :loop true}]

Neither of these two options is working.

Below is the crash report:

> Invariant Violation: Element type is invalid: expected a string (for
> built-in components) or a class/function (for composite components)
> but got: object This error is located at:
>      in RCTView
>      in RCTView
>      in RCTScrollView
>      in ScrollView
>      in t
>      in RCTView
>      in :page-art-single
>      in RCTView
>      in .a
>      in RCTView
>      in :main
>      in py
>      in RCTView
>      in RCTView
>      in t  Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite
> components) but got: object.    This error is located at:
>      in RCTView
>      in RCTView
>      in RCTScrollView
>      in ScrollView
>      in t
>      in RCTView
>      in :page-art-single
>      in RCTView
>      in .a
>      in RCTView
>      in :main
>      in py
>      in RCTView
>      in RCTView
>      in t  undefined is not an object (evaluating 'this.map.setNativeProps') D/ReactNative(15325):
> ReactInstanceManager.detachViewFromInstance()

I am using lein for compiling ClojureScript Re-Natal for building this ClojureScript-based React Native app.

Is there anything wrong with the above code? Anyone, please help?

Reference:

react-native-video

react-native-youtube

score 0 · Answer 1 · answered Nov 21 '18 at 15:39

0

Without knowing what error you're getting and which setup you have, try calling the modules like this instead:

(def Video (aget (js/require "react-native-video") "default"))

answered Nov 21 '18 at 15:39

vikeri

642
6
16

I updated the crash report and the utility I have used for building the project. I tried below method. (def Video (js/require "react-native-video")) (def video-view (r/adapt-react-class (oget Video "default"))) This time it didn't crash and I can successfully go to the page in which the video-view component added. But, I can't see the video component rendered in the view. – Tessy Thomas Nov 22 '18 at 10:12
What do you get if you print Video to the console? `(js/console.log Video)` – vikeri Nov 28 '18 at 14:39
It has printed the video component object. But, I can't see the component in the view. @vikeri – Tessy Thomas Dec 03 '18 at 08:53

score 0 · Accepted Answer · answered Dec 04 '18 at 09:50

I could embed YouTube video by using ReactNative WebView.

(def ReactNative (js/require "react-native"))
(def web-view (r/adapt-react-class (oget ReactNative "WebView")))

The component reference:

[web-view { :style {
                            :width 400
                            :height 200
                            :zIndex 10}
                      :javaScriptEnabled true
                      :domStorageEnabled true
                      :source {:uri "https://www.youtube.com/embed/M8Fn8SfXw3M"}}]

I think react-native-video is not supporting youtube videos.

ClojureScript + React-Native - Embed Videos

2 Answers2