scrollable views in livestreaming, styling for comments, still missing orientation support

package.json

@@ -11,7 +11,9 @@
     "moment": "^2.16.0",
     "react": "15.3.2",
     "react-native": "0.37.0",
+    "react-native-orientation": "^1.17.0",
     "react-native-router-flux": "^3.37.0",
+    "react-native-scrollable-tab-view": "^0.6.0",
     "react-native-tabs": "^1.0.9",
     "react-native-video": "^0.9.0",
     "react-redux": "^4.4.6",

src/Router.js

@@ -18,11 +18,11 @@ const scenes = Actions.create(
 		</Scene>
 
 		<Scene key="main">
-			<Scene key="ListaCursadas" component={ListaCursadas} title="Cursadas" />
+			<Scene key="ListaCursadas" rightTitle="Curso en vivo" onRight={ () => Actions.Live() } component={ListaCursadas} title="Cursadas" />
 			<Scene key="ViewCursada" component={Cursada} title="Clases" />
 			<Scene key="ViewClase" component={Clase} title="Clase" />
 			<Scene key="ViewProf" component={Profesor} title="Profesor" />
-			<Scene key="Live" component={LiveVideo} />
+			<Scene key="Live" title="Curso en vivo" component={LiveVideo} />
 		</Scene>
 
 	</Scene>

src/components/Canvas.js

@@ -13,7 +13,7 @@ class Canvas extends Component  {
 		return (
 		<Image
 			source={{ uri: this.diapoUrl(this.props.pdf, this.props.diapo) }}
-			style={ [{ width: 300, height: 230, resizeMode: "contain" }, this.props.style ]}
+			style={ [{ flex:1, resizeMode: "contain" }, this.props.style ]}
 		/>
 		);
 	}

src/components/Chat.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { Text, ListView } from 'react-native';
+import { Text, TextInput, ListView } from 'react-native';
+import { Card, CardSection, Input } from './common';
 
 class Chat extends Component  {
 
@@ -24,10 +25,18 @@ class Chat extends Component  {
 
 	render() {
 		return (
-			<ListView
-				enableEmptySections
-				dataSource={this.dataSource}
-				renderRow={this.renderRow} />
+			<Card style={{flex:1}}>
+				<CardSection>
+					<ListView
+						enableEmptySections
+						dataSource={this.dataSource}
+						style={{flex:1}}
+						renderRow={this.renderRow} />
+				</CardSection>
+				<CardSection>
+					<TextInput style={{flex:1}} placeholder="Comentario" />
+				</CardSection>
+			</Card>
 		);
 	}
 };

src/components/LiveVideo.js

@@ -32,13 +32,12 @@ class LiveVideo extends Component {
   }
 
   render() {
+    var ScrollableTabView = require('react-native-scrollable-tab-view');
+
     return (
 	  <View style={{flex:1}}>
-		  <ScrollView
-			horizontal={true}
-			pagingEnabled={true}
-		  >
-			  <View style={styles.videoPage}>
+		  <ScrollableTabView renderTabBar={ () => <View/> } >
+			  <View tabLabel="Video" style={styles.videoPage}>
 			      <View style={styles.video}>
 			        <Video source={{ uri: "https://plataforma.especificosba.com.ar/hls/movie.m3u8" }}
 						ref={(ref) => { this.player = ref }}
@@ -54,11 +53,11 @@ class LiveVideo extends Component {
 
 			  </View>
 
-			  <View style={{flex:1,width:700}}>
+			  <View tabLabel="Chat">
 					<Chat messages={this.state.messages} />
    			  </View>
 
-		  </ScrollView>
+		  </ScrollableTabView>
 		  <Socket onDiapoChanged={this.onDiapoChanged.bind(this)} onMessage={this.onMessage.bind(this)} />
 	  </View>
 
@@ -72,7 +71,7 @@ const styles = StyleSheet.create({
 	  flex: 1
   },
   video: {
-	width: 320,
+	flex:1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
@@ -80,7 +79,7 @@ const styles = StyleSheet.create({
 
   },
   imageContainer: {
-    width: 320,
+	flex:1,
     margin: 5
   },
   instructions: {