PanoramaView and VideoView doesn't render anything

[marekpridal]

I completely follow you Readme but it just doesn't work. Borders are rendered but content isn't. I also tried to install it under react native 0.3.9 instead of 0.4.0 but it didn't change anything. Can you please make readme more specific or fix it to render content as well? Thanks a lot.

[tiero]

Hi @marekpridal

let's assume you have the project called native360 and enter to the ios folder (ensure the Podfile was in it)

1. From terminal pod install && pod update
2. Open native360.xcworkspace
3. Openin the Finder your project root directory and navigate to node_modules/react-native-360/ios
4. Inside there is a folder, drag the RNGoogleVR and drop to xCode under your project
5. Clean and Build again

I hope that helps you

In any case checkout the example here https://github.com/tiero/react-native-360/tree/master/example/test

PS: I'm working to drop out CocoaPods but seems very complicated due the Google SDK

[marekpridal]

Thanks a lot for help! Unfortunately I am without Mac until Monday, so I'll try it then 🙂

[marekpridal]

Hi so finally I got my Mac back. I tried do this tutorial again but it still doesn't work. I am sending screenshot and part of code.

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native';

import { VideoView } from 'react-native-360';

class Play extends Component {

  constructor(props) {
     super(props)
     }

  render() {
    return (
    <View style={styles.view}>
      <Text style={styles.listView}>Playing {this.props.URL}</Text>
      <VideoView
        style={{height:200,width:200}}
        video={{ uri:'http://vr.marekpridal.eu/videoplayback.mp4',
                 type: 'stereo'}}
        displayMode={'embedded'}
        volume={1}
        enableFullscreenButton
        enableCardboardButton
        enableTouchTracking
        hidesTransitionView
        enableInfoButton={false}
    />
    </View>
    );
  }
}

const styles = StyleSheet.create({
  listView: {
      marginTop: 80,
      textAlign: 'center'
  },
  view : {
    backgroundColor: 'white',
    flex: 1
  }
});

module.exports = Play

[tiero]

Hi @marekpridal , can you share your xCode folder structure?

I'm working on experimental hack to use Google VR without CocoaPods that are causing a lot of problem

[marekpridal]

[tiero]

Two considerations:

1. Google VR do not works in the simulator #3
2. When drag the RNGoogleVR folder to xCode be sure to be as group and copy files

Let me know

[marekpridal]

Great! Now works PanoramaView locally but i cannot load video from server - window stays green. Also when I want to switch to cardboard mode it doesn't work.
EDIT: Cardboard view starts working, but video is still NOT loading. Also after few minutes cardboard API crashes.

[tiero]

@marekpridal I think your video is of type mono, set 'mono' in video prop type

The example video is in stereo mode like this below

[marekpridal]

@tiero yeah, it was one thing. But it starts working after I moved panorama view above video view. But still cardboard mode works sometimes more often not and in video doesn't work at all. Anyway thanks a lot for your difficult and great work!