import React, { Component } from 'react';
import { AppRegistry, asset, Pano, View, Text } from 'react-vr';
export default class Basics extends Component {
render() {
return (
<View>
<Pano source={asset('starry-sky.jpg')}></Pano>
</View>
)
}
};
AppRegistry.registerComponent('Basics', () => Basics);
'use strict';
import React from 'react';
import {AppRegistry, NativeModules, Text, View} from 'react-vr';
window.NativeModules = NativeModules;
class End2End extends React.Component {
render() {
return (
<View>
<Text
style={{
backgroundColor: '#777879',
fontSize: 0.8,
layoutOrigin: [0.5, 0.5],
paddingLeft: 0.2,
paddingRight: 0.2,
textAlign: 'center',
textAlignVertical: 'center',
transform: [{translate: [0, 0, -3]}],
}}>
hello
</Text>
</View>
);
}
}
AppRegistry.registerComponent('End2End', () => End2End);
// PointModule.changePointColor('yellow');
for (let [index, value] of coordi.entries()) {
// console.log(`PointModule${index}`)
// NativeModules[`PointModule${index}`].changePointColor('rgba(255,255,255)', 1)
NativeModules[`PointModule${index}`].changePointCoordinations(value)
NativeModules[`PointModule${index}`].setLineEndPoints(value, coordi)
}
}
render() {
return (
<View>
{/* <Pano source={asset('chess-world.jpg')}/> */}
{/* <Text
style={{
backgroundColor:'blue',
padding: 0.02,
textAlign:'center',
textAlignVertical:'center',
fontSize: 0.8,
layoutOrigin: [0.5, 0.5],
transform: [{translate: [0, 0, -3]}],
}}>
coo
</Text> */}
</View>
);
}
};
AppRegistry.registerComponent('VRViz', () => VRViz);
{rotateX: -90},
],
}}
source={{
obj: asset('creature.obj'),
mtl: asset('creature.mtl'),
}}
lit={true}
/>
<PointLight style={{color: 'white', transform: [{translate: [0, 400, 700]}]}} />
<Text
style={{
backgroundColor: 'grey',
padding: 0.1,
textAlign: 'center',
textAlignVertical: 'center',
fontSize: 0.4,
position: 'absolute',
transform: [{translate: [0, -2.5, -7]}],
layoutOrigin: [0.5, 0.5],
}}
>
Creature
</Text>
</View>
);
}
}
AppRegistry.registerComponent('ModelSample', () => ModelSample);
fontSize: 70,
fontWeight: '300',
borderRadius: 20,
backgroundColor: 'grey',
}}
>
Hello
</Text>
<Image
style={{
borderRadius: 20,
backgroundColor: 'red',
borderWidth: 10,
width: 600,
height: 315,
}}
source={{
uri: 'https://facebook.github.io/react/img/logo_og.png',
}}
/>
<Button />
</View>
</CylindricalPanel>
</View>
);
}
}
AppRegistry.registerComponent('CylindricalPanelDemo', () => CylindricalPanelDemo);
/**
* Rotate the cube back and forth
*/
_rotateOnce() {
this.state.rotation.setValue(0);
Animated.timing(this.state.rotation, {
toValue: this._rotateTo,
duration: 10000,
}).start(() => this._rotateOnce());
this._rotateTo = -this._rotateTo;
}
render() {
return (
<View>
<AnimatedBox
style={{
transform: [{translate: [0, 0, -1]}, {rotateY: this.state.rotation}],
}}
dimWidth={0.5}
dimHeight={0.5}
dimDepth={0.5}
texture={texture('fps')} // Use our custom texture
/>
</View>
);
}
}
AppRegistry.registerComponent('CustomTexture', () => CustomTexture);
super(props);
this.state = {
playerState: new MediaPlayerState({autoPlay: true, muted: true}), // init with muted, autoPlay
};
}
render() {
return (
<View>
<VideoPano
playerState={this.state.playerState}
source={[
asset('video.mp4', {format: 'mp4', layout: 'SPHERE'}),
asset('video.webm', {format: 'webm', layout: 'SPHERE'}),
]}
/>
<VideoControl
style={{
height: 0.2,
width: 4,
layoutOrigin: [0.5, 0.5, 0],
transform: [{translate: [0, 0, -4]}],
}}
playerState={this.state.playerState}
/>
</View>
);
}
}
AppRegistry.registerComponent('VideoSample360', () => VideoSample360);
shapeNum={shape}
colorNum={index}
transform={[{translate: [(index-1.5)*1.5, 0, -5]}]}
/>
</View>
)
})
}
</View>
)
}
}
const styles = StyleSheet.create({
game: {
transform: [
{translate: [-2.25, 0, 0]}
]
},
text: {
fontSize: 0.5,
textAlign: 'center',
color: '#fff',
transform: [
{translate: [0, 2, -5]}
]
}
});
AppRegistry.registerComponent('ShapeGame', () => ShapeGame);
right: {
width: 0.5,
},
label: {
color: 'black',
textAlign: 'left',
},
value: {
textAlign: 'right',
},
button: {
backgroundColor: 'green',
},
userAgent: {
backgroundColor: 'white',
width: 1.4,
},
userAgentString: {
color: 'black',
fontSize: 0.06,
},
});
AppRegistry.registerComponent('NativeModuleSample', () => NativeModuleSample);
if ((master && isConnect(action)) || (isDisconnect(action) && isMaster())) {
send(syncState(store.getState()));
}
};
// dispatch initial connect action when websocket is ready
ws.onopen = evt => {
store.dispatch(connect(localClient));
if (Location.search.substring(1) === 'random') {
setTimeout(() => {
randomActions(store, localClient);
}, 3000);
}
};
class App extends React.Component {
render() {
return (
<Provider store={store}>
<View>
<Board client={localClient} />
<Scores client={localClient} />
</View>
</Provider>
);
}
}
AppRegistry.registerComponent('pairs', () => App);
height: 0.5,
alignItems: 'center',
justifyContent: 'center',
borderWidth: 0.01,
transform: [
{translate: [-2, 0, -5]}
]
},
menuButtonText: {
textAlign: 'center',
fontSize: 0.15,
color: '#000'
},
menuItem: {
alignItems: 'center',
justifyContent: 'center',
width: 1,
height: 1,
borderRadius: 0.5,
borderWidth: 0.02,
backgroundColor: '#fff'
},
menuItemText: {
fontSize: 0.2,
textAlign: 'center',
color: '#000'
}
})
AppRegistry.registerComponent('WorldTour', () => WorldTour);